11548 sujets

JavaScript, DOM et API Web HTML5

Recuperer la couleur d'une case dans un formulaire [Résolu]

Bonjour,
j'ai un formulaire avec 4 input et un bouton(couleur) et un bouton(confirmer)
apres avoir selectionner une case de mon formulaire, je clique sur le bouton(couleur), qui me met en couleur(jaune) cette case. jusque la tout va bien.
Mon probleme, c'est que mon formulaire est connecté a une BD et que j'aimerais bien en cliquant sur le bouton confirmer, recuperer la couleur de chaque case de mon formulaire.afin de rajouter sur ma BD.
j'espere que j'etais clair, posez moi des questions.
Merci
Modifié par salsero34 (11 May 2007 - 23:16)
Salut,

Je vois plus ou moins ton formulaire, un petit exemple serait le bienvenue quand même.

Il me vient deux idée:

- ta couleur ne peut être que jaune ou pas jaune donc? pourquoi ne pas la gérer comme un bouton radio?

- sinon si plusieurs couleurs sont possibles(et si tu as colorisé les choses en CSS ) tu peux interroger la valeur de la variable background-color de l'element dans un javascript et puis la placer dans un champ caché et alors seulement validé ton formulaire.

(sinon pas de background CSS) l'idée a mon avis reste la même...
c.a.d. valider par javascript et mettre la couleur en champ caché.

le mieux ce serait de nous montrer un lien vers une page de test.

Pascal
Modifié par CPascal (03 May 2007 - 15:21)
Merci de m'avoir repondu, ma case peut prendre plusieurs couleurs, voila j'ai fait une page à part pour faire des tests,
voici le code, 


<html>
<head>
<script>var sel=0;</script>
</head>

<body>

<? 
	if (isset ($_GET['ok']))
	{	
		?>
		<SCRIPT language=javascript>
		
		  if (document.getElementByName("titre1").style.backgroundColor == '#FFFF00')
				{ alert( "true" );}

		</script>
		<?
	}	
	else
		{
			echo '<form action="index.php" method="get" >';
			echo '<INPUT id="1" onClick="sel=1;" type=text name="titre1" value= "toto">';
			echo '<INPUT id="2" onClick="sel=2;" type=text name="titre2" value= "momo">';
			echo '<INPUT id="3" onClick="sel=3;" type=text name="titre3" value= "kiko">';
			?>
			<INPUT onClick="getElementById(sel).style.backgroundColor = '#FFFF00' " type="button" value="couleur"> 
			<INPUT type="submit" name="ok" value="ok1">
			<?
		}
	?>
</body>
</html>


si tu v eux je t'nvoie par mail une copie d'ecran de mon vrai travail,
Re,

voila le code que je te propose:

<html>
<head>
<script>var sel=0;</script>
</head>

<body>

<? 
	if (isset ($_POST['ok']))
	{	
	    if ($_POST['coultitre1'] == '#FFFF00') echo "<br>toto"; 
		if ($_POST['coultitre2'] == '#FFFF00') echo "<br>momo";
		if ($_POST['coultitre3'] == '#FFFF00') echo "<br>kiko";  
	}	
	else
		{
			echo '<form action="testcouleur.php" method="post" >';
			echo '<INPUT id="1" onClick="sel=1;" type=text name="titre1" value= "toto">';
			echo '<INPUT id="2" onClick="sel=2;" type=text name="titre2" value= "momo">';
			echo '<INPUT id="3" onClick="sel=3;" type=text name="titre3" value= "kiko">';
			?>
			<input type="hidden" name="coultitre1" id="coultitre1">
			<input type="hidden" name="coultitre2" id="coultitre2">
			<input type="hidden" name="coultitre3" id="coultitre3">
			<INPUT onClick="getElementById(sel).style.backgroundColor = '#FFFF00'; getElementById('coultitre'+sel).value = '#FFFF00';" type="button" value="couleur"> 
			<INPUT type="submit" name="ok" value="ok1">
			<?
			echo '</form>';
		}
	?>
</body>
</html>



