Forums

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???


$(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.</p>\")
                }
           });
         }
        }); 
        
	$(\".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

treehouse : what would you like to learn today?

Forums

Problem adding jquery to screen cast code