Inserting JavaScript validation in dynamically generated form

Question

I am generating a dynamic form, and just want to insert JavaScript validation in it.

<?php
echo'<form action="" nam="airform" onsubmit="return check()">';

while ($row=$run->fetch_assoc()) {

    if (empty($array_vendor)) {
            echo "<option>NO ENTRIES FOUND!!</option></select></td>";
    }
    else {

       echo "<option value=''>Select</option>";

       for($i=0;$i<count($array_vendor);$i++){
           echo "<option> $array_vendor[$i]
           $array_phone[$i] ,VENDOR =  $array_name[$i]</option>";

       }
   }
   echo "</select></td><td><select name='carnumber' class='form-control'style='width:100px'class='nametwo'>";

   if (empty($array_car)) {
       echo "<option>NO ENTRIES FOUND!!</option></select></td>";
   }
   else {
       # code...
       echo "<option value=''>Select</option>";

       for($i=0;$i<count($array_car);$i++){

            echo "  <option> $array_car[$i],
             $array_belong[$i]</option>";

       }
   }
   echo "</select></td>";
   echo "<td><select name='status_option' class='form-control' class='namethree'>
              <option value=''>Select</option>
              <option>Completed</option>
              <option>Pending</option>
              <option>Cancelled</option>
              <option>Refunded</option>
          </select></td>
          <td><input type='submit' name='air_status' class='ui huge olive basic button' value='Update'></td>
          <td><input type='hidden' name='id_one' value='$row[id]'></td>
        </tr></form>";
?>

This is my JavaScript validation

<script type="text/javascript">
    function check() {

        var input = document.forms['airform'].driverentry.value;
        var y = document.forms['airform'].carnumber.value;
        var z = document.forms['airform'].status_option.value;

        var fields = input.split(/=/);

        var name = fields[0];
        var street = fields[1];


        var a = y.split(/,/);

        var noneed = a[0];
        var need = a[1];


        if (input === "") {
            alert('Please select the driver detail');
            $(this).focus();
            return false;
        } else if (y === "") {
            alert('Please select the car number');
            $(".nametwo").focus();
            return false;
        } else if (z === "") {
            alert('Please select the status');
            $(".namethree").focus();
            return false;
        } else if (need != street) {
            alert('Vendor email on both the fields should match');
            $(".nametwo").focus();
            return false;
        } else {
            return true;
        }
    }
</script>

The problem is that the validation is working for the first entry generated but not for others. How can I fix it?

Can you print the created html form?, I see you are calling a close tag of the select element before creating it, — Mohanad Kaleia, Jul 15 '17 at 18:15
form is generated perfectly,no issues I omitted the above code to make it shorter — , Jul 15 '17 at 19:30
Better avoid writing codes for dynamic validation.. Ideal approach would be to use plugins that is defined already. For now, I am using http://parsleyjs.org/ — Nandakumar, Aug 22 '17 at 17:31

Ashwin K Joseph · Accepted Answer · 2017-07-15T19:53:24.803

0

have you tried passing in the id of the form along with the function and then accessing the form through that Id?

<?php $i = 0; 
//looping logic
?>
<form id="someID<?php echo $i ?>" onsubmit="check(this.id)">

the above is for your forms,

then in your js,

function check(id){
   var form = document.getElementById(id);
   //logic
}

Now that we have the ID of the form, refer to Best Practice: Access form elements by HTML id or name attribute? This explains how to access the form elements from it's ID

edited Jul 15 '17 at 19:53

answered Jul 15 '17 at 18:23

Ashwin K Joseph

371
2
4
14

how to access form fields in javscript then? ,I tried – Jul 15 '17 at 19:41
var form = document.getElementById(id); var input = document.forms['form'].driverentry.value; var y= document.forms['form'].carnumber.value; var z= document.forms['form'].status_option.value; – Jul 15 '17 at 19:41

Inserting JavaScript validation in dynamically generated form

1 Answers1