Question

I have this form which allows the input of any product quantity from 1-10:

<form method='post' action='cart.php'>
<input type='number' name='quantitychange' size='2' min='1' max='10' value=".$_SESSION["itemsSelected"][$i][1].">
<input type='hidden' name='ProductID' value=".$_SESSION["itemsSelected"][$i][0].">
<input type='submit' value='Update'>
</form>

And another form (button) to display a selection of payment modes:

<form action='cart.php' method='post'>
<input type='hidden' name='next'>
<input type='submit' value='Select Payment Mode'>
</form>

What I want to happen is that when a user did not input anything (1st form), ex. null or 0, I want to display an alert box that says ‘Product quantity can’t be null or 0’.

Here’s my code for that:

if (isset($_POST['next'])) {
if ($_POST['quantitychange']==null || $_POST['quantitychange']==0) {
?>
<script type='text/javascript'>
alert('Product quantity can't be null or 0.');
</script>
<?php
}
else {
echo "
//Payment modes here
";
}
}

The error is that even when a user inputs a quantity bet. 1 to 10, it still displays the alert message. Any help? Thank you.

By the way, the input type “number” only works in Google Chrome browser.

Answer 1

Use a small javascript (or jQuery) function to validate the form before posting it. Have this function throw up the alert if your condition isn’t met and then return false. If the condition is met, return true, and it gets submitted.

Edited to add since this might get googled, I’ll help a bit with code snippet I have used. The below example is jQuery and was used in production for a web application I made for my employees. document.form.doit.submit(); should be the pure javascript way of submitting the form.

<script type="text/javascript">
function subForm() {
    // document.form.doit.submit();
    if( test condition passes ) {
        $('#save_order').submit();
    }
}
</script>

<form id="save_order" action="oms_db.php" method="POST">
<input id="doit" type="button"
    value="i am a button" onClick="subForm();">
</form>