Reputation: 73918

How to submit a Page using jQuery

Hi I need submit a page after some validation is done. I never used jQuery before, any idea how to do it? Script come from this tutorial http://webcloud.se/log/Form-validation-with-jQuery-from-scratch/

<form method="post" action="/contact-process" id="demo-form">

    <script>
        var demoForm = $("#demo-form");
        demoForm.validation();
        demoForm.submit(function (e) {

            $("#valid-form").remove();
            if (demoForm.validate()) {
                demoForm.append("<strong id='valid-form'>Form is valid!</strong>");
            // Here submit the page

            }
            e.preventDefault();
        });
    </script>

Upvotes: 1

Answers (7)

Shaggy13spe

Reputation: 733

Try adjusting your script code to only prevent the submit if validation fails. For example the following code (since you only provided a snippet, I just created a basic page that does essentially what you want, you'll have to adjust your code as needed)

<html>
<head>
<title></title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js" type="text/javascript"></script> 
    <script type="text/javascript">
      $(document).ready(function() {
        var valid = true;
        $("form").submit(function (e) {
            if (!valid) {
                e.preventDefault();
            }
        });});
    </script>
</head>
<body>
<form method="post" action="anotherpage.htm">
    <input type="text" value="hello"></input>
    <input type="submit" value="submit"></input>
</form>
</body>

Calling .preventDefault (side note: you can also return false) stops the submit from actually taking place. If the form is valid, it skips the if statement and continues with the submit.
You should place your jquery code inside $(document).ready(function() {}); because you don't want anything to fire before the DOM is fully loaded.
Generally, you should place your script tag in the HEAD element

Upvotes: 1

ShankarSangoli

Reputation: 69905

If form is valid just return true else return false it will stop the form to submit.

    demoForm.submit(function (e) {

        $("#valid-form").remove();
        if (demoForm.validate()) {
            demoForm.append("<strong id='valid-form'>Form is valid!</strong>");

            return true;            

        }
        return false;
    });

Upvotes: 0

InvisibleBacon

Reputation: 3222

Change your handler to only prevent default if the form is invalid:

demoForm.submit(function (e) {
    $("#valid-form").remove();
    if (demoForm.validate()) {
        demoForm.append("<strong id='valid-form'>Form is valid!</strong>");
    }
    else
        e.preventDefault();
});

Upvotes: 2

Frédéric Hamidi

Reputation: 262939

Since you're handling the form's submit event, you only need to call preventDefault() if it is invalid:

demoForm.submit(function(e) {
    $("#valid-form").remove();
    if (demoForm.validate()) {
        demoForm.append("<strong id='valid-form'>Form is valid!</strong>");
    } else {
        e.preventDefault();
    }
}

Upvotes: 3