Discussion :

[rvm31]

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 :

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

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

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

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

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>

[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

[rvm31]

Merci Sylvain

Mais je suis nul en JS et ton explication n'est pas de mon niveau je crois
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?

[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

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

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

[kolodz]

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

Code :

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

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

Code :

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

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

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

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

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

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 :

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

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

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

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.