I'm trying to use the jquery validate plugin to validate a form and submit the contents with an ajax request.
This code is in the head of my document.
$(document).ready(function() {
$('#contact-form').validate({submitHandler: function(form) {
$(form).ajaxSubmit();
contactSuccess() ;
}
});
});
The validation works. However, the submission is made normally: On submission, the page reloads. Of course, I've got a non-js fallback behaviour for browsers that don't have js enabled. But I'd like to get the smoother user experience working.
The error that I see in firebug is: $(form).ajaxSubmit is not a function
What could I be doing wrong here?
I'm guessing you don't have a jquery form plugin included. ajaxSubmit isn't a core jquery function, I believe.
Something like this : http://jquery.malsup.com/form/
UPD
<script src="http://malsup.github.com/jquery.form.js"></script>
this is new function so you have to add other lib file after jQuery lib
<script src="http://malsup.github.com/jquery.form.js"></script>
it will work.. I have tested.. hope it will work for you..
Ajax Submit form with out page refresh by using jquery ajax method first include library jquery.js and jquery-form.js then create form in html:
<form action="postpage.php" method="POST" id="postForm" >
<div id="flash_success"></div>
name:
<input type="text" name="name" />
password:
<input type="password" name="pass" />
Email:
<input type="text" name="email" />
<input type="submit" name="btn" value="Submit" />
</form>
<script>
var options = {
target: '#flash_success', // your response show in this ID
beforeSubmit: callValidationFunction,
success: YourResponseFunction
};
// bind to the form's submit event
jQuery('#postForm').submit(function() {
jQuery(this).ajaxSubmit(options);
return false;
});
});
function callValidationFunction()
{
// validation code for your form HERE
}
function YourResponseFunction(responseText, statusText, xhr, $form)
{
if(responseText=='success')
{
$('#flash_success').html('Your Success Message Here!!!');
$('body,html').animate({scrollTop: 0}, 800);
}else
{
$('#flash_success').html('Error Msg Here');
}
}
</script>