Utilisation de javascript pour boucler les contrôles créés dynamiquement avec php

Question

Ok, cette situation est un peu bizarre mais de toute façon. Ce code PHP génère plusieurs radiobuttons:

for($i = 0; $i<count($questionList); $i++) 
    { 
     echo $questionList[$i]->__get(QuestionId).'-'.$questionList[$i]->__get(QuestionText).'<br />'; 

     $answerList = $questionList[$i]->GetAnswers(); 

     for($j = 0; $j<count($answerList); $j++) 
     { 
      echo '<br /><input type=\'radio\' name=\'group'.$i.'\' id=\'radioButtonAnswer'.$answerList[$j]->__get(AnswerId).'\' value=\''.$answerList[$j]->__get(AnswerId).'\' >'. 
      $answerList[$j]->__get(AnswerText).'</input>'; 
     } 
     echo '<br /><br />'; 
    } 

Ok, ça fonctionne très bien, après que les cases à cocher sont créés, je suis en train d'exécuter un code pour obtenir tous les boutons radio et il ne fonctionne pas, alors j'ai essayé Il suffit d'avoir un bouton radio plusieurs fois, et il ne l'obtient que la première fois.

function Validate() 
{ 

    var i = 1; 

    do 
    { 
     document.writeln(document.getElementById('radioButtonAnswer2') == null); 

     i ++; 
    }while(i < 10); 

    document.writeln('out of loop'); 

    return false; 
} 

Alors je sais, ce qui existe « radioButtonAnswer2 » et il ne devrait pas être nulle. Mais ce que je reçois quand je clique sur le bouton d'envoi:

faux vrai vrai vrai vrai vrai vrai vrai vrai de boucle

La première fois est non nul, mais après cela, il est. Des pensées?

Merci!

Answer 1

Il se peut que votre HTML généré ne soit pas valide. Vous ne devez également pas appeler explicitement la fonction __get(), mais il s'agit probablement d'un problème sans rapport.

Quelque chose comme:

<input type="radio" ...>Label Text</input> 

est pas la bonne façon de définir un bouton radio.

Essayez ce code:

for($j = 0; $j<count($answerList); $j++) 
{ 
     echo '<br /><input type="radio" name="group'.$i.'" id="radioButtonAnswer'.$answerList[$j]->AnswerId.'" value="'.$answerList[$j]->AnswerId.'" />'; 
     echo '<label for="radioButtonAnswer'.$answerList[$j]->AnswerId.'">'.$answerList[$j]->AnswerText.'</label>'; 
} 

---

Edité pour ajouter: Ah, je vois. Vous utilisez document.writeln(). Cette fonction écrase le contenu de la page.

Donc, la première fois dans la boucle, l'élément existe, et il fait un appel document.writeln(), qui écrit "true" à la page. Cela écrase tout ce qui était sur la page avant (n'avez-vous pas remarqué comment lorsque la page se charge, seulement a la sortie du javascript?). La prochaine fois à travers la boucle, il essaie à nouveau de rechercher le bouton radio, mais il a été effacé et remplacé par la sortie javascript. Maintenant, il n'existe plus.

Answer 2

Vous pouvez utiliser document.getElementsByName("group") pour obtenir tous les boutons radio.

Cette boucle fonctionne correctement. Les problèmes sont avec document.writeln(), il remplace le html dans la page et donc les éléments DOM sont partis. Voici une version mise à jour en utilisant une alerte à la place.

function Validate(){ 
    var radioGroup = document.getElementsByName("group"); 
    var results = ""; 
    for(i = 0, len = radioGroup.length; i < len; i++){ 
    currentRadio = radioGroup[i]; 
    results += "\n" + currentRadio.id + " is "; 
    results += (currentRadio.checked ? "checked" : "not checked"); 
    } 
    results += "\n..out of loop..."; 
    alert(results);  
    return false; 
}