Validate PHP form using java script

Question

I have form which is Dynamically populated from the data base as below

    <form name="marksForm" method="post" action="process_add_marks.php">
        <table width="800px" class="tbl">
            <tr><th><b>Name</b></th><th><b>University</b></th><th><b>Batch</b></th><th><b>Contact</b></th><th><b>Add Marks</b></th></tr>
            <?php
            $query = "SELECT sl_no,student_name,university,batch,contact FROM mytable WHERE `university` = '".$clgname."' AND `batch` = '".$batch."' AND delete_status != 'Deleted'";
            $raw_result = mysqli_query($link,$query)or die(mysqli_error());
            $count=mysqli_num_rows($raw_result);
            if(mysqli_num_rows($raw_result)>0)
            {
                while($results = mysqli_fetch_array($raw_result))
                {
                    echo "<tr>";
                    echo "<td>".$results['student_name']."</td>";
                    echo "<td>".$results['university']."</td>";
                    echo "<td>".$results['batch']."</td>";
                    echo "<td>".$results['contact']."</td>";
                    echo "<td><input name=marks[".$results['sl_no']."] style='width:30px' type='text'></td>";
                    echo "</tr>";
                }
            }

            ?>
        </table>
        <p id="markserr" style="color: #FF0000"></p>
        <input type="hidden" name="hisdl" value="<?=$sdlname?>">
        <input style="margin: 20px;cursor: pointer;" name="submit"  type="submit" class="button" onclick="return validateMarks();">
    </div>    
</form>

I'm trying to validate input field using javascript as below

function validateMarks()
{
    var b=document.getElementsByTagName('input');
    var count=0;
    for (i=0;i<b.length;i++){
        var box=b[i];
        if( box.value!=''){
            count++;
            break;
        }
    }

    if (count!=0){
        alert('Please fill all the fields');
        return false;
    } else {
        return true;
    }
}

The problem is I'm not able to submit the form even after filling all input fields

If you want to use JS for validation, select only the inputs inside the form — Tushar
– Tushar, Commented Sep 25, 2015 at 8:45
Place console.log(count); after for loop inside function and check your browser's console. — Indrasinh Bihola
– Indrasinh Bihola, Commented Sep 25, 2015 at 8:52
table width attribute does not have units; also, be modern, use CSS instead of attributes. — Raptor
– Raptor, Commented Sep 25, 2015 at 8:52

Garette Law · Accepted Answer · 2015-09-25 09:05:50Z

The problem is here its that your script is trying to validate the value of your submit input.

As one of the comments about suggested you could use a required attribute on the input element and change your script accordingly. Like so...

<script>
 function validateMarks()
{
    var b = document.getElementsByTagName('input');
    var count = 0;

    for(var i in b) {
        var box = b[i];
        if( box.required && box.value === '' ){
            count++;
        }
    }

    if (count > 0){
        alert('Please fill all the fields');
        return false;
    } else {
        return true;
    }
}
</script>

<form>
    <input type="text" name="foo" required />
    <input type="text" name="bar" required />
    <input type="text" name="wang" required />
    <input type="submit" onclick="return validateMarks();" />
</form>

I've modified your script slightly also do make it more readable.

Collectives™ on Stack Overflow

Validate PHP form using java script

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related