ça devrait etre bon Smiley smile .

tu ne peux pas récuperer les données pour faire le test en réaffichage avec un getElementById.

Mais par contre tu as l'info dans les variables php.

Si tu veux envoyer des screens autant les mettre dans le forum y a une fonction joindre image.
Je ne suis pas un expert du javascript faut pas croire Smiley langue .

Pascal
Ok c nikel, ca marche, mais moi en fait j'ai 4 boutons couleurs, je vais essayer d'adapter ton code pour qu'il marche.
Merci.
Merci boco de m'avoir aider voici le code qui marche pour n boutons

<html>
<head>
<script>var sel=0;</script>
</head>

<body>

<? 
	if (isset ($_POST['ok']))
	{	
	    if ($_POST['coultitre1'] == '#FFFF00') echo "<br>toto_couleur1"; 
		if ($_POST['coultitre1'] == '#C0C0C0') echo "<br>toto_couleur2"; 
		if ($_POST['coultitre2'] == '#FFFF00') echo "<br>momo_couleur1";
		if ($_POST['coultitre2'] == '#C0C0C0') echo "<br>momo_couleur2";
		if ($_POST['coultitre3'] == '#FFFF00') echo "<br>kiko_couleur1";
		if ($_POST['coultitre3'] == '#C0C0C0') echo "<br>kiko_couleur2";  
	}	
	else
		{ $a=0;
			for($i=0; $i<3; $i++)
			{
				$name3="toto".$i.""; $name4="momo".$i."";
				
				echo '<form action="index.php" method="post" >';
				
				$a=$a+1;$var="sel=".$a.";";
				echo '<INPUT id="'.$a.'" onClick="'.$var.'" type=text name="titre1" value="'.$name3.'">';
				$var0="coultitre".$a."";
				echo '<input type="hidden" name= "'.$var0.'" id= "'.$var0.'">';
				
				$a=$a+1;$var0="coultitre".$a."";$var="sel=".$a.";";
				echo '<INPUT id="'.$a.'" onClick="'.$var.'" type=text name="titre1" value="'.$name4.'">';
				echo '<input type="hidden" name= "'.$var0.'" id= "'.$var0.'">';
				

				?>
			<INPUT onClick="getElementById(sel).style.backgroundColor = '#FFFF00'; getElementById('coultitre'+sel).value = '#FFFF00';" type="button" value="couleur"> 
			<INPUT onClick="getElementById(sel).style.backgroundColor = '#C0C0C0'; getElementById('coultitre'+sel).value = '#C0C0C0';" type="button" value="couleur2"> 
			<INPUT type="submit" name="ok" value="ok1">
			<br><?
			}
				
		}
	?>
</body>
</html>
re,

Ben sans probleme Smiley ravi . et cool que ça marche

Si tu as le temps, mets le sujet résolu.
Je pense qu'aprés l'insertion dans la BDD est une formalité.

Pascal.
Bonjour, j'ai un petit probleme, des que je donne une couleur par defaut à une case du formulaire. le code ne fonctionne plus.
ca me sort n'importe quoi. voici le code


<html>
<head> <script>var sel=0;</script> </head>

<body>

<? 
	if (isset ($_POST['ok']))
	{		$a=0;
		for($i=0;$i<6;$i++)
			{
				$a=$a+1; $var0="c".$a."";
				if (isset($_POST[$var0]) == '#FFFF00') {echo $var0."jaune"; echo "<br>";}
				if (isset($_POST[$var0]) == '#C0C0C0') {echo $var0."gris"; echo "<br>";}
			}
	}	
	else
		{ $a=0;
			for($i=0; $i<3; $i++)
			{
				$name3="toto".$i.""; $name4="momo".$i."";
				
				echo '<form action="index.php" method="post" >';
				
				$a=$a+1;$var="sel=".$a.";";
				echo '<INPUT id="'.$a.'" onClick="'.$var.'" type=text name="titre1" value="'.$name3.'" style="background-color:#FFFF00;>';
				$var0="c".$a."";
				
				echo '<input type="hidden" name= "'.$var0.'" id= "'.$var0.'">';
				
				$a=$a+1;$var0="c".$a."";$var="sel=".$a.";";
				echo '<INPUT id="'.$a.'" onClick="'.$var.'" type=text name="titre1" value="'.$name4.'">';
				echo '<input type="hidden" name= "'.$var0.'" id= "'.$var0.'">';
				

				?>
			<INPUT onClick="getElementById(sel).style.backgroundColor = '#FFFF00'; getElementById('c'+sel).value = '#FFFF00';" type="button" value="couleur"> 
			<INPUT onClick="getElementById(sel).style.backgroundColor = '#C0C0C0'; getElementById('c'+sel).value = '#C0C0C0';" type="button" value="couleur2"> 
			<INPUT type="submit" name="ok" value="ok1">
			<br><?
			}
				
		}
	?>
</body>
</html>


Merci
Re,

j'ai commençé a regarder ton code.

sur lequel y aurais beaucoup a dire.

pour l'instant j'en suis là :

<html>
<head> <script>var sel=0;</script> </head>

<body>

<? 
	if (isset ($_POST['ok']))
	{	
		for($i=1;$i<7;$i++)
			{
				//die (var_dump($_POST));
			    $var0="c".$i."";
				if (isset($_POST[$var0]) && ($_POST[$var0]) == '#FFFF00') {echo $var0."jaune"; echo "<br>";}
				if (isset($_POST[$var0]) && ($_POST[$var0]) == '#C0C0C0') {echo $var0."gris"; echo "<br>";}
			}
	}	
	else
		{ $a=0;
		
		    echo '<form action="index.php" method="post" >';
			for($i=0; $i<3; $i++)
			{
				$name3="toto".$i.""; $name4="momo".$i."";
				$a=$a+1;$var="sel=".$a.";";
				echo "\n";
				echo '<input id="'.$a.'" onClick="'.$var.'" type=text name="'.$a.'" value="'.$name3.'" style="background-color:#FFFF00;>';
				$var0="c".$a."";
				
				echo "\n";
				echo '<input type="hidden" name= "'.$var0.'" id= "'.$var0.'" value="#FFFF00" >';
				
				$a=$a+1;$var0="c".$a."";$var="sel=".$a.";";
				echo "\n";
				echo '<input id="'.$a.'" onClick="'.$var.'" type=text name="'.$a.'" value="'.$name4.'">';
				echo "\n";
				echo '<input type="hidden" name= "'.$var0.'" id= "'.$var0.'" >';
				
			
				?>
			
			
			<br><?
			echo "\n";
			}
		?>
		 <input onClick="getElementById(sel).style.backgroundColor = '#FFFF00'; getElementById('c'+sel).value = '#FFFF00';" type="button" value="couleur"> 
	     <input onClick="getElementById(sel).style.backgroundColor = '#C0C0C0'; getElementById('c'+sel).value = '#C0C0C0';" type="button" value="couleur2"> 
		 <input type="submit" name="ok" value="ok1">	<?
		echo "\n</form>\n";
		}
	?>
</body>
</html>


ce qui rend un résultat cohérent pour les 3 cellules qui n'ont pas de couleurs initiales. c tjs ça.

mais alors il y a quequechose qui m'echappe et si quelqu'un d'autre de la communauté pouvait me l'expliquer ou alors toi?

style.backgroundColor et style="background-color:#FFFF00;>' ...... pourquoi ces 2 écritures ? moi jusqu'ici je ne connaissais que la 2eme. d'ou viens l'autreet est-ce bien la même chose que je manipule?
Bonjour,

style.backgroundColor

permet d'accéder via Javascript à la propriété css background-color se trouvant dans l'attribut style (in-line) d'un élément.

style="background-color: #ff0;"

permet d'appliquer une propriété css à un élément.

Bonne continuation.
Romain
Re,

Merci yodaswii,

j'étais persuader que c'était toujours les noms des propriétés css qu'on utilisait en javascript. dans ma tête je ne dissociais même pas les 2 ( appel dans javascript et element css ).


