禁用提交按鈕后表單不提交

Question

我有一個HTML表單，有一個提交按鈕。 我希望單擊此按鈕時禁用此按鈕。 但我也希望表單能夠提交。

我沒有使用ajax請求來提交表單。 處理表單的PHP腳本需要很長時間。 因此，一些用戶只需在幾秒鍾后單擊它，表單就會被提交兩次，從而導致兩行在數據庫中具有相同的數據。

這是我到目前為止所嘗試的內容

<form method="POST" action="xyz.php">
    <input type="text" name="fields[]" />
    <input type="text" name="fields[]" />
    <input type="text" name="fields[]" />
    <input type="text" name="fields[]" />
    <input type="submit" onclick="$(this).attr('disabled', true);" value="Submit" />
</form>

提交按鈕上的onclick事件禁用按鈕，但它也不允許提交表單。 但我希望提交表單，並希望禁用該按鈕。

Answer 1

你可以試試下面的代碼onclick="this.disabled=true;this.form.submit();this.value='Submiting...';"

Answer 2

如果您正在使用jQuery，那么這是一個完全jQuery，不引人注意的處理版本，它可以工作。

如果您要為表單提供ID，您可以使其專門處理該表單 - 此示例將處理您頁面上的所有表單。

 $(function() { $("form").submit(function(event) { $(this).find('input[type="submit"]').prop("disabled", true); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form method="POST" action="xyz.php"> <input type="text" name="fields[]" /> <input type="text" name="fields[]" /> <input type="text" name="fields[]" /> <input type="text" name="fields[]" /> <input type="submit" value="Submit" /> </form> 

請注意，您應該使用.prop（）而不是.attr（）來設置“禁用”等屬性（請參閱http://api.jquery.com/attr/ ）。