Grow your CSS skills. Land your dream job.

Problem adding jquery to screen cast code

  • # July 13, 2009 at 6:01 pm

    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

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".