'how to disable button during ajax request

so I have a razor form and I want to disable a button during ajax request. Also I want to be able to send only one request to controller - (disable any flood attempt)

This is my html:

           <div class="row">
            <div class="col-md-8 col-md-offset-2">
                @using (Html.BeginForm(null, null, FormMethod.Post, new { id = "contactForm" }))
                {
                 <div class="clearfix">
                    <div class="cf-left-col">
                        <div class="form-group required">
                            @Html.TextBoxFor(m => m.CheckInCheckOutDate, new { @class = "form-control input-md round", @required = "required", @autocomplete = "off", @id = "input-id", @placeholder = Resources.Resources.CheckInCheckOutPlaceholderKey })
                            <div>
                                @Html.ValidationMessageFor(m => m.CheckInCheckOutDate, null, new { @class = "text-danger" })
                            </div>
                        </div>
                        <div class="form-group required">
                            @Html.TextBoxFor(m => m.Name, new { @class = "form-control input-md round", @required = "required", @placeholder = "Name" })
                            <div>
                                @Html.ValidationMessageFor(m => m.Name, null, new { @class = "text-danger" })
                            </div>
                        </div>
                        <div class="form-group required">
                            @Html.TextBoxFor(m => m.MobilePhone, new { @class = "form-control input-md round mobile", @required = "required", @placeholder = "Mobile phone" })
                            <div>
                                @Html.ValidationMessageFor(m => m.MobilePhone, null, new { @class = "text-danger" })
                            </div>
                        </div>
                        <div class="form-group required">
                            @Html.TextBoxFor(m => m.EMail, new { @class = "form-control input-md round", @required = "required", @placeholder = "E-Mail" })
                            <div>
                                @Html.ValidationMessageFor(m => m.EMail, null, new { @class = "text-danger" })
                            </div>
                        </div>
                        <div class="form-group required">
                            @Html.TextBoxFor(m => m.AdultsNumber, new { @class = "form-control input-md round person", @required = "required", @placeholder = "Guests" })
                            <div>
                                @Html.ValidationMessageFor(m => m.AdultsNumber, null, new { @class = "text-danger" })
                            </div>
                        </div>
                        <div class="form-group required">
                            @Html.TextBoxFor(m => m.ChildrenNumber, new { @class = "form-control input-md round person", @placeholder = "Children" })
                        </div>
                    </div>
                    <div class="cf-right-col">
                        <div class="form-group required">
                            @Html.TextAreaFor(m => m.MessageBody, new { @class = "form-control input-md round", @rows = 10, @placeholder = "Message" })
                            <div>
                                @Html.ValidationMessageFor(m => m.MessageBody, null, new { @class = "text-danger" })
                            </div>
                        </div>
                        @*localhost*@
                        @*<div class="g-recaptcha" data-sitekey="6LdKaUAUAAAAAMi2MkpRBxJYnmqWJmnJmF22RsRF1"></div>*@
                    </div>
                </div>
            @Html.HiddenFor(m => m.MobilePrefixCountry)
            @Html.HiddenFor(m => m.ApartmentName)
            @Html.HiddenFor(m => m.NumberOfNights)
            <br />
            <div class="align-left pt-10">
                <div class="form-group">
                    <input id="submitBtn" class="btn btn-default" type="submit" value="Send Message" />
                </div>
            </div>
            <div id="successAlert" class="alert alert-success collapse">
                <a href="#" class="close" data-dismiss="alert">&times;</a>
                <strong>Success!</strong> You have successfully send email. Our staff will respond in shortest amount of time.
            </div>
            <div id="errorAlert" class="alert alert-danger collapse">
                <a href="#" class="close" data-dismiss="alert">&times;</a>
                <strong>Sending failed!</strong> Please fill all neccessery fields and try again.
            </div>
        }
            </div>
        </div>

