I have the following form validation and submission script in jquery but for some reason its not working. It looks like its submitting but when i click submit it just resets the form and it doesn't validato or do the ajax post. Does anyone know what i am doing wrong here?
<script type="text/javascript">
$(function(){
$('#form').submit(function(e){
e.preventDefault();
$("#form").validate({debug: false,
rules: {
name: "required",
email: {
required: true,
email: true
},
phone: {
required: true,
phone: true
}
},
messages: {
name: "Please let us know who you are.",
email: "A valid email will help us get in touch with you.",
phone: "Please provide a valid phone number.",
},
submitHandler: function() {
// Send the request
$.post('/submit.php', {
name: $('#name').val(),
email: $('#email').val(),
phone: $('#phone').val(),
message: $('#message').val()
}, function(d){
alert("Thank you for submitting your request someone will contact your shortly.");
});
}
});
});
});
</script>
You just need to add
$('#form').submit(function(e) {
....
return false;
});
to the end of the submit, this will avoid executing the actual submit of the form.
UPDATE: As pointed out by Dustin, preventDefault might be better if you don't want to stop your event from bubbling up..
$('#form').submit(function(e) {
....
e.preventDefault();
});
I switched your code a bit, seems you using jquery validate?, their documents have the correct way to submit a form. http://jqueryvalidation.org/documentation/#too-much-recursion
<script type="text/javascript">
$("#form").validate({
debug: false,
rules: {
name: "required",
email: {
required: true,
email: true
},
phone: {
required: true,
phone: true
}
},
messages: {
name: "Please let us know who you are.",
email: "A valid email will help us get in touch with you.",
phone: "Please provide a valid phone number.",
},
submitHandler: function(form) {
// Stop the form actually posting
e.preventDefault();
// Send the request
$.post('/submit.php', {
name: $('#name').val(),
email: $('#email').val(),
phone: $('#phone').val(),
message: $('#message').val()
}, function(d){
alert("Thank you for submitting your request someone will contact your shortly.");
});
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.