阿贾克斯 - prevent提交上双击 [英] ajax - Prevent double click on submit

问题描述

如何prevent从双击用户注册我的形式，它是一个Ajax局部视图上提交按钮？

我很遗憾地问，因为这将已经被问。我无法找到一个明确的答案的工作现在身在何处，我搜索。禁用按钮prevent提交。使用VAR的JavaScript点击次数+警报+ RETURN_FALSE不会重置。

环境：asp.net MVC3

查看：
表单显示为onload： @RenderPage（_ SignupForm.cshtml）

提交使用：

  @using（Ajax.BeginForm（指数，注册，空，
     新AjaxOptions
                {
                    UpdateTargetId =signupForm
                    InsertionMode = InsertionMode.Replace，
                    列举HTTPMethod =POST
                    LoadingElementId =进步
                }
     ））
 

提交控制：＆LT;输入类型=提交值=注册/＆GT;

SignupController：

 公众的ActionResult指数（）
{
    返回查看（）;
}[HttpPost]
公众的ActionResult指数（SignupModel formvalues​​）
{
    Thread.sleep代码（5000）;    串的错误=;
    如果（TryValidateModel（formvalues​​））
    {
        错误= SignupAPI.Signup（formvalues​​）; //包括自定义验证
    }    如果（ModelState.IsValid == ||假string.IsNullOrEmpty（错误）== FALSE）
    {
        ViewBag.Errors =错误;
        返回PartialView（_ SignupForm，formvalues​​）;
    }
    其他
        返回重定向（string.Concat（HTTP：//本地主机/欢迎））;
}
 

解决方案

与下面的脚本尝试：

  $（形式）。递交（函数（）{
    如果（$（本）.valid（））{
        $（'：提交'，这一点）.attr（'残疾'，'禁用'）;
    }
}）;
 

请确保您执行它也在你的AJAX请求成功回调，以便当窗体被替换DOM中的新内容来重新安装提交事件，或第二次它可能不再有效。

How can I prevent the user from double clicking submit button on my signup form which is an ajax partial view?

I regret to ask since this would have already been asked. I just can't find a clear working answer now matter where I search. Disabling the button prevent submit. Using a var javascript clickcount+alert+return_false does not reset.

Environment: asp.net mvc3

View: Form displays onload: @RenderPage("_SignupForm.cshtml")

Submission using:

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

Submit control: <input type="submit" value="Sign up" />

SignupController :

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

解决方案

Try with the following script:

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

Make sure you execute it also in the success callback of your AJAX request in order to reattach the submit event when the form is replaced with a new content in the DOM, or the second time it might no longer work.

这篇关于阿贾克斯 - prevent提交上双击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！