Question

我是javascript的新手，但我对此进行了广泛的搜索并尝试了几十种不同的选择。他们中的大多数都没有做任何事情，其他人则阻止表格提交！

我有以下表格：

<form name="buy" action="process_order.php" method="post">
    <input type="hidden" name="itemid" value="{$itemid}">
    <button type="submit" id="submit" name="submit" class="btn btn-sm btn-success">Buy</button>
</form>

我希望通过在提交后禁用submit按钮来阻止双重提交，或者只是让它消失，无论哪种效果最好。

我尝试了多种JS方法，我甚至不知道哪种方法最好，所以我不会在这里提供一种方法来避免混淆。

如果您能为我提供完整的javascript <script>摘要以及我最终需要的任何其他内容，我将非常感激。我不想在这里使用Ajax，但请告诉我这是否会有所帮助。

非常感谢！

Answer 1

你可以使用jQuery。

$('form[name="buy"]').on('submit', function() {
    $('#submit').prop('disabled', true);
});

这将在提交表单后立即禁用提交按钮。

由于@rolodex已指出提交表单将刷新页面，因此禁用的按钮将再次启用。如果不使用Ajax，我会这样做（正如@ rolodex的答案所做的那样）：

<form name="buy" action="process_order.php" method="post">
    <input type="hidden" name="itemid" value="{$itemid}">
    <button type="submit" id="submit" name="submit" class="btn btn-sm btn-success"<?php if(isset($_POST['itemid'])) echo ' disabled'; ?>>Buy</button>
</form>

因此，一旦有人提交了表单，该按钮就会被禁用。这并不能阻止有人在没有表单数据的情况下再次刷新页面，但是也没有使用Ajax。解决这个问题的唯一方法就是使用cookies。

Answer 2

为了防止在第一次提交之后第二次提交，就我而言，你必须使用AJAX，因为每次提交表单时，页面都会刷新，如果表单已经存在则不会有任何迹象提交与否。我的方法将使用jQuery，这是你如何做到的。

首先，从我们将用AJAX调用替换的action中删除属性method和<form>。就像这一样简单;

<form name="buy">...</form>

其次，包括必要的jQuery库;

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

然后是脚本;

<script>
    $(function(){
        $('form').on('submit', function(){
            var data = $(this).serializeArray()
            $.post('process_order.php', data, function(r,s){
                console.log(r)
            });
            // Updated answer (change submit button's ID to class instead);
            $(this).find('.submit').prop('disabled', true);
            return false;
        })
    })
</script>

就是这样。它与@ Styphon的答案完全相同，但我相信这更完整，我希望这会有所帮助。

干杯！

Answer 3

我使用它（需要jQuery）：

<script>
    var submiting = false;

    $(function() {
        $('form').submit(function() {
            if (!submiting) {
                submiting = true;
                $('button[type=submit]').prop('disabled', true); //cosmetic
            } else {
                return false;
            }
        });
    });
</script>

使用此代码，当提交表单时，布尔值将阻止任何进一步的提交（即用户在提交按钮上非常快速地点击）并且将禁用该按钮以防止进一步的点击。

但这里描述了一个更好的方法：

Prevent double submission of forms in jQuery

Answer 4

这是一个简洁的解决方案

  $('form').submit(function(){ //prevent multiple submit
            $(':submit', this).click(function() {
                console.log("submit prevented"); // Debug purpose.
                return false;
            });
        });

如果您提交表格4次，您会看到3 "submit prevented"输出。

$("#btn").trigger("click");
$("#btn").trigger("click");
$("#btn").trigger("click");
$("#btn").trigger("click");

jQuery / Bootstrap3：提交后禁用/隐藏按钮

4 个答案: