Récupérer des champs 'hidden' multiples

Version imprimable

Salut à tous,

Je galère pour passer les valeurs d'un champ 'hidden' multiple.
Ma page d'accueil comporte 10 boutons en position 'on'. Un clic souris sur le bouton le bascule à 'off' (c'est une image).

J'ai essayé ce code :
Code:

1 2 3 4 5 6 7 8 9 10 <form name="frm" method="POST" action="read.php"> <? for($i=0;$i<10;$i++) { echo 'Etat : <button type="button" style="background:none; border:0; cursor:pointer;"> <img src="b_ON.jpg" onclick="change(this)"></button><br/>'; echo "<input type='hidden' name='etat[]' value='0'>"; } ?> <br /><br /><button type="submit"> Valider </button> </form>
La fonction javascript qui gère le basculement :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <script type="text/javascript"> var b = 1; function change(img) { if (b) { img.src = 'b_OFF.jpg'; } else { img.src='b_ON.jpg'; } b = !b; } </script>
Comment 'garnir' le tableau etat[] pour qu'il soit transmis à 'read.php' via la validation du formulaire ? Autrement dit, comment transmettre l'état de tous les boutons à ma page PHP ?
Merci

18/09/2012, 09h27
SpaceFrog

as tu testé un var_dump de $_POST coté serveur ?
18/09/2012, 09h34
Bovino

Quelques remarques :
* A quoi servent les balises <button> ? :koi:
*

Citation:

La fonction javascript qui gère le basculement

La fonction que tu montres est bancale : l'état de chaque image dépend du nombre de clics sur toutes les images (variable b globale) donc si tu cliques successivement sur deux images, il n'y aura pas de basculement pour la deuxième...
* A quel moment modifies-tu l'état des input hidden ?
18/09/2012, 09h42
SpaceFrog

Code:

<input type="submit" value="valider" />

permettra de faire passer les données au serveur
18/09/2012, 09h47
Laskar

Citation:

Envoyé par Bovino

Quelques remarques :
* A quoi servent les balises <button> ? :koi:
*

bah, a créer un contrôle destiné à soumettre le formulaire ! (ta question me surprend)

Citation:

La fonction que tu montres est bancale : l'état de chaque image dépend du nombre de clics sur toutes les images (variable b globale) donc si tu cliques successivement sur deux images, il n'y aura pas de basculement pour la deuxième...

Oui, je sais mais en fait la question n'est pas là.

Citation:

* A quel moment modifies-tu l'état des input hidden ?

Elle est LA la question !! ;)
18/09/2012, 09h59
Bovino

Je ne parlais pas du bouton submit mais de ceux qui entourent tes balises images ;)

Sinon, pour retrouver l'input hidden associé à chaque image, tu as plusieurs solutions.
Tu peux utiliser les méthodes du DOM (parentNode et nextSibling notamment) mais cela rendrait le code trop dépendant de la structure HTML.
Le mieux serait d'utiliser ta boucle PHP pour générer des identifiants uniques à chaque couple image / input et de retrouver l'un depuis l'autre. Tu peux aussi te simplifier encore la tâche en utilisant les attributs data pour stocker des informations utiles au niveau du balisage.
18/09/2012, 12h56
Laskar

Citation:

Envoyé par Bovino

Je ne parlais pas du bouton submit mais de ceux qui entourent tes balises images ;)

Ah! oui ! En effet, ces balises ne servent à rien ...

Citation:

Tu peux aussi te simplifier encore la tâche en utilisant les attributs data pour stocker des informations utiles au niveau du balisage.

Interessant, mais je ne sais pas récupérer ces 'data' coté PHP. Un petit bout de code peut-être ? :roll:

Non, côté PHP, tu ne récupèreras que les valeurs des input ayant un attribut name.
L'intérêt des attributs data-* est de pouvoir placer dans le code HTML des informations qui pourront t'être utiles via JavaScript.
Si l'on reprend l'exemple de ta boucle, ça pourrait donner :
Code:

1 2 3 4 5 6 7 8 9 10 <form name="frm" method="POST" action="read.php"> <? for($i=0;$i<10;$i++) { echo 'Etat : <img data-relatedInput="input-'.$i.'" src="b_ON.jpg" onclick="change(this)" /><br/>'; echo "<input id="input-'.$i.'" type='hidden' name='etat[]' value='0'>"; } ?> <br /><br /><button type="submit"> Valider </button> </form>
et ensuite, dans ta fonction JavaScript
Code:

1 2 var relatedInput = document.getElementById(img.dataset.relatedInput); relatedInput.value = b ? true : false;
enfin, c'est juste une piste de départ, parce que

Citation:

La fonction que tu montres est bancale : l'état de chaque image dépend du nombre de clics sur toutes les images (variable b globale) donc si tu cliques successivement sur deux images, il n'y aura pas de basculement pour la deuxième...

sera bien à prendre en considération à un moment ou un autre, mais là aussi, tu peux utiliser un attribut data-* ;)

Voici mon code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<head>
<script type="text/javascript">
 
function change(n)
{
	var obj = "img"+n;
	var val = "etat"+n;
	var img = document.getElementById(obj).src;
	var ImgName = img.substring(img.lastIndexOf("/")+1,img.length);
	if (ImgName == 'b_OFF.jpg')
	{	
		document.getElementById(obj).src = 'b_ON.jpg';
		document.getElementById(val).value= 0;		
	}
	else
	{
		document.getElementById(obj).src = 'b_OFF.jpg';
		document.getElementById(val).value= -1;
	}
}
</script>
 
</head>
<body>
<form name="frm" method="POST" action="read.php">
	<?
		for($i=0;$i<10;$i++)
		{
			echo 'Etat : <img src="b_ON.jpg" id="img'.$i.'" onClick="change('.$i.')"><br/>';
			echo "<input type='hidden' id='etat".$i."' name = 'etat[]' value='0'>";
		}
	?>
	<br /><br /><button type="submit"> Valider </button>	
</form>
</body>
</html>

Et la page php qui récupère la tableau :

Code:

1
2
3
4
<?
	$val = $_POST["etat"];
	print_r( $val);
?>

Résultat :
Array ( [0] => 0 [1] => -1 [2] => -1 [3] => 0 [4] => -1 [5] => 0 [6] => 0 [7] => 0 [8] => 0 [9] => 0 )

Tous les boutons OFF ont une valeur de -1, les autres valent 0.
Y'avait sans doute plus simple mais j'ai fait avec les moyens du bord ...

Merci à tous