10

如何防止用户双击作为 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"));
}
4

2 回答 2

18

尝试使用以下脚本：

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

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

于 2011-06-22T05:58:18.763 回答
0

更新：提交不起作用，因为 onclick 没有返回 true

<input type="submit" value="Sign Up" onclick="this.disabled = true; return true;"/>

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

于 2011-06-22T04:29:14.530 回答