时间戳

首页 > 解决方案 > 如何在ajax请求期间禁用按钮

javascript - 如何在ajax请求期间禁用按钮

问题描述

所以我有一个剃刀表单，我想在 ajax 请求期间禁用一个按钮。另外我希望能够只向控制器发送一个请求 - （禁用任何洪水尝试）

这是我的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>

我有这个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();
});

这工作得很好，但是当我取消注释 ajax 部分时，我看不到切换按钮禁用/启用的转换。我放了异步：假。

更新（仍然不工作）：

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

标签： javascriptc#jqueryajaxmodel-view-controller

解决方案

在 ajax 请求的某些回调中再次更改async: false为并启用按钮。async: true只要您继续async: false阻塞主线程，GUI 元素的更改将在函数返回之前生效。从 false 到 true 的异步是对 @adaptable.services 代码的唯一更改。

推荐阅读