相关疑难解决方法(0)

防止在jQuery中双重提交表单

我有一个表单,需要一段时间服务器来处理.我需要确保用户等待并且不再尝试通过再次单击该按钮重新提交表单.我尝试使用以下jQuery代码:

<script type="text/javascript">
$(document).ready(function() {
    $("form#my_form").submit(function() {
        $('input').attr('disabled', 'disabled');
        $('a').attr('disabled', 'disabled');
        return true;
    });
});
</script>
Run Code Online (Sandbox Code Playgroud)

当我在Firefox中尝试此操作时,所有内容都被禁用,但表单未提交任何它应包含的POST数据.我不能使用jQuery提交表单,因为我需要使用表单提交按钮,因为有多个提交按钮,我确定哪个用于POST中包含哪个值.我需要像往常一样提交表单,我需要在发生后立即禁用所有内容.

谢谢!

javascript forms jquery http-post double-submit-prevention

164
推荐指数
5
解决办法
18万
查看次数

防止双重表单提交

我正在尝试调整一堆现有的网络应用程序,以防止用户意外地弹出提交按钮并提交表单两次.我认为jquery是最好的方法,尽管我的页面使用非常少的jquery.

我在这里发现了许多类似的问题,答案非常有用,但仍然没有提供完整而简单的解决方案.我遇到的第一个解决方案是:

$(document).ready(function(){
    $('form').submit(function(){
         $("input[type=submit]").prop("disabled", true);
    });
});
Run Code Online (Sandbox Code Playgroud)

它工作得很好,在提交表单后灰显了提交按钮.问题是提交按钮本身的值不会随表单一起提交,我猜是因为它被禁用了.通常这不是问题,但对于某些应用程序来说,这是因为它们依赖于提交按钮的值来进行正确的操作.我想要一些更通用的东西,这些东西适用于那些页面而不必重新设计它们.

然后我尝试了另一个例子:

$(document).ready(function(){
  $('form').submit(function(){
    $(this).submit(function() {
      return false;
    });
    return true;
  });
});
Run Code Online (Sandbox Code Playgroud)

这适用于在仍然传输提交按钮的值的同时禁用多个提交,但它不会使提交按钮变灰,因此没有视觉指示提交已发生.如果我找不到更好的解决方案,我可能会继续使用,但我希望两者都传输按钮的值,并使按钮变灰.

我终于尝试了这个:

$(document).ready(function(){
  $('form').submit(function(){
    this.submit();
    $("input[type=submit]").prop("disabled", true);
    return false;
  });
});
Run Code Online (Sandbox Code Playgroud)

但是,它似乎就像第一个示例一样,提交按钮值不随表单一起传输,尽管this.submit()显然应该在禁用之前发生.

我也尝试过隐藏按钮,但这会导致页面重新排列,而不良用户会在鼠标弹跳时意外碰到完全不同的东西,而不是两次点击提交.

我可以用相同大小的东西替换按钮,或者尝试将提交值复制到带有名称的隐藏输入元素中,但这会变得怪诞.有没有一种简单的方法来满足这种简单的需求?

jquery

1
推荐指数
1
解决办法
1万
查看次数