禁用時，“提交”按鈕不提交表單

Question

想法是使用一個按鈕來更改文本並在提交時禁用自身：

$(document).ready(function() {
  $(".autobutton").click(function(event) {
    // Show a spinner
    var nv = $(this).html();
    var nv2 = '<span class="fa fa-circle-o-notch fa-spin" aria-hidden="true"></span> ' + nv;
    $(this).html(nv2);

    var form = $(this).parents('form:first');
    form.submit();
    $(this).prop('disabled', true);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="test.php">
  <button class="autobutton">Submit</button>
</form>

如果按鈕是按鈕類型提交，則除非我刪除禁用的屬性集，否則不會提交表單。 如果按鈕是type =“ button”，則什么也不會發生。

Answer 1

最好以$('form').submit(function(){...})形式監聽提交事件，而不是單擊按鈕，因為可以在最后一個輸入中使用'enter'提交表單無需點擊按鈕。 我現在不知道，但是在按鈕類型提交之前是錯誤的，使用此方法使用輸入類型=“ submit”更簡單。 只需更改CSS即可讓您的輸入看起來像您想要的。 如果在提交偵聽器中返回false，它將阻止它。

並且因為您已經在提交偵聽器中，所以該按鈕不會阻止提交。

否則，只需使用FormData和Ajax。