CODEWITHSUNDEEP
jqueryjquery-validate
Satch3000
Satch3000

Reputation: 49384

jQuery Validate and go to page after successful submit

I am working with jquery.validate.min.js script and its working fine as far as validation goes.

My problem is that its posting/submiting to data as it should but I need it to actually go to the success.php page after a successful submit.

Right now it just echos from success.php and shows in my main page.

How is the code below:

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script>
$(document).ready(function() {

$("#form1").validate({

    debug: false,
    rules: {
    name: "required",
    email: {
    required: true,
    email: true,
    }
    },
    messages: {
    name: "Please enter your name.",
    email: "Please enter a valid email address.",
    },
    submitHandler: function(form) {

    $.post('success.php', $("#form1").serialize(), function(data) {
    $('#result').html(data);
    });

    }
});

}); 


<form id="form1" action="success.php" method="POST">
    <input name="name" type="text" />
    <input name="email" type="text" />
    <input type="submit" value="submit" />
</form>
</script>

How can I get it to go to the posting page after a successful submit?

Upvotes: 0

Views: 9998

Answers (2)

Sparky
Sparky

Reputation: 98718

Your code:

submitHandler: function(form) {
    $.post('success.php', $("#form1").serialize(), function(data) {
        $('#result').html(data);
    });
}

"Right now it just echos from success.php and shows in my main page."

Yes, that's exactly how jQuery $.post() is supposed to function. It's ajax.

Simply remove the entire submitHandler callback function from .validate(). There's really no point in using ajax to submit the form in this case if you just want it to redirect to the default page. Remove the submitHandler option and it will behave like a standard form with a redirect based on your action attribute.

By default, the plugin will test the validity, and if the form is valid, it will submit like any other standard form and follow your action="success.php".

Working DEMO: http://jsfiddle.net/yCePj/

$(document).ready(function () {

    $("#form1").validate({
        debug: false,
        rules: {
            name: "required",
            email: {
                required: true,
                email: true,
            }
        },
        messages: {
            name: "Please enter your name.",
            email: "Please enter a valid email address.",
        }
    });

});

Upvotes: 1

David Omid
David Omid

Reputation: 665

What about this?

    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script>
$(document).ready(function() {

$("#form1").validate({

    debug: false,
    rules: {
    name: "required",
    email: {
    required: true,
    email: true,
    }
    },
    messages: {
    name: "Please enter your name.",
    email: "Please enter a valid email address.",
    }
});

}); 

function SubmitIfValid()
{
    if(!$("#form1").valid()) return false;  
    return true;
}

</script>

<form id="form1" action="success.php" method="POST">
    <input name="name" type="text" />
    <input name="email" type="text" />
    <input type="submit" value="submit" onclick="return SubmitIfValid();" />
</form>

Upvotes: 0

Related Questions