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

时间:2018-01-21 09:54:38

标签: javascript jquery forms

我们的想法是使用一个按钮来更改文本并在提交时禁用它自己:

$(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”,则没有任何反应。

1 个答案:

答案 0 :(得分:0)

最好在表格$('form').submit(function(){...})上收听提交事件 而不是点击按钮,因为表格可以通过&#39;输入&#39;提交。在最后一个输入中没有单击按钮。 我现在不知道但是在按钮类型提交之前是错误的并且使用输入类型更简单=&#34;提交&#34;用这种方法。在更改css之后,让您的输入看起来像你想要的。 如果你在提交监听器中返回false,它将阻止它。

由于您已经在提交监听器中,因此禁用按钮不会阻止提交。

其他只使用FormData和ajax。