Dynamic radio button validation

[deepson2]

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]

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]

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]

Hello Rajiv,

 

needless to say that your code is working!!! 

 

Thanks a lot! 

[deepson2]

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]

this

 

form.elem.selectedIndex == 0

 

should be

 

form.elem.selectedIndex != 0

[deepson2]

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]

actually my fault

 

it should have been

form.elements.selectedIndex != 0

[deepson2]

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]

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]

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]

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]

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]

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

[deepson2]

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?