Problem with form validator
Example - <a href="http://www.marjosilver.co.uk/new-design/form-test/
css-tricks/">Link</a>
I am trying to impliment a form I saw on css-tricks (<a href="http://
css-tricks.com/video-screencasts/62-advanced-form-styling-
functionality/">link</a>).
I have noticed though that it can take a few seconds to send and
subsequently show a success message, and this could mean that people
click submit too many time while they are waiting. I thought a good
way around this 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 <a href="http://
www.marjosilver.co.uk/new-design/form-test/css-tricks/">here</a> Can
anyone help???
<code>$(function(){
$('#change-form')
.jqTransform()
.validate({
submitHandler: function(form) {
$(form).ajaxSubmit({
success: function() {
$('#change-form').hide();
$('#loading').hide();
$('#page-wrap').append("<p class='thanks'>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();
}
});
});</code>