I have this js:

    $("#contactForm").submit(function (e) {
    var form = $(this);
    $('#submitBtn').attr("disabled", true);
    $("#submitBtn").attr("value", 'Sending...');

    //$.ajax({
    //    type: "POST",
    //    async:false,
    //    url: "/Home/SendEmail",
    //    data: form.serialize(), // serializes the form's elements.
    //    success: function (data) {
    //        if (data == "True") {
    //            $('#successAlert').show('fade')
    //                .delay(9000)
    //                .fadeOut(function () {
    //                    $(this).remove();
    //                });
    //        }
    //        else if (data == "False") {

    //            $('#errorAlert').show('fade')
    //                .delay(6000)
    //                .fadeOut(function () {
    //                    $(this).remove();
    //                });
    //        }
    //    }
    //});
    setTimeout(function () {
        $('#submitBtn').attr("disabled", false);
        $("#submitBtn").attr("value", 'Send Message');
    }, 3000);
    e.preventDefault();
});

This works just fine, but when I uncomment ajax section, I am not able to see transition of toggling button disable/enable. I've put async:false.

UPDATED (still not working):

$("#contactForm").submit(function (e) {
    var form = $(this);
    $('#submitBtn').attr("disabled", true);
    $("#submitBtn").attr("value", 'Sending...');

    $.ajax({
        type: "POST",
        async: false,
        url: "/Home/SendEmail",
        data: form.serialize(), // serializes the form's elements.
        success: function (data) {
            if (data == "True") {
                $('#successAlert').show('fade')
                    .delay(9000)
                    .fadeOut(function () {
                        $(this).remove();
                    });
            }
            else if (data == "False") {
                $('#errorAlert').show('fade')
                    .delay(6000)
                    .fadeOut(function () {
                        $(this).remove();
                    });
            }
            $('#submitBtn').attr("disabled", false);
            $("#submitBtn").attr("value", 'Send Message');
        },
        error: function () {
            $('#submitBtn').attr("disabled", false);
            $("#submitBtn").attr("value", 'Send Message');
        }
    });
    e.preventDefault();
});


Solution 1:[1]

Change async: false to async: true and enable button again in some callback of ajax request. As long as you keep async: false you are blocking main thread and changes for GUI elements will not take effect till function returns. async from false to true is the only change to @adaptable.services' code.

Solution 2:[2]

Place your button enable code inside the ajax success. This will enable the disabled button after ajax completion.

Solution 3:[3]

first make your <input type="submit"> to <button type="submit">Send Message</button> and then try this..

<script>
$("#contactForm").submit(function (e) {
    e.preventDefault();
    var form = $(this);
    $('#submitBtn').attr("disabled", true);
    $("#submitBtn").html('Sending...');

    $.ajax({
        type: "POST",
        async:false,
        url: "/Home/SendEmail",
        data: form.serialize(), // serializes the form's elements.
        success: function (data) {
            if (data == "True") {
                $('#submitBtn').prop("disabled", false);
                $('#submitBtn').html("Send Message");
                $('#successAlert').show('fade')
                    .delay(9000)
                    .fadeOut(function () {
                        $(this).remove();
                });
            }
            else if (data == "False") {
                $('#submitBtn').prop("disabled", false);
                $('#submitBtn').html("Send Message");
                $('#errorAlert').show('fade')
                    .delay(6000)
                    .fadeOut(function () {
                    $(this).remove();
                });
            }
        },
    error: function () {
        $('#submitBtn').prop("disabled", false);
        $('#submitBtn').html("Send Message");
    }
    });
});
</script>

Solution 4:[4]

$('#button').attr("disabled", true);
$.ajax({
            url: url,
            data: data,
            type: 'post',
            dataType: 'json',
            cache: false,
            async: true,
            complete: function(response){
                $('#button').attr("disabled", false);
            },
        });

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 tilakmukul
Solution 2
Solution 3 adaptable.services
Solution 4 Guru