代码之家 › 专栏 › 技术社区 › Stefan0309

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

model-view-controller ajax jquery c# javascript

-2

Stefan0309 · 技术社区 · 6 年前

此外,我想能够发送一个请求,只有控制器-(禁用任何洪水企图)

这是我的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();
});

已更新(仍不工作):

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

3 回复 | 直到 6 年前

tilakmukul 6 年前

改变 async: false 到 async: true 并在ajax请求的某个回调中再次启用按钮。只要你保持您正在阻塞主线程,在函数返回之前,GUI元素的更改不会生效。 async从false到true是@adaptive.services代码的唯一更改。

Linoy 6 年前

这将在ajax完成后启用disabled按钮。

adaptable.services 6 年前

先让你的 <input type="submit"> 到 <button type="submit">Send Message</button> 然后试试这个。。

<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>