Javascript: Validating dynamically created radio button list control in ASP.NET

Question

I have an ASPX page where in the page load i am dynamically creating some radio button list controls and rendering to browser.I will have 2 list items in each radio button list .One is Yes and second is No. The number of Radio buttonlist can be n.Now in my java script code, i want to know which radio button is clicked . I m already using jQuery .any easy way to handle this ?

My HTML rendered to browser is

<table border="0" id="tblQuestions">
 <tr>
  <td>Do you have a valid passport ?</td>
 </tr><tr>
  <td><table id="answer-1" border="0">
   <tr>
    <td><input id="answer-1_0" type="radio" name="answer-1" value="1" /><label for="answer-1_0">Yes</label></td>
   </tr><tr>
    <td><input id="answer-1_1" type="radio" name="answer-1" value="0" /><label for="answer-1_1">No</label></td>
   </tr>
  </table></td>
 </tr><tr>
  <td>Are you married ?</td>
 </tr><tr>
  <td><table id="answer-2" border="0">
   <tr>
    <td><input id="answer-2_0" type="radio" name="answer-2" value="1" /><label for="answer-2_0">Yes</label></td>
   </tr><tr>
    <td><input id="answer-2_1" type="radio" name="answer-2" value="0" /><label for="answer-2_1">No</label></td>
   </tr>
  </table></td>
 </tr>
</table>

Thanks in advance

Answer 1

This is with the assumption that you already have jquery included in your page.

define a class on your radio button items, basically your client side HTML should look like <input id="answer-2_1" type="radio" name="answer-2" value="0" class="myrdo" />

now, in your js code, simply wire up an event handler on the class

$(".myrdo").bind("click",function(){if($(this).attr("checked")==true) {alert($(this).val);} });

the above command will simply alert the value of the selected radio button.

Answer 2

The following code doesn't specifically answer your question, but it might help. I'd modify it for you, but I just don't have the time right now.

I use this on exams, to warn the user that a particular question doesn't have a selected answer.

The questions are generated dynamically using a Server control which emits plain xhtml. I name all options with the same name, (Q1, Q2...), and ID them like (Q1a, Q1b ...)

To modify it for your purposes, perhaps you could build a list of selected options in the j loop, that is, adding name -value pairs where the "break" statement is.

// Grabs all inputs - radio, checkbox, text, buttons and lists -sticks them in an array
allInputs = document.getElementsByTagName("input");
var last = "NameUnlikelyToBeUsedAsAnElementName";

// walk through the array
for (i = 0; i< allInputs.length; i++)
{
 var input = allInputs[i];
 if (input.name == last) continue; // if this object name is the same as the last checked radio, go to next iteration


 // checks to see if any  one of  similarly named radiobuttons is checked 
 else if (input.type == "radio" )
 {    
     last = input.name; 
     var radios = document.getElementsByName(input.name);
     var radioSelected=false;

         //iterate over question options
        for (j=0; j < radios.length; j++)
     {
      if(radios[j].checked)
      {
         radioSelected=true;
         break; // Found it, proceed to next question 
      }
     }
     if (!radioSelected) // no option selected
     {       // warn user, focus question
      alert("You did not answer question " + input.id.substring(0,input.id.length-1));
      input.focus();
      return false;
     }     
 }

}

return true;

Answer 3

hi chris, your post helped so much, so than you!! that was exactly what i need ^_^

Answer 4

Worked Perfectly