ajax - 防止双击提交答案

【问题标题】：ajax - Prevent double click on submitajax - 防止双击提交
【发布时间】：2011-06-22 04:18:20
【问题描述】：

如何防止用户在我的 ajax 部分视图的注册表单上双击提交按钮？

我很遗憾地问，因为这已经被问到了。无论我在哪里搜索，我现在都找不到明确的工作答案。禁用按钮阻止提交。使用 var javascript clickcount+alert+return_false 不会重置。

环境：asp.net mvc3

查看： 表单显示加载：@RenderPage("_SignupForm.cshtml")

提交使用：

@using (Ajax.BeginForm("Index", "Signup", null,
     new AjaxOptions
                {
                    UpdateTargetId = "signupForm", 
                    InsertionMode = InsertionMode.Replace, 
                    HttpMethod = "POST",
                    LoadingElementId="progress"
                }
     ))

提交控制：<input type="submit" value="Sign up" />

注册控制器：

public ActionResult Index()
{
    return View();
}

[HttpPost]
public ActionResult Index(SignupModel formvalues)
{
    Thread.Sleep(5000);

    string errors = "";
    if (TryValidateModel(formvalues))
    {
        errors = SignupAPI.Signup(formvalues); //includes custom validation
    }

    if (ModelState.IsValid == false || string.IsNullOrEmpty(errors) == false)
    {
        ViewBag.Errors = errors;
        return PartialView("_SignupForm", formvalues);
    }
    else
        return Redirect(string.Concat("http://localhost/welcome"));
}

【问题讨论】：

标签： asp.net-mvc-3 double-submit-prevention

【解决方案1】：

试试下面的脚本：

$('form').submit(function () {
    if ($(this).valid()) {
        $(':submit', this).attr('disabled', 'disabled');
    }
});

确保在 AJAX 请求的成功回调中也执行它，以便在表单被 DOM 中的新内容替换或第二次可能不再工作时重新附加 submit 事件。

【讨论】：

这很有效，除非您正在收听$("form").on("invalid-form.validate" 以捕获无效的表单提交，对.valid() 的调用将导致侦听器触发两次。
这很有效，除非您正在收听$("form").on("invalid-form.validate" 以捕获无效的表单提交，call to .valid() will cause the listener to fire twice。

【解决方案2】：

更新：提交失败，因为 onclick 没有返回 true

&lt;input type="submit" value="Sign Up" onclick="this.disabled = true; return true;"/&gt;

这将禁用该按钮，并且第二次单击该按钮将不起作用

【讨论】：

@Arturo：表单现在根本无法提交。
@Arturo：表单提交了，但是，出于某种奇怪的原因，返回的页面只是视图而不是周围的布局。我怀疑ajax调用被规避了。我有一个 Thread.Sleep(5000) 并且在等待回发时没有看到 ajax 指示器。
可以在浏览器中呈现表单元素后发布吗？
@Arturo <form action="/Signup" data-ajax="true" data-ajax-loading="#progress" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#signupForm" id="form0" method="post">。之前，我已将命令更改为form0.submit()
@Arturo：同样的结果。按钮禁用，表单不提交。