Using javascript to loop dynamically created controls with php

Question

Ok, this situation is a little weird but anyway. This PHP code generates several 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, that works fine, after the checkboxes are created, I'm trying to run some code to get all the radio buttons and it didn't work, so I tried just getting one radio button several times, and it only gets it the first time.

function Validate()
{

 var i = 1;

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

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

 document.writeln('out of loop');

 return false;
}

So I know FOR SURE that 'radioButtonAnswer2' exists and it shouldn't be null. But this is what I get when I click the submit button:

false true true true true true true true true out of loop

The first time is not null, but after that, it is. Any thoughts?

Thanks!

Answer 1

You can use document.getElementsByName("group") to get all the radio buttons.

This loop works fine. The problems is with document.writeln(), it replaces the html in the page and therefore the DOM elements are gone. Here's an updated version using an Alert instead.

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;
}

Answer 2

It may be because your HTML you are generating is invalid. You also shouldn't be explicitly calling the __get() function, but that's an unrelated issue most likely.

Something like:

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

is not the correct way to define a radio button.

Try this 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>';
}

---

Edited to add: Ah, now I see. You're using document.writeln(). That function overwrites the content of the page.

So the first time into the loop, the element does exist, and it does a document.writeln() call, which writes "true" to the page. This overwrites everything that was on the page before (didn't you notice how when the page loads, it only has the output of the javascript?). The next time through the loop, it tries to look for the radio button again, but it's been erased and replaced with the javascript output. Now it no longer exists.