Adding loading gif with .ajax submit
Currently, with this set up the ajax loading gif is made visible when the user clicks into the first input field. I need this to happen only when submit button is clicked. Any way to make this function more smoothly? Also, what functionality does the debug truly have?
<script type="text/javascript">
$(document).click(function() {
$.validator.methods.equal = function(value, element, param) {
return value == param;
};
$("#processing").show();
var validator = $("#Cancel").bind("invalid-form.validate", function() {
$("#summaryCS").html("Your form contains " + validator.numberOfInvalids() + " error(s), please fix.");
}).validate({
debug: true,
errorElement: "em",
errorContainer: $("#summaryCS"),
errorPlacement: function(error, element) {
error.appendTo( element.parent("li"));
},
success: function(label) {
label.text("ok!").addClass("success");
},
submitHandler: function(form) {
var dataString = $(form).serialize();
$.ajax({
url: form.action,
type: "post",
data: dataString,
dataType: "HTML",
success: function(data) {
var answer = $(data).find("td:eq(4)").text();
if (answer==="TRUE") {
$("#Cancel").remove();
$("#cancelSuccess").fadeIn("slow");
} else {
$("#Cancel").remove();
$("#cancelError").fadeIn("slow");
}
}
});
return false;
},
rules: {
AccountUserID: {
required: true,
minlength: 5
},
EmailAddress: {
required: true,
email: true
},
Reason: {
required:true
}
},
messages: {
AccountUserID: {
required: "Please Enter Your User ID",
minlength: "Your User ID Must be at Least 5 Characters"
},
EmailAddress: {
required: "Please enter your email address",
email: "Please enter a valid email address"
},
Reason: {
required: "Please select a reason for cancelling"
}
}
});
});
</script>