阿賈克斯 - 防止雙擊提交

我如何防止雙擊用戶提交註冊我的形式，它是一個Ajax局部視圖按鈕？阿賈克斯 - 防止雙擊提交

我很遺憾地問，因爲這會已經要求。我現在無法找到明確的工作答案，我在哪裏搜索。禁用按鈕可防止提交。使用var javascript clickcount + alert + return_false不會重置。

環境：asp.net MVC3

查看： 表單顯示爲onload：@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" />

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

來源

2011-06-22 Valamas - AUS

嘗試用下面的腳本：

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

確保您爲了重新安裝submit事件執行它也是你的AJAX請求成功回調時的形式被替換爲DOM中的新內容，或第二次它可能不再有效。

來源

2011-06-22 05:58:18

太棒了，謝謝！ –

用於範圍界定提交。 – SwampyFox

除非您正在偵聽'（「form」）。on（「invalid-form.validate」）來捕獲無效的表單提交，否則對'.valid（）'的調用將導致偵聽器觸發兩次。 – KyleMit

UPDATE：提交不工作，因爲的onclick沒有返回true

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

這將禁用按鈕，按鈕上的第二次點擊將無法工作

來源

2011-06-22 04:29:14

@Arturo：表格現在沒有提交。 –

查看我的回答更新 –

@Arturo：表單由於某種奇怪的原因提交，返回的頁面只是視圖而不是周圍的佈局。我懷疑ajax電話正在被繞過。我有一個Thread.Sleep（5000），並且在等待回發時沒有看到ajax指示符。 –

阿賈克斯 - 防止雙擊提交

回答

相關問題