澄清暂时禁用提交按钮几秒钟，然后重新启用它？答案

【问题标题】：Clarification on temporarily disabling a submit button for a number seconds, then re-enable it?澄清暂时禁用提交按钮几秒钟，然后重新启用它？
【发布时间】：2023-03-04 01:03:01
【问题描述】：

这类似于另一个被问到但表单不会提交的问题。

基本上我在这里尝试实现的是，一旦用户点击“提交”btn，btn 将被禁用，直到页面被重定向，以避免用户多次点击提交 btn。

用户被重定向到的页面不会显示表单中的信息。在我介绍禁用和启用功能之前，它确实可以正常工作。

提供的代码确实禁用了 btn，甚至将文本更改为“提交”，但不会重定向到摘要页面，即使当我通过选项卡导航到摘要页面时，信息也不存在。非常感谢任何帮助...

表单代码............

  <div class="portlet-body form">
        <!-- BEGIN FORM-->
        @using (Html.BeginForm("RequestAppointment", "Appointment", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", id= "apptReqForm" }))
        {


            @Html.AntiForgeryToken()
            @Html.ValidationSummary(false, string.Empty, new { @class = "alert alert-error" })

            <div class="control-group">
                <label class="control-label">Healthcare Professional</label>
                <div class="controls">         
                    @Html.DropDownListFor(m => m.RequestedUserID, Model.Hcps, string.Empty)

                </div>

            </div>
            <div class="control-group">
                <label class="control-label">@Html.LabelFor(m => m.RequestedDateTime)</label>
                <div class="controls">
                    <div class="input-append" id="ui_date_picker_trigger">
                        @Html.EditorFor(m => m.RequestedDateTime)
                        <span class="add-on"><i class="icon-calendar"></i></span>
                    </div>
                </div>
            </div>

            <div class="control-group">
                <label class="control-label">@Html.LabelFor(m => m.SelectedTime, "Time")</label>
                <div class="controls">
                    <div id="timeSlotID" data-request-url="@Url.Action("LoadTimeslots")">
                        <select id="SelectedTime" name="SelectedTime"></select>
                    </div>
                </div>
            </div>

            <div class="control-group">
                <label class="control-label">@Html.LabelFor(m => m.AdditionalNotes)</label>
                <div class="controls">
                    @Html.TextAreaFor(m => m.AdditionalNotes, new { @class = "span6 m-wrap", rows = 3 })
                    <span class="help-block m-wrap">In the event the selected time you have chosen is not available, please state above if your booking time is flexible.</span>
                </div>
            </div>

            <div class="form-actions">
                <button type="submit" class= "btn blue" id="submit" onclick="disable();"><i class="icon-ok"></i>Submit</button>
                <button type="button" class="btn" onclick="location.href='RequestedAppointments'">Cancel</button>

            </div>
        }
    </div>

   <div class="form-actions">
                <button type="submit" class= "btn blue" id="submit" onclick="disable();"><i class="icon-ok"></i>Submit</button>

  <script>

function disable() {
    x = document.getElementById("submit");
    x.disabled = true;
    x.textContent = "Submitting...";
    document.getElementById("apptReqForm").submit();
    setTimeout(enable, 5000);
}

function enable() {
    x = document.getElementById("submit");
    x.disabled = false;
    x.textContent = " Submit";
}
      </script>

【问题讨论】：

标签： c# javascript jquery html asp.net-mvc-4

【解决方案1】：

您需要更改脚本以执行以下操作：

function disable() {
    x = document.getElementById("submit");
    x.form.submit();
    x.disabled = true;
    x.textContent = "Submitting...";
    setTimeout(enable, 5000);
}

function enable() {
    x = document.getElementById("submit");
    x.disabled = false;
    x.textContent = " Submit";
}

然而，禁用按钮这一事实可能会导致回发失败。

尝试查看此解决方案（它使用 jQuery） Disable button after clicking once

【讨论】：

你的意思是...... document.getElementById(").onsubmit();
否... onsubmit 是事件处理程序，submit 是方法。见这里：w3schools.com/jsref/met_form_submit.asp
恐怕在进行这些更改后我得到的只是 btn 禁用，btn 的 textContent 更改为“提交”，并且页面没有尝试重新定向...无论如何谢谢
这可能类似于 ASP.NET 的禁用按钮不触发回发的问题，但我很难测试。

【解决方案2】：

你会相信 3 条简单的线...

将按钮的 id 从“提交”更改为其他任何东西，因为这会混淆 Visual Studio

 id="submitreq"

然后在 submitHandler 函数中添加以下内容..

  var submitButton = document.getElementById("submitreq");
                submitButton.disabled = true;
                submitButton.textContent = "Submitting...";

                form.submit();

【讨论】：