How to disable button during ajax request

Stefan

New Member
#1
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:
Mã:
           <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:
Mã:
    $("#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):

Mã:
$("#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();
});
 

Admin

Administrator
Thành viên BQT
#2
Change async: false to async: true and do enabling button again in some callaback of ajax request. As far as you keep async: false you are blocking main thread and changes for GUI elements will not take effect till function returns. asunc from false to true is the only change to @adaptable.services's code.
 
Top