Validate three number input fields with javascript

Question

I'm currently setting up a page with PHP which has three numeric input fields on it. It looks as follows:

echo "Adult Tickets: <input type=\"number\" name=\"adulttickets[]\" value='0' id='adult' min='0' max='10'><br />";
echo "Child Tickets: <input type=\"number\" name=\"childtickets[]\" value='0' id='child' min='0' max='10'><br />";
echo "Student Tickets: <input type=\"number\" name=\"studenttickets[]\" id='student' value='0' min='0' max='10'><br />";

echo <<<_END

<input type="submit" onsubmit = 'return validate()' value="Submit booking details">

I want to use javascript to ensure that the form cannot be submitted if none of the three input types have been altered from their default value of zero. In reflection of this I set up the following JS script:

<script>
function validate(){
    var adult = document.getElementById('adult').value;
    var child = document.getElementById('child').value;
    var student = document.getElementById('student').value;

    if(adult==0 && child ==0 && student==0){
        alert("yes.");
        return false;

    }
    return true;
}
</script>

Nothing happens when I run this however. Am I going about this the right way? Is there some better way to achieve the outcome I just described?

Akam · Accepted Answer · 2016-05-28 00:18:43Z

2

I suppose you have this code below, just change onsubmit to onclick

<?php
echo "Adult Tickets: <input type=\"number\" name=\"adulttickets[]\" value='0' id='adult' min='0' max='10'><br />";
echo "Child Tickets: <input type=\"number\" name=\"childtickets[]\" value='0' id='child' min='0' max='10'><br />";
echo "Student Tickets: <input type=\"number\" name=\"studenttickets[]\" id='student' value='0' min='0' max='10'><br />";
?>
<input type="submit" onclick = 'return validate()' value="Submit booking details">

<script>
function validate(){
    var adult = document.getElementById('adult').value;
    var child = document.getElementById('child').value;
    var student = document.getElementById('student').value;

    if(adult==0 && child ==0 && student==0){
        alert("yes.");
        return false;

    }
    return true;
}
</script>

answered May 28, 2016 at 0:18

Akam

1,05216 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gavgrif · Accepted Answer · 2016-05-28 00:19:04Z

1

you need parse the input values into numbers (currently they are strings even though the input type is number - the value will be a string) before comparing them;

var adult = parseInt(document.getElementById('adult').value);
var child = parseInt(document.getElementById('child').value);
var student = parseInt(document.getElementById('student').value);

answered May 28, 2016 at 0:19

gavgrif

15.5k2 gold badges30 silver badges31 bronze badges

Collectives™ on Stack Overflow

Validate three number input fields with javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related