Dynamic radio button validation

deepson2 · December 9, 2009

I am showing some questions dynamically which are having true/false options each. I want to give java script validation for it. I am passing my qid with options. so if i have 11 question in my list so i will get 11 true/false pair of radio button for the each question. Now i want user should play all the 11 questions otherwise through the alert message that play your quiz completely.

here is my php code

<?php
$query= mysql_query( "SELECT * FROM mytable WHERE m_qid='$m_qid'");
       	 if(mysql_num_rows($query) > 0)
       	 {
         	while($row = mysql_fetch_assoc($query))
         	{ ?>
			<form action="<?$PHP_SELF;?>" method="post" name="cont">

			 <table style='font:12px Verdana, Arial, sans-serif;'>
			 <tr>
			 <td style='padding:20px 0px 10px 0px; line-height:20px;'>Q. <?=$row['question'];?></td>
			 </tr>

			 <tr>
			 <td style='padding:0px 0px 10px 0px;'>
			 <?
				$options=$row['answer'];
				$qid=$row['qid'];
				$correct_answer=$row['correct_answer'];
				//echo $qid;
				$string                   = explode(",",$options);
				$total_count=count($string);
				//echo "$total_count"; ?>

				<? for($i=0;$i<$total_count;$i++)
				  {
<input class="radio_button" type="radio" value="<?php echo $string[$i];?>"  name="<?=$qid;?>"> <?php echo $string[$i];?>

<? } }} ?>
<input  class="submit" type="submit" name="submit" value="submit" onClick="javascript:return validate(cont);">

js code

function validate(cont) {

             if(document.cont.qid.value =="")
	{
	alert("Please play your quiz completely");
	document.cont.qid.focus();
	return false;
}

return true;
}

Can anyone please tell me how can we do javascript validation for dynamic radio buttons?

deepson2 · December 9, 2009

This snippet is a html version(source) of my page where you can see actually name/id values changes with qid(TF_013,TF_014). How we can check now individually that the value is empty or not?

<input class="radio_button" type="radio" id="TF_013" value="True"  name="H_013">   True						
<br/>

<input class="radio_button" type="radio" id="TF_013" value="False"  name="H_013">   False						<input type ="hidden" value="HIV_TF_PG_002" name="main_quizid">
<br/>
</td>
</tr>
<form action="" method="post" name="cont">
<table style='font:12px Verdana, Arial, sans-serif;'>
<tr>
<td style='padding:20px 0px 10px 0px; line-height:20px;'>Q. Most symptoms </td>
</tr>
<tr>
<td style='padding:0px 0px 10px 0px;'>
<input class="radio_button" type="radio" id="TF_014" value="True"  name="H_014">   True						
<br/>
<input class="radio_button" type="radio" id="TF_014" value="False"  name="H_014">   False		
<br/>

rajivgonsalves · December 9, 2009

this code should work

<script>
function validate(form) {
var selected = new Array();
var radios = new Object();
var questioncount = 0;
    for (i=0;i<form.elements.length ; i++ ) {
        if (form.elements[i].type == 'radio' && form.elements[i].checked) {
            selected.push(form.elements[i].name);
        }
        else if(form.elements[i].type == 'radio' && !radios[form.elements[i].name]) {
            radios[form.elements[i].name] = 1;
            questioncount++;
        }
    }

    if (questioncount != selected.length)
    {
        alert('Please answer all questions');
        return false;
    }   
    return true;
} 

</script>

<form action="#" onsubmit="return validate(this)">
Test 1: <input type="radio" name="q1" value="111" />111 <br />
        <input type="radio" name="q1" value="122" />122<br />
         <input type="radio" name="q1" value="133" />133<br />
<br />

Test 2: <input type="radio" name="q2" value="111" />111<br />
        <input type="radio" name="q2" value="122" />122<br />
         <input type="radio" name="q2" value="133" />133<br />

         <br />
         <input type="submit" name="s1" value="take quiz" />

</form>

deepson2 · December 9, 2009

Hello Rajiv,

needless to say that your code is working!!!

Thanks a lot!

deepson2 · December 9, 2009

I have applied same logic for select box. but its not working. what i am missing here can anyone please tell me.

my code=

js

<script>
function validate(form) {

var selected = new Array();
var radios = new Object();

var questioncount = 0;
for (i=0;i<form.elements.length ; i++ )

   {
        if (form.elem[i].type =="select-one" && form.elem[i].selectedIndex == 0)
        {
            selected.push(form.elements[i].name);
        }
        else if(form.elements[i].type == 'select-one' && !radios[form.elements[i].name])
        {
            radios[form.elements[i].name] = 1;
            questioncount++;
        }
    }

    if (questioncount != selected.length)
    {
        alert('Please answer all questions');
        return false;
    }
    return true;
}

</script>

php code

