如何防止使用jQuery或Javascript进行双重提交？

Question

我不断在我的数据库中获得重复条目,因为用户不耐烦地多次单击提交按钮.

我用Google搜索并搜索了一些脚本,但似乎没有一个足够.

如何使用javascript或jQuery来防止这些重复条目的发生？

Thanx提前!

Answer 1

如何在提交时禁用按钮？我就是做这个的.它工作正常.

$('form').submit(function(){
    $('input[type=submit]', this).attr('disabled', 'disabled');
});

免责声明:
这仅适用于在用户浏览器上启用javascript的情况.如果提交的数据非常重要(如信用卡购买),那么请将我的解决方案视为第一道防线.但是,对于许多用例,禁用提交按钮将提供足够的预防.

我会首先实现这个仅限javascript的解决方案.然后跟踪仍在创建的重复记录数.如果它为零(或者足够低而不在乎),那么你已经完成了.如果它对您来说太高,则对现有记录执行后端数据库检查.

Answer 2

这应该做的伎俩:

$("form").submit(function() {
   $(":submit", this).attr("disabled", "disabled");
});

没有JQuery？

或者,您可以从db检查以检查记录是否已存在,如果已存在,请不要插入新记录.

Answer 3

我见过的一种技术是为每个打开的表单分配一个唯一的ID,并且每个表单只接受一个基于ID的提交.

这也意味着你可以检查人们根本没有提交的次数,你可以通过检查你的服务器创建的ID来检查提交是否真的来自你的表单.

我知道你要求一个javascript解决方案,但是如果我需要健壮性,我个人会这样做.

Answer 4

防止双重发布并不像禁用提交按钮那么简单.还有其他元素可以提交它:

• 按钮元素
• img元素
• JavaScript的
• 在某些文本字段上按"输入"

使用jQuery数据容器将是我的选择.这是一个例子:

$('#someForm').submit(function(){
    $this = $(this);

    /** prevent double posting */
    if ($this.data().isSubmitted) {
        return false;
    }

    /** do some processing */

    /** mark the form as processed, so we will not process it again */
    $this.data().isSubmitted = true;

    return true;
});