Question

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="submitButton"
    name="submitButton"
    type="submit"
    value="Submit"
    class="submitButton" />
<span class="loading"></span>

CSS:

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

Answer 1

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()).