Problem adding jquery to screen cast code

[joehankin]

I recently saw your excellent screen cast (#62: Advanced Form Styling & Functionality), and am currently trying to impliment it on a site I am constructing.

I noticed that once the form is submitted correctly and validated, it can take a few seconds to send and subsequently append to show a success message. I thought a good way around this (and avoid people clicking submit too many times while waiting) would be to show a loading/sending gif image when the form is submitted which would disappear as soon as the success message is displayed.

However, I am having a problem when trying to only display this image if the form validates…

I gave the submit button a class of "submit", and the image is in the #loading div. In the code you can see it displays upon clicking the submit button, and hides with the ajaxSubmit success function. But how can I stop the image appearing when the form is not validated? Here is my code and a link to the example http://www.marjosilver.co.uk/new-design/form-test/css-tricks/ Can anyone help???

Code:

$(function(){

$(‘#change-form’)
.jqTransform()
.validate({
submitHandler: function(form) {
$(form).ajaxSubmit({
success: function() {
$(‘#change-form’).hide();
$(‘#loading’).hide();
$(‘#page-wrap’).append(“

Thanks! Your request has been sent.

“)
}
});
}
});

$(“.submit”).click(function(){
$(“#loading”).show();
});

$(“#addURLSArea”).hide();

$(‘.jqTransformCheckbox’).click(function(){
if ($(‘#multCheck:checked’).val() == ‘on’) {
$(“#addURLSArea”).slideDown();
} else {
$(“#addURLSArea”).slideUp();
}
});

$(“.jqTransformRadio”).click(function() {
if ($(“.jqTransformRadio”).eq(1).attr(“class”) == “jqTransformRadio jqTransformChecked”) {
$(“#curTextArea”).slideUp();
} else {
$(“#curTextArea”).slideDown();
}
});

});

BTW,
Great site Chris – always a source of good information…

Thank you
Joe

[Author]

Posts