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 elements
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;
});

Answer 5

这是我用来避免双击问题的一些jQuery。它只允许点击一下提交按钮。

$(document).ready(function() {
  $("#submit").one('click', function() {
  });
});

Answer 6

这是我在https://github.com/liberapay/liberapay.com/pull/875中提出的：

$('form').on('submit', function (e) {
    var $form = $(this);
    // Check that the form hasn't already been submitted
    if ($form.data('js-submit-disable')) {
        e.preventDefault();
        return false;
    }
    // Prevent submitting again
    $form.data('js-submit-disable', true);
    // Set a timer to disable inputs for visual feedback
    var $inputs = $form.find(':not(:disabled)');
    setTimeout(function () { $inputs.prop('disabled', true); }, 100);
    // Unlock if the user comes back to the page
    $(window).on('focus pageshow', function () {
        $form.data('js-submit-disable', false);
        $inputs.prop('disabled', false);
    });
});

Answer 7

所描述的方法here的问题在于，如果您使用的是javascript验证框架且验证失败，则无法在不刷新页面的情况下更正并重新提交表单。< / p>

要解决此问题，您需要插入验证框架的成功事件，然后将提交控件设置为禁用。使用Parsley，您可以使用以下代码插入表单验证事件：

$.listen('parsley:form:validated', function(e){
    if (e.validationResult) {
        /* Validation has passed, prevent double form submissions */
        $('button[type=submit]').attr('disabled', 'disabled');
  }
});

Answer 8

如果您正在使用客户端验证并希望在数据无效时允许其他提交尝试，则只有在表单内容未更改时才允许提交：

var submittedFormContent = null;
$('#myForm').submit(function (e) {
    var newFormContent = $(this).serialize();
    if (submittedFormContent === newFormContent)
        e.preventDefault(true);
    else 
        submittedFormContent = newFormContent;
});

Answer 9

我不确定您使用的语言/框架是什么，或者它是否只是直接的HTML。但是在我编写的Rails应用程序中，我在表单按钮async: false上传递了一个数据属性，这使得该按钮在事务处理过程中不会被多次点击。

这是ERB的样子。

disable_with

Answer 10

在 How to prevent form resubmission when page is refreshed (F5 / CTRL+R) 找到并解决了问题：

    <script>
        if ( window.history.replaceState ) {
            window.history.replaceState( null, null, window.location.href );
        }
    </script>

Answer 11

这就是我解决问题的方法。我通过两次添加 setTimeout 禁用了按钮一秒钟：

-第一次是让JS表单字段验证工作；
-第二次是启用按钮，以防万一您在后端进行任何验证，这可能会返回错误，因此用户将需要在编辑其表单后再次尝试提交表单数据。

$(document).ready(function(){
        $('button[type=submit]').on("click", function(){
            setTimeout(function () {
                $('button[type=submit]').prop('disabled', true);
                }, 0);
            setTimeout(function () {
                $('button[type=submit]').prop('disabled', false);
                }, 1000);
        });
});

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

11 个答案: