当前位置：文江博客话题详情

在提交时禁用带有 javascript 的表单以防止重复提交

发布于 2024-09-16 22:47:03 字数 212 浏览 6 评论 0原文

我想在提交表单后禁用该表单，以防止重复提交。我认为这是相当标准的用例，但我能找到的所有示例都存在缺陷。

我能找到的所有内容都是基于禁用提交按钮，但这并不能阻止用户在表单上按回车键时重新提交表单，这是一种非常常见的方法。

我正在考虑修改现有的脚本之一来解决这个问题，但在我重新发明轮子之前，有谁知道已经可以正确处理这个问题并且可以共享的脚本吗？我真的很惊讶那里似乎还没有任何东西。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

与酒说心事 2024-09-23 22:47:03

您可以创建一个布尔变量（或具有布尔成员变量的对象），并且仅在该变量为 false 时提交表单。类似于：

function init() {
    var submit = false;
    var f = document.getElementById("FormID");
    f.onsubmit = function() {
        if(submit) {
            return false;
        } else {
            submit = true;
            return true;
        }
    }
}

当然，您必须在页面加载后调用 init ，无论您选择哪种风格（window.onload = ...，window.addEventListener(...)、window.attachEvent(...) 等）。

You could create a boolean variable (or an object with a boolean member variable) and only submit the form when the variable is false. Something like:

function init() {
    var submit = false;
    var f = document.getElementById("FormID");
    f.onsubmit = function() {
        if(submit) {
            return false;
        } else {
            submit = true;
            return true;
        }
    }
}

Of course, you would have to call init following the page load, in whichever flavor you choose to do that (window.onload = ..., window.addEventListener(...), window.attachEvent(...), etc.).

回复收藏 0 原文

命比纸薄 2024-09-23 22:47:03

http://jsfiddle.net/c2N4v/

var sent = false;
$('#form').submit(function(e) {
    if (!sent) {
        sent = true;
        // do whatever
    }
    else e.preventDefault();
});

http://jsfiddle.net/c2N4v/

var sent = false;
$('#form').submit(function(e) {
    if (!sent) {
        sent = true;
        // do whatever
    }
    else e.preventDefault();
});

回复收藏 0 原文

岁月静好 2024-09-23 22:47:03

我尝试了很多解决方案，但没有一个对我有用。我使用了这个，它工作得非常好：

jQuery

<script>
$(document).ready(function(){
  $('#buttonSubmit').click(function() {
    if ($('#frm-confirm').attr('submitted')){
        event.preventDefault();
    } else {
        $('#frm-confirm').attr('submitted',true);
    }
  });
});
</script>

HTML/PHP

<form id="frm-confirm" action="" method="post">
    <input id="amount" name="amount" value="<?php echo round($_POST['amount'],2); ?>" type="hidden" />
    <input id="order_id" name="order_id" value="<?php echo htmlspecialchars($_POST['order_id']);?>" type="hidden" />
    <input type="submit" id="buttonSubmit" name="confirm" value="Confirm" />
</form>

i've tried a lot of solutions but none of them worked for me. I used this one and it is working really fine:

jQuery

<script>
$(document).ready(function(){
  $('#buttonSubmit').click(function() {
    if ($('#frm-confirm').attr('submitted')){
        event.preventDefault();
    } else {
        $('#frm-confirm').attr('submitted',true);
    }
  });
});
</script>

HTML/PHP

<form id="frm-confirm" action="" method="post">
    <input id="amount" name="amount" value="<?php echo round($_POST['amount'],2); ?>" type="hidden" />
    <input id="order_id" name="order_id" value="<?php echo htmlspecialchars($_POST['order_id']);?>" type="hidden" />
    <input type="submit" id="buttonSubmit" name="confirm" value="Confirm" />
</form>

回复收藏 0 原文

~没有更多了~