Using javascript to loop through dynamically created controls with php

Okay, this situation is a little weird, but anyway. This PHP code generates several radio objects:

    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, this works fine after creating the checkboxes, I'm trying to run some code to get all the radio buttons and it didn't work, so I tried just doing one radio button a few 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, 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

It is not null the first time, but after that. Any thoughts?

Thanks!

+1


a source to share


2 answers


It might be because your HTML is not valid. You also don't have to explicitly reference the function __get()

, but this is most likely not a related issue.

Sort of:

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

      

is not the correct way to define a switch.

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: And now I see. You are using document.writeln()

. This function overwrites the content of the page.

So, for the first time in the loop, the element exists, and it invokes a call document.writeln()

that writes "true" to the page. This overwrites whatever was on the page before (did you notice how when the page loads, it only has javascript output?). Next time through the loop, it will try to find the radio button again, but it was removed and replaced with javascript output. Now he no longer exists.

+1


a source


You can use document.getElementsByName("group")

to get all switches.

This loop works great. Problems with document.writeln (), it replaces the html in the page and so the DOM elements are gone. Here the updated version is used instead of Alert.



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

      

+2


a source







All Articles