PHP repeating forms validation. How to validate using javascript?

Question

I have a repeating form. I have added validation to the forms with java script but I have to enter information in the first form before the other forms validate. I would like each validation process separate on each form. I have tried many different ways and all have failed. Thanks

PHP/html code below:

    $prodid = $row['id']; 



echo'<tr class="notetr3">';
echo '<form action="insertlink.php" method="post" name="' . $prodid. '" onSubmit="return newchoose1(' . $prodid. ')" >';
//first column (Company name)



echo '<td><select name="companyid" id="companyid"><option value="">Select Company</option>';
$result = mysql_query("
    SELECT * FROM company
        WHERE id NOT IN
            (SELECT DISTINCT companyid FROM joincomppro WHERE productid = '$prodid')

"); //select productid that matches productid table

while ($row = mysql_fetch_array($result)){
    $compid = $row['id'];
    $num_rows = mysql_num_rows($result);

    $sqlcompany2 = mysql_query("SELECT * from company WHERE id = '$compid'");   
    while ($row = mysql_fetch_array($sqlcompany2)){
        $companyname = $row['companyname'];

        if ($num_rows) {

            echo '<option value="' . $compid . '">' . $companyname . '</option>';
        }
    }
}
echo '</select></td>'; 

//Second column (Batch size)
echo '<td><input type="text" value="Batch Size" name="batchsize" id="batchsize" size="17" maxlength="40"/></td>';
//third column (Batch price)
echo '<td><input type="text" value="Batch Price" name="batchprice" id="batchprice" size="17" maxlength="40"/></td>';

//fourth column

echo '<td><input type="text" value="Unit Price" name="unitprice" id="unitprice" size="17" maxlength="40"/></td>';

//hidden value

$groupselect3 = mysql_query("SELECT * FROM product WHERE categorysubtype = '$categorysubtype' AND productname = '$productname' AND colour = '$colour'");
while($row = mysql_fetch_array($groupselect3))
{  
    echo '<input type="hidden" name="productid" id="productid" value="' . $row['id'] . '"/>';
    echo '<input type="hidden" name="groups2" id="groups2" value="' . $group . '"/>';
}
//submit
echo '<td><input type="submit" name="' . $prodid . '" value="Submit" /></td></tr>';

echo '</form>';

I then have JavaScript function as shown:

function newchoose1(id) {


    var emptyvalue = ""; 

    if (document.getElementById('companyid' + id).value == "") {
        emptyvalue += "Select a Company \n";
        }
    if (document.getElementById('batchsize' + id).value == "") {
        emptyvalue += "Enter a batch size \n";
        }       
    if (isNaN(document.getElementById('batchsize' + id).value)) {
        emptyvalue += "Batch Size has to be a whole number \n";
        }

    if((document.getElementById('batchprice' + id).value == "Batch Price" ) && (document.getElementById('unitprice' + id).value == "Unit Price")){

            emptyvalue += "Enter a number in Batch Price or Unit Price \n";

        }
    else if ((document.getElementById('batchprice' + id).value == "Batch Price") && (isNaN(document.getElementById('unitprice' + id).value))){

        emptyvalue += "Unit price has to be a valid number \n";

        }
    else if((document.getElementById('unitprice' + id).value == "Unit Price") && (isNaN(document.getElementById('batchprice' + id).value))){

            emptyvalue += "Batch price has to be a valid number \n";

            }
    else {}


    if  (emptyvalue != "") { 
        alert (emptyvalue);  
        return false;        
        }

}

Answer 1

One approach would be to add $prodid to each form element control (eg, "companyid") to ensure that each form control is unique and can thus be found by JavaScript. Then just include that $prodid inside your call to newchoose1() .

Something like this:

echo '<form action="insertlink.php" method="post" name="' . $prodid. '" onSubmit="return newchoose1(' . $prodid . ')" >';

// ...

echo '<td><select name="companyid" id="companyid' . $prodid . '"><option value="">Select Company</option>';

...and:

function newchoose1(id) {
    // ...
    if (document.getElementById('companyid' + id).value == "") {
    // etc....

Another approach would be to similarly pass $prodid to newchoose1() but instead of changing form controls, you would change the IDs inside the form to classes and then grab the element with the given class inside the specific form (I would recommend switching to jQuery to make your life simpler in this regard). This would also have the benefit of allowing you to present the same form controls with the same styles across different forms.