The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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 Can anyone help???


    submitHandler: function(form) {
    success: function() {

    Thanks! Your request has been sent.




    if ($(‘#multCheck:checked’).val() == ‘on’) {
    } else {

    $(“.jqTransformRadio”).click(function() {
    if ($(“.jqTransformRadio”).eq(1).attr(“class”) == “jqTransformRadio jqTransformChecked”) {
    } else {


    Great site Chris – always a source of good information…

    Thank you

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed