check box pour affichage dans un formulaire multiple

Version imprimable

bonjour

j'ai un formulaire généré par un for each.
dans celui ci une check box qui doit afficher une fenêtre cachée quand le check box est 'checked'
cela fonctionne bien dans un formulaire unique mais je ne sais pas comment affecter les différents id des check box dans le JS j'ai essayé ça.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function alerte(test1){
 
 
	if (document.getElementById("alerte_comp['<?=$id;?>']" ).checked == true) {
 
 
		document.getElementById('message[<?=$id;?>]').style.visibility="visible";
 
	}
 
	if (document.getElementById("alerte_comp[<?=$id;?>]" ).checked == false) {
 
        document.getElementById('message[<?=$id;?>]').style.visibility="hidden";
 
}
}

source de la page

Code:

1
2
3
4
5
6
7
8
 <!--alerte prod -->
      <input type="checkbox" name="alerte[]" id="alerte_comp[34164]" checked='checked' onClick='alerte(this.checked)' />Besoin de compl&eacute;ment d'infos.<br>
<font style='visibility: hidden' id='message[34164]'>
 
    message
    <textarea class="contenurush" name="message[]">
            message d'alerte</textarea>
    </font>

et code PHP

Code:

1
2
3
4
5
6
7
8
 <!--alerte prod -->
      <input type="checkbox" name="alerte[]" id="alerte_comp[<?php echo $id ?>]" <?php echo $checked?> onClick='alerte(this.checked)' />Besoin de compl&eacute;ment d'infos.<br>
<font style='visibility: hidden' id='message[<?php echo $id ?>]'>
 
    message
    <textarea class="contenurush" name="message[]">
            <?php  echo $message;?></textarea>
    </font>

04/12/2012, 15h36
SylvainPV

Bonjour,

- Les crochets dans les ID et les name, à éviter
- Les ID ne sont pas le seul moyen d'identifier un élément ! Quand il y en a plusieurs qui remplissent la même fonction, tu peux utiliser des classes ou te référer au tag et aux éléments parents.
- Si ton textarea se trouve toujours après ta checkbox, tu n'as peut-être pas besoin de les nommer explicitement. Tu pourrais l'atteindre avec input.nextSibling par exemple, ou encore input.parent.lastChild
04/12/2012, 15h44
rvm31

Merci Sylvain

Mais je suis nul en JS et ton explication n'est pas de mon niveau je crois :cry:
je crois que j'ai besoin de plus d'explication.
Les crochets des noms sont là pour récupérer ce formulaire dans un array après l'envoi pour faire un update dans la base.
donc si je n'identifie pas les éléments par un ID comment puis je faire pour les identifier dans une liste générée dynamiquement?
04/12/2012, 16h12
kolodz

Tu peux filtré sur une partie de l'id :
Exemple avec JQuery :
http://api.jquery.com/attribute-starts-with-selector/

Après tu crée ton event au niveau de tes input, via un filtre du genre. Tu pourra retrouver l'identifiant complet lors du déclanchement de l'event
04/12/2012, 18h48
rvm31

désolé mais je ne comprend rien au code suggéré.
Je ne comprend pas comment ça fonctionne puisque je ne vois rien dans la partie démo.
Je vais avoir besoin de quelques explications de texte, ou de code plus exactement.
04/12/2012, 20h14
SylvainPV

Il existe un tas de solutions pour récupérer un élément HTML du document en Javascript. Tu utilises les ID avec document.getElementById, mais il y a aussi :
- document.querySelector(All)
- document.getElementsByName
- document.getElementsByTagName
et à partir d'un élément, il existe tout un tas de propriétés et méthodes pour naviguer dans le DOM : parentNode, childNodes, previousSibling, nextSibling, firstChild, lastChild...

Donc plutôt que de nommer chaque textarea avec un ID, tu pourrais dire à ta fonction alerte de chercher le prochain <textarea> après cet élément. Si tu les places toujours au même endroit dans le DOM, aucun souci.

Autant pour moi, j'ai mal lu le problème...

Code:

if($('#quicknav').is(':visible')){$('#quicknav').hide();}else{$('#quicknav').show();}

Code:

if(document.getElementById('quicknav').style.visibility == 'hidden'){document.getElementById('quicknav').style.visibility = '';}else{document.getElementById('quicknav').style.visibility = 'hidden';}

Ce qui donne dans ton exemple :

Code:

1
2
3
4
5
6
7
8
<!--alerte prod -->
      <input type="checkbox" name="alerte[]" id="alerte_comp_34164" checked='checked' onClick="if(document.getElementById('message_34164').style.visibility == 'hidden'){document.getElementById('message_34164').style.visibility = '';}else{document.getElementById('message_34164').style.visibility = 'hidden';}"/>Besoin de compl&eacute;ment d'infos.<br>
<font style='visibility: hidden' id='message_34164'>
 
    message
    <textarea class="contenurush" name="message[]">
            message d'alerte</textarea>
    </font>

Code:

1
2
3
4
5
6
7
8
<!--alerte prod -->
      <input type="checkbox" name="alerte[]" id="alerte_comp_<?php echo $id ?>" <?php echo $checked?> onClick="if(document.getElementById('message_<?php echo $id ?>').style.visibility == 'hidden'){document.getElementById('message_<?php echo $id ?>').style.visibility = '';}else{document.getElementById('message_<?php echo $id ?>').style.visibility = 'hidden';}"/>Besoin de compl&eacute;ment d'infos.<br>
<font style='visibility: hidden' id='message<?php echo $id ?>'>
 
    message
    <textarea class="contenurush" name="message[]">
            <?php  echo $message;?></textarea>
    </font>

Tu peux aussi utiliser une fonction au lieu de redéfinir le traitement à chaque fois :

Code:

1
2
3
4
function displayMessageComplementaire(id){
<div style="margin-left:40px">if(document.getElementById(id).style.visibility == 'hidden'){
<div style="margin-left:40px">document.getElementById(id).style.visibility = '';</div>} else {
<div style="margin-left:40px">document.getElementById(id).style.visibility = 'hidden';</div>}</div>}

Et du coup faire :

Code:

onClick="displayMessageComplementaire('message_<?php echo $id ?>'"

Cela fonctionnera. Tu pourrai faire un traitement plus générale. Mais tu verra ça plus tard.

Cordialement,
Patrick Kolodziejczyk.