mais finalement me restait plus qu'un petit bug. me manquait le dernier " a:

  style="background-color: #ff0;"


@ salsero



ça fait 2 fois que tu me passes un code de formulaire sans le fermer d'une balise </form> en plus là tu ouvrais 3 fois le formulaire Smiley biggol
essai de respecter un peu les normes xhtml ça fait pas de mal.

if (isset($_POST[$var0]) == '#FFFF00') ne teste pas le contenu de la variable posté.

y avait d'autre erreurs mais je les passes par contre un dernier conseil penses a insérer des "\n" pour aérer le code source. pour le debug ça facilite bcp les choses.



edit:
il faut aussi attribué une valeur par défaut a chaque case. sinon peut se presenter un pb avec les precedents pour les cases blanches.

Pascal
Modifié par CPascal (04 May 2007 - 19:38)
Bonsoir,
Merci à vous tous, est ce normal que les cases qui possedaient une couleur par default(jaune) ne retourne rien quand on leur change la couleur?
càd, en selectionant la premiere case par exemple qui est jaune par default je clique sur le bouton couleur2, je change la couleur de cette case et quand j'appuie sur le bouton ok ca me retourne pas que la case est grise, moi en fait j'aimerai recuperer la couleur finale de toutes les cases.
Re,

mais si ca marche. tu prends le code donner precedemment et puis comme dis dans le post que j'ai fais aprés y a un " a rajouter pour la declaration de style et c bon.

style="background-color:#FFFF00;>'


en


style="background-color:#FFFF00;">'


et aprés tu peux mettre un valeur initiale a toutes tes cases. suffit de mettre cette valeur comme cà 


style="background-color:#FFFF00;">'


et de mettre aussi cette valeur initiale dans le champ caché.

<input type="hidden" .... value="#FFFF00" >


Pascal
Modifié par CPascal (04 May 2007 - 19:42)
<html>
<head> <script>var sel=0;</script> </head>

<body>

<? 
	if (isset ($_POST['ok']))
	{	
		for($i=1;$i<7;$i++)
			{
				//die (var_dump($_POST));
			    $var0="c".$i."";
				if (isset($_POST[$var0]) && ($_POST[$var0]) == '#FFFF00') {echo $var0."jaune"; echo "<br>";}
				if (isset($_POST[$var0]) && ($_POST[$var0]) == '#C0C0C0') {echo $var0."gris"; echo "<br>";}
			}
	}	
	else
		{ $a=0;
		
		    echo '<form action="index.php" method="post" >';
			for($i=0; $i<3; $i++)
			{
				$name3="toto".$i.""; $name4="momo".$i."";
				$a=$a+1;$var="sel=".$a.";";
				echo "\n";
				echo '<input id="'.$a.'" onClick="'.$var.'" type=text name="'.$a.'" value="'.$name3.'" style="background-color:#FFFF00;">';
				$var0="c".$a."";
				
				echo "\n";
				echo '<input type="hidden" name= "'.$var0.'" id= "'.$var0.'" value="#FFFF00" >';
				
				$a=$a+1;$var0="c".$a."";$var="sel=".$a.";";
				echo "\n";
				echo '<input id="'.$a.'" onClick="'.$var.'" type=text name="'.$a.'" value="'.$name4.'">';
				echo "\n";
				echo '<input type="hidden" name= "'.$var0.'" id= "'.$var0.'" >';
				
			
				?>
			
			
			<br><?
			echo "\n";
			}
		?>
		 <input onClick="getElementById(sel).style.backgroundColor = '#FFFF00'; getElementById('c'+sel).value = '#FFFF00';" type="button" value="couleur"> 
	     <input onClick="getElementById(sel).style.backgroundColor = '#C0C0C0'; getElementById('c'+sel).value = '#C0C0C0';" type="button" value="couleur2"> 
		 <input type="submit" name="ok" value="ok1">	<?
		echo "\n</form>\n";
		}
	?>
</body>
</html>


voilà tous compris.
Sujet clos
Aller à