www.webdeveloper.com
Results 1 to 4 of 4

Thread: How do you stop a form submission by javascript

  1. #1
    Join Date
    Jun 2010
    Posts
    37

    How do you stop a form submission by javascript

    Thanks to everyone who has helped me previously. My progress is so slow! I can make a form with javascript alerts coming up when people do not enter things for certain fields. And I can gather a total addition of numbers entered and make a javascript alert if it falls short of a certain amount.

    The form is sent to a php script for processing. But I have discovered that while the javascript alerts come up OK, it does not stop the submission of the form when the final alert is cleared (when you press OK on the alert box).

    The form does not get processed if *required* fields are not filled in, the user is alerted by the php form script The form works without javascript. Yes, it could be better but my question is mainly about javascript control:

    The alerts come up but the form is only temporarily stopped from being processed by the script if the submit button is pressed, after the alerts are cleared, the form goes through. I want it not to go through if the amount does not add up to $5.

    Is there anything wrong with my javascript check? Is there anything I can add to form or javascript to stop the form being submitted if the amount is less than $5.

    If the required asterisked fields are not filled, the php script sends an error message back, that is good. But I don't know what to put to make the php script send the error message if the amount is less than $5. I am asking here in case the javascript alone can stop the form. Be very obliged if someone looks over my form and js to see if these at least are OK?

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Test form</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <style type="text/css" media="screen">
    table {border-collapse: collapse;}
    td {border:1px solid; padding: .4em;}
    </style>
    <script type="text/javascript" charset="utf-8">
    <!--
    function validateForm(form)
    {

    if ("" == document.forms.form.realname.value)
    {
    alert("Please enter your name.");
    return false;

    }

    if ("" == document.forms.form.phone.value)
    {
    alert("Please enter your phone number.");
    return false;

    }

    var variable1 = document.getElementById('redname').value;
    variable1 = isNaN(variable1) ? 0: Number(variable1);
    variable1 = variable1 * 1.20;

    var variable2 = document.getElementById('bluename').value;
    variable2 = isNaN(variable2) ? 0: Number(variable2);
    variable2 = variable2 * 1.50;

    var total = variable1 + variable2;

    if (total < 5.0) {
    alert("Order is less than the minimum required of $5.0")
    // return false;
    //stops the order being submitted

    }

    else {
    //order is above the min. $5.0
    return true;
    //allows the form to be submitted

    }



    }
    //-->
    </script>

    </head>
    <body>
    <form id="form" method="post" name="form" action="formScript.php" onsubmit="return validateForm(form) ;">
    <div>
    <input type="hidden" name="recipients" value="recipient@example.com"><input type="hidden" name="required" value="realname,phone"> <input type="hidden" name="bad_url" value="http://example.com.au/error.html"> <input type="hidden" name="good_url" value="http://example.com.au/goodSub.html">
    </div>
    <table>
    <tr>
    <td style="border: 0;" colspan="3">
    <table id="required">
    <tr>
    <td class="requiredLabel">*Your name:</td>
    <td colspan="2"><input type="text" name="realname" id="realname" size="50"></td>
    </tr>
    <tr>
    <td class="requiredLabel">*Phone&nbsp;number:</td>
    <td colspan="2"><input type="text" name="phone" id="phone" size="50"></td>
    </tr>
    </table>
    </td>
    </tr>
    <tr class="head">
    <th>Color</th>
    <th>Price</th>
    <th>Quantity</th>
    </tr>
    <tr>
    <td>Red</td>
    <td>$1.20</td>
    <td><input type="text" name="redname" id="redname" size="6"></td>
    </tr>
    <tr>
    <td>Blue</td>
    <td>$1.50</td>
    <td><input type="text" name="bluename" id="bluename" size="6"></td>
    </tr>
    <tr>
    <td colspan="3">
    <p>NB. Minimum order value $5</p>
    <p><input type="submit" value="Submit"></p>
    </td>
    </tr>
    </table>
    </form>
    </body>
    </html>

  2. #2
    Join Date
    Mar 2010
    Posts
    2,803
    Code:
    if (total < 5.0) {
    alert("Order is less than the minimum required of $5.0")
    // return false;
    //stops the order being submitted 
    
    }
    It loks like you only need to uncomment the return false; above to stop the form being submitted if total < 5.

    Also, just a tip - when posting code, if you highlight your code and then click the # button in the editor's tool bar your code will be wrapped in code tags and hence formatted as you see above in this post.

    It just makes it easier to read for those trying to help....anyway, just food for thought.

  3. #3
    Join Date
    Jun 2010
    Posts
    37
    Quote Originally Posted by tirna View Post
    Code:
    if (total < 5.0) {
    alert("Order is less than the minimum required of $5.0")
    // return false;
    //stops the order being submitted 
    
    }
    It loks like you only need to uncomment the return false; above to stop the form being submitted if total < 5.

    Also, just a tip - when posting code, if you highlight your code and then click the # button in the editor's tool bar your code will be wrapped in code tags and hence formatted as you see above in this post.

    It just makes it easier to read for those trying to help....anyway, just food for thought.
    Thanks for the tip tirna, I will certainly take notice of this and try it next time.

    I know it is hard to believe but I found the error myself *just now* before coming here to tell you about exactly that. I found it by noticing that the check on the empty name field and phone number stopped the submission. and then slaps forehead... But your eagle eye spotted it too! I think I am making progress with this stuff. I really don't understand so much still! Expect me back soon!

    Thanks for replying.

  4. #4
    Join Date
    Mar 2010
    Posts
    2,803
    you're welcome

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles