Form validation with javascript with multiple input type name

Question

I want to make a quiz . first of all i make a quiz insert. so i want to make a validation like fill all the values in the form and answer must be in the option ... i try it with codeigniter framework . this is my View

<?php include_once('header.php'); ?>
<?php include_once('tnavbar.php'); ?>

<script src="<?php echo base_url();?>/js/jquery-1.9.1.min.js"></script>
<script>
function validateForm1()   //This javascript function is not working
{
var j=<? echo $number;?>;
for(var i=1; i<= j ; i++)
var qus1=document.forms["myForm1"]["ques[i]"].value;
var opt1=document.forms["myForm1"]["opt1[i]"].value;
var opt2=document.forms["myForm1"]["opt2[i]"].value;
var opt3=document.forms["myForm1"]["opt3[i]"].value;
var ans1=document.forms["myForm1"]["ans1[i]"].value;
if ((qus1==null || qus1=="")||(opt1==null || opt1=="")||(opt2==null || opt2=="")||        (opt3==null || opt3=="")||(ans1==null || ans1==""))
  {
  alert("All field must be fill");
  return false;
  }
}
</script>

<div class="maincontent_area">
<div class="container">
    <div class="row">
        <div class="span12">
        <form name="myForm1" action="<? echo base_url()."/index.php/Tmcq_test/insertmcq";?>" onsubmit="return validateForm1()" method="post">


            <?php         for($i=1; $i<= $number; $i++){
//Here the $number is user input like 2,3, or 4 etc number of mcq
?>
   Question : <input type="text" name="ques[<?php echo $i;?>]"><br/>
   Option 1 : <input type="text" name="opt1[<?php echo $i;?>]" ><br/>
   Option 2 : <input type="text" name="opt2[<?php echo $i;?>]" ><br/>
   Option 3 : <input type="text" name="opt3[<?php echo $i;?>]" ><br/>
   &nbsp;Answer : &nbsp;<input type="text" name="ans[<?php echo $i;?>]" ><br/>

   <br/>
   <?php  //echo $value->answer;

    } ?>
                    <input type="hidden" name="quiz_name"  value="<?php echo $name;?>">
                    <input type="hidden" name="sub_id"  value="<?php echo $sub_id;?>">
                    <input type="hidden" name="quiz_number"  value="<?php echo $number;?>">
                    <input type="hidden" name="time_number"  value="<?php echo $time_number;?>">

        <input type="submit" name="submit" id="submit" value="Create"  class="btn btn-info">


        </form>


        <a href="<? echo base_url()."/index.php/Tmcq_test";?>"> <button class="btn btn-info"> Exit  </button> </a>

        </div>
    </div>
</div>

Now how can i add form validation in this view with javascript i add some js code but its not working so how i implement this ? can anybody help

Answer 1

You should update your variable assignment. In your case JS is looking for form element named "ques[i]", "opt1[i]", "ans1[i]" etc. But you need to make letter "i" to variable. Try this one:

var qus1=document.forms["myForm1"]["ques[" + i + "]"].value;
var opt1=document.forms["myForm1"]["opt1[" + i + "]"].value;
var opt2=document.forms["myForm1"]["opt2[" + i + "]"].value;
var opt3=document.forms["myForm1"]["opt3[" + i + "]"].value;
var ans1=document.forms["myForm1"]["ans1[" + i + "]"].value;    

This works for me: http://jsfiddle.net/kXwBr/1/