I am using the JQuery Form extension to submit a form with AJAX. I have the following code:
var options = {
beforeSubmit: showRequest, // pre-submit callback
success: showResponse, // post-submit callback
// other available options:
//url: url // override for form's 'action' attribute
//type: 'post', // 'get' or 'post', override for form's 'method' attribute
//dataType: null // 'xml', 'script', or 'json' (expected server response type)
clearForm: true, // clear all form fields after successful submit
//resetForm: true // reset the form after successful submit
// $.ajax options can be used here too, for example:
timeout: 3000
};
$('#composeForm').submit(function() {
// inside event callbacks 'this' is the DOM element so we first
// wrap it in a jQuery object and then invoke ajaxSubmit
$(this).find(':disabled').removeAttr('disabled');
$(this).ajaxSubmit(options);
// !!! Important !!!
// always return false to prevent standard browser submit and page navigation
return false;
});
The problem is that the form doesn't appear to be submitting, or atleast the success function is not being called. If I remove the return false, then the submission works, but the page navigates away. Is there a problem in my code that could be causing this?
Cheers, Gazler.
EDIT| Seems to be working on my localhost. Could it be something to do with the domain being an add-on domain?
Here try this :
$(document).ready(function(){
$("#composeForm").submit(function(){
var str = $(this).serialize();
var formAction = $(this).attr("action");
$(this).find(':disabled').attr('disabled','');
$.ajax({
type: "POST",
url: formAction,
data: str,
beforeSubmit: showRequest,
success: showResponse
});
return false;
});
});