<form action="<?$PHP_SELF;?>" method="post" name="cont" onsubmit="return validate(this)">
		<tr>
	<?
	for($i=0;$i<$total_count;$i++)
	 {

<td> <select name="select[]">
<option value="">--- Select ---</option>
<?php

$list=mysql_query("select * from mytable where mqid='$mqid'");
// Show records by while loop.
while($row=mysql_fetch_assoc($list))
{
?>
<option value="<?php echo $row['ans']; ?>"  <?php if($select == $row['ans']){ echo "selected"; } ?>><?php echo $row['ans']; ?></option>

<? }} ?>
<input class="submit" value="Submit" type="submit" name="submit"/>

rajivgonsalves · December 9, 2009

this

form.elem.selectedIndex == 0

should be

form.elem.selectedIndex != 0

deepson2 · December 9, 2009

Thanks for your reply rajiv,

i have tired what you have suggested here

if (form.elem.type =="select-one" && form.elem.selectedIndex != 0)

but its not working. any suggestion?

rajivgonsalves · December 9, 2009

actually my fault

it should have been

form.elements.selectedIndex != 0

deepson2 · December 9, 2009

Its not working

Is that i need to change here somthing. because my select box name value is an array?

<select name="select[]">

And the the JS

var selected = new Array();
var radios = new Object();

var questioncount = 0;
for (i=0;i<form. selects.length; i++ )

   {
        if(form.elem[i].type =="select-one" && form.elements.selectedIndex != 0)
        { //rest of the code
        }

I mean do i need to change only

 form.elements.selectedIndex != 0

so the code which works for radio box will work for select box as well?

please tell me.

rajivgonsalves · December 9, 2009

yeah only that

has to be, it did not come in properly as I did not enclose it in the code tags

form.elements[i].selectedIndex != 0

deepson2 · December 9, 2009

Ok, still its not working.

Here is my code

could you please check what i am missing here-

<script>
function validate(form) {

var selected = new Array();
var radios = new Object();

var questioncount = 0;
for (i=0;i<form.elements.length ; i++ )

   {
        if (form.elements[i].type == 'select' && form.elements[i].selectedIndex != 0)
        {
            selected.push(form.elements[i].name);
        }
        else if(form.elements[i].type == 'select' && !radios[form.elements[i].name])
        {
            radios[form.elements[i].name] = 1;
            questioncount++;
        }
    }

    if (questioncount != selected.length)
    {
        alert('Please answer all questions');
        return false;
    }
    return true;
}

</script>

php code

<form action="<?$PHP_SELF;?>" method="post" name="cont" onsubmit="return validate(this)">
		<tr>
	<?
	for($i=0;$i<$total_count;$i++)
	 {
		 echo "<td style='padding:0 10px 0 0;'>".$question[$i]."</td>";
		 ?>
		 <td> <select name="select[]">
				<option value="">--- Select ---</option>
				<?php

				$list=mysql_query("select * from mytable  where mqid='$mqid'");


				// Show records by while loop.
				while($row=mysql_fetch_assoc($list))
				{

				?>
					<option value="<?php echo $row['ans_no']; ?>"  <?php if($select == $row['ans_no']){ echo "selected"; } ?>><?php echo $row['ans_no']; ?></option>
				<?php

						// End while loop.
				}
					mysql_free_result($list);

					?>
		</select></td>
		 </tr>
	<?
	}// for close
		echo "</table>";
?>

rajivgonsalves · December 9, 2009

here you go there were logical changes

<script>
function validate(form) {

var selected = new Array();

var questioncount = 0;

    for (i=0;i<form.elements.length ; i++ )
   {
        alert(form.elements[i].name);
        if (form.elements[i].type == 'select-one')
        {
            if (form.elements[i].selectedIndex != 0) selected.push(form.elements[i].name);
            questioncount++;
        }
    }
    if (questioncount != selected.length)
    {
        alert('Please answer all questions');
        return false;
    }
    return true;
}

</script>




<form action="" method="post" name="cont" onsubmit="return validate(this)">
<select name="q1">
               <option value="">--- Select ---</option>
               <option value="1">--- Select ---</option>
               <option value="2">--- Select ---</option>
               <option value="3">--- Select ---</option>
         </select>
<select name="q2">
               <option value="">--- Select ---</option>
               <option value="1">--- Select ---</option>
               <option value="2">--- Select ---</option>
               <option value="3">--- Select ---</option>
         </select>

<input type="submit" name="s1" value="take quiz" />
</form>

deepson2 · December 9, 2009

Rajiv you are JS god for me today!

yes,its working!

one last question can we give focus() on each record.something like this

document.cont.How.focus();

rajivgonsalves · December 9, 2009

you can store the first question that is not answered in a variable, it will take some code restructure a bit for that

deepson2 · December 9, 2009

ok,

I was trying somthing like this

if (questioncount != selected.length)

{

document.cont.select.focus();

alert('Please answer all questions');

return false;

}

any random suggestion?

Sign In

Dynamic radio button validation

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information