Formulaire et tableau

Version imprimable

Bonjour,

Voici mon soucis :

J'affiche un formulaire avec plusieurs catégories de produits. Chaque catégorie est associée à une image.

Je clique sur la ou les cases souhaitées (input type checkbox) : pas de soucis.

Par contre, si je clique sur l'image correspondant à la catégorie souhaitée, cela fonctionne uniquement si une seule catégorie existe.

Voici mon code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
echo "<form id='form_prod' name='aff_prod' method='POST' action='index.php' enctype='multipart/form-data'>";
while ($row=mysql_fetch_array($result, MYSQL_NUM)){
	echo "<div class=\"ss_rub\">";
	echo "<p class=\"titre_rub\">", $row[1], "</p>";
	echo "<input type=\"checkbox\" class=\"input_rub\" name=\"ma_rubrique[]\" value=$row[0]>";
	echo "<a href=\"javascript: selection();\"><img src=\"./images/$row[2].jpg\" alt=\"cliquer sur l'image\" title=\"cliquer sur l'image\" class=\"img_rub\"  /></a></input>";
	echo "</div>";		
}
echo "<p id=\"valider\">";
echo "<input type=\"hidden\" name=\"ma_categorie\" value=$rub >";
echo "<input type=\"button\" class=\"valid_prod\" value=\"Cocher tout\" onclick=\"toutcocher();\">";
echo "<input type=\"reset\" class=\"valid_prod\" value=\"Annuler la sélection\">";
echo "<input type=\"submit\" class=\"valid_prod\" value=\"Valider votre choix\">";
echo "</p>";
echo "</form>";
echo "</div>";
?>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script language="javascript">
function toutcocher(){	
for(i=0;i<document.aff_prod.length;i++){
	if(document.aff_prod.elements[i].type=="checkbox")	
	document.aff_prod.elements[i].checked=true;	
}	
}
</script>
<script language="javascript">
function selection(){
document.forms["aff_prod"].elements["ma_rubrique[]"].checked = true;
document.aff_prod.submit();
}
</script>

Merci de m'éclairer.

23/09/2014, 14h21
sekaijin

1) merci de lire la charte du forum
2) merci de ne poster que le HTML du navigateur pas le PHP du serveur.
3) ne pas utiliser de <a href="javascript: selection();"> mais <a href="#" onclick="selection(); return false;">.
4) tu parles de catégorie mais tu ne dis pas ce que tu entends par catégorie
5) tu appelles une fonction globale sur le click des liens mais celle-ci n'a pas de code pour déterminer quel lien est cliqué
6) tu parles de cliquer sur une image mais il n'y a pas d'image clicable dans ton code <img src="monimage.png" onclick="alerte(this.src);">.

A+JYT

Salut,

montre-nous le code généré : ouvre la page avec ton navigateur et fais Ctrl+U. On ne veut pas voir de code PHP sur le forum JavaScript.

Visiblement tu essayes de mettre du contenu dans une balise <input>. Ce n'est malheureusement pas possible. Vérifie dans l'onglet html de ta console Web et tu verras que le lien est en réalité placé à la suite de l'input.

Autre petite remarque, oublie <script language="javascript"> : mets <script type="text/javascript"> ou bien <script> tout court.

Ton problème se situe à cette ligne :

Code:

document.forms["aff_prod"].elements["ma_rubrique[]"].checked = true;

Lorsqu'il n'y a qu'un seul élément correspondant, la propriété elements renvoie un élément seul. Mais lorsqu'il y en a plusieurs, elle renvoie une collection d'éléments, de type NodeList. Si le changement de valeur de checked était transmis implicitement à tous les éléments de la collection (heureusement, il ne l'est pas), tu te retrouverais avec toutes tes checkboxes cochées, à la suite d'un clic sur une seul image. Ce n'est pas ce que tu veux.

Il faut que tu puisses sélectionner la checkbox qui correspond à l'image cliquée. Pour ça, le meilleur moyen c'est de donner un id différent à chaque checkbox, et ensuite d'utiliser la méthode document.getElementById.

À toi de jouer ;)

Edit: Je rebondis sur la remarque de Sekaijin (il y a eu tir croisé :P) à propos de <a href="#" onclick="selection(); return false;">. Utiliser onclick te permet de transmettre un évènement : <a href="#" onclick="selection(event); return false;">. En utilisant cet évènement dans ta fonction selection, tu peux remonter jusqu'à la bonne checkbox sans avoir besoin de lui donner un id, en utilisant event.target puis les propriétés de parcours du DOM : parentNode, previousSibling ou previousElementSibling, etc.

Cela dit, c'est moins souple car ton code JavaScript dépend de ta structure HTML. Le moindre changement dans le HTML et la fonction ne marche plus. Un exemple avec ta structure HTML actuelle :
Code:

1 2 3 4 <input type="checkbox" class="input_rub" name="ma_rubrique[]" value="$row[0]" /> <a href="#" onclick="selection(event); return false"> <img src="./images/$row[2].jpg" alt="cliquer sur l'image" title="cliquer sur l'image" class="img_rub" /> </a>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function selection(event) { var $a; if ('IMG' === event.target.tagName) { $a = event.target.parentNode; } else { $a = event.target; } var $input = $a.previousElementSibling; $input.checked = !$input.checked; //document.aff_prod.submit(); }
Comme tu le vois c'est plus compliqué que mettre un id. Et encore, je ne me suis pas préoccupé du fait que previousElementSibling n'est pas implémentée par tous les navigateurs…

23/09/2014, 14h55
phico04
Dsl de n'avoir pas pris le temps de lire la charte :oops:

En fait, le problème vient du code javascript :
Code:

1 2 3 4 5 6 7 <script language="javascript"> function selection(){ document.forms["aff_prod"].elements["ma_rubrique[]"].checked = true; document.aff_prod.submit(); } </script>
Si j'ai une seule rubrique, pas de coucis. Sinon, je devrais identifier l'id de mon tableau ma_rubrique mais je ne sais comment faire ?
23/09/2014, 15h38
phico04

Merci pour le code Watilin. Cela correspond à ma demande :D