How do I disable a submit button and show a loading image while an jquery ajax call is running?

The following code is NOT working. The button is not disabled, the loading image does not display, and instead the whole page locks up during the AJAX call.

JavaScript:

$(function() {
    $("#submitButton").click(function() {
        // Disable the submit button
        $(this).attr("disabled", "disabled");

        // Show the loading image
        $(".loading").show();

        // Serialize the form values for AJAX submission
        var $formParamsString = $(this).closest("form").serialize();

        $.ajax({
            type: "POST",
            url: "myService.cfm",
            dataType: "JSON",
            data: $formParamsString,
            async: false,
            success: function(data) {
                alert("Form values saved!")
            },
            error: function() {
                alert("Form values not saved!")
            }
        });

        // Hide the loading image
        $(".loading").hide();

        // Re-enabled the submit button
        $(this).removeAttr("disabled");

        // Prevent form post
        return false;
    });
});

HTML:

<input
    id="submitBut开发者_如何学运维ton"
    name="submitButton"
    type="submit"
    value="Submit"
    class="submitButton" />
<span class="loading"></span>

CSS:

.loading {
    background: url("/images/loading.gif");
}

---

Browser is freezing and nothing happens because you're issuing synchronous request (async: false), see docs:

Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active

To achieve your goal, you need to:

1. make you request asynchronous (remove async: false),

2. move this code:

   // Hide the loading image
   $(".loading").hide();
   
   // Re-enabled the submit button
   $(this).removeAttr("disabled");
   

   to your success and error functions,

3. sumbit form manually in success function ($('#form').submit()).

---

So basically what you are doing is

1) disabling your button and showing the image

2) firing off an asynchronous event

3) immediately enabling your button once more and hiding the image

The ajax call that you are making will not hang the function that you are calling it from. The function is called on a separate thread and therefore the image is being disabled/enabled so quickly that you can't even tell. What you need to do is attach functions to the ajax events that jQuery exposes.

You can attach an event to the initial ajax call event that will disable the button and show the loading image, and then attach an event to the call complete part that will re-enable your button and get rid of the image.

The two options that you have to do this are

1) Have the button and image manipulating effects reside in the .success and .fail events that are attached to your single ajax call

2) Attach functions to the .ajaxStart and .ajaxComplete events that are exposed on the page. Doing this will make the same thing happen for all ajax calls on the page however. More info can be found here: http://api.jquery.com/category/ajax/

---

One problem is the AJAX call isn't finished when you hide the loading image and remove the disabled attribute, because by definition AJAX calls are (A)synchronous. You should do the hide and remove attribute in your callback functions.