禁用时，“提交”按钮不提交表单

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。