Discussion :

[Laskar]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[SpaceFrog]

as tu testé un var_dump de $_POST coté serveur ?

[Bovino]

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

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 ?

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

permettra de faire passer les données au serveur

[Laskar]

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

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

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à.

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

Elle est LA la question !!

[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.

[Laskar]

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

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

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 ?

[Bovino]

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 php :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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-*

[Laskar]

Voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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