Question

我试图阻止表单提交两次。我已经实现了之前发布的解决方案，但我无法使其正常工作。该按钮未被禁用，并且不显示我用于调试的“警报”。有什么想法吗？

我在

中有这段代码

$('#choice').submit(function()
{  
    $('#btnPlus').attr('disabled',true);
    alert('done');
    this.submit();
});

这就是形式：

<form id="choice" name='form' method="POST" action="/">
    <input type="hidden" name="projId" value="{{proj}}">
    <button type="submit" name="vote" id="btnPlus" value="p{{proj}}"></button>
</form>

Answer 1

您应首先添加e.preventDefault()以停止提交然后执行您想要的操作并在使用this.submit();后触发提交，因为现在写入您提交功能的代码不会执行，单击时将提交页面：

$('#choice').submit(function(e)
{  
    //Stop submit
    e.preventDefault(); 

    //Do what you want
    $('#btnPlus').attr('disabled',true);
    alert('done');

    //Submit
    this.submit();
});

希望这有帮助。

Answer 2

您应该使用prop代替attr功能：

<script>
  $('#choice').submit(function()
  {  
      $('#btnPlus').prop('disabled',true);
      alert('done');
      this.submit();
  }); 
</script>

Answer 3

等等我看到错误，我们都会觉得有点傻，

<form id="choice" name='form' method="POST" action="/">
  <input type="hidden" name="projId" value="{{proj}}">
  <input type="submit" name="vote" id="btnPlus" value="p{{proj}}">
</form>

据我所知，

<button>不是用于提交表单的有效HTML元素。如果您可以使用<button>作为提交，那么这对我来说就是新闻，因为我迄今学到的所有内容总是说在处理表单字段时使用<input type="submit">。

编辑：在我自己实现之前，没有意识到有人在上述评论中得出了相同的结论

Answer 4

在这里-jQuery和BOOTSTRAP 4

        $(document).ready(function () {
        //------------------------- begin ------------------------- 
        //add class "clicked" for the clicked button
        $('button').on('click', function(){
            $(this).addClass('clicked');
        });
        //desable clicked submit button after first click - prevent double click
        $('form').submit(function(e){  
            e.preventDefault(); //Stop submit
            $(document).find('.clicked').attr('disabled',true); //disable button
            $(document).find('.clicked').html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span><span class="sr-only">Loading...</span>'); //change text button for load spinner
            this.submit(); //Submit
        }); 
        //-------------------------- end -------------------------- 
        });

使用jQuery提交后禁用按钮不起作用

4 个答案: