如何防止HTML表單在短時間內連續發送多次？

我使用這個簡單的形式來實現登錄：如何防止HTML表單在短時間內連續發送多次？

<form action="/handleLogin/" name="login" method="post"> 
    <div> 
     <label for="userid">Username</label> 
     <input type="text" id="userid" name="identifier" value="" pattern="\s*([^@\s][email protected][^@\s]+|\d+)\s*" data-parsley-required> 
    </div> 
    <div> 
     <label for="userpassword">Password</label> 
     <input type="password" id="userpassword" name="credential" data-parsley-required> 
    </div> 
    <button id="login-button" class="button" type="submit">Login</button> 
</form>

我們的QA團隊發現，有可能點擊登錄按鈕兩次或敲擊鍵盤上的回車鍵兩次在一行中的一個很短的時間。

這導致發送到服務器的多個請求導致問題。

因此，我試圖阻止這與下面的JavaScript代碼：

$('form[name="login"]').on('submit', function() { 
    $("#userid, #userpassword, #login-button").attr("disabled", true); 
});

不幸的是，現在的用戶名+密碼的值將不再被髮送到服務器。我想這是因爲他們被禁用，瀏覽器認爲：「好吧，如果這些字段被禁用，我不會發送電子郵件。」

我該如何解決這個問題？

我想過使用「返回false」來取消原始提交事件。並手動發送一份表格的副本，但這不是一個很好的解決方案，我想。

來源

2017-02-13 Timo

禁用只'＃登錄-button' –

爲什麼你試圖解決在客戶端服務器端的問題？ – madalinivascu

@Paweł如果用戶在登錄或pwd輸入字段中有他的光標，然後在鍵盤上返回兩次，該怎麼辦？ – Timo

試試這個：

$('form[name="login"]').on('submit', function() { 
    $("#login-button").attr("disabled", true); 
    $("#userid, #userpassword").attr("readonly", true); 
});

來源

2017-02-13 10:25:56

Ooohhh，這是一個好主意！我會試試看，謝謝！ – Timo

Jep，這個伎倆！非常感謝！ :-) – Timo

使用

$('button[type=submit], input[type=submit]').prop('disabled',true);

代替：

$("#userid, #userpassword, #login-button").attr("disabled", true);

它只會禁用按鈕。

來源

2017-02-13 10:27:13

如何防止HTML表單在短時間內連續發送多次？

回答

相關問題