使用Javascript和Prototype防止多次提交

我试图通过Prototype API使用Javascript防止HTML表单中的多次提交。以下是我用来解决此问题的代码片段：

function preventMultipleSubmits() {
    this.select('input[type="submit"]').invoke('disable');
    return true;
}

document.observe('dom:loaded', function() {
    var forms = $A(document.getElementsByTagName('form'));
    forms.each(function(form) {
        form.observe('submit', preventMultipleSubmits)
    });
});

该代码段的问题是提交表单不再调用服务器端。我知道IE浏览器不太支持CCS选择器，但问题也与Firefox有关，我想首先关注FF

环境和工具：

• Firefox13.0
• 原型1.6.1

这似乎只是将禁用属性添加到

submit

按钮。您仍然可以使用enter for one field表单进行提交

您可以尝试以下方法：

<script type="text/javascript">
function preventMultipleSubmits(event) {
    if (this.hasClassName('allow-one-time-submit')) {
        this.removeClassName('allow-one-time-submit');
        // don't stop the event
    } else {
        alert('You already submitted');
        event.stop();
    }
}

document.observe('dom:loaded', function() {
    var forms = $A(document.getElementsByTagName('form'));
    forms.each(function(form) {
        // add Class Name to each and every form on load
        form.addClassName('allow-one-time-submit');
        form.observe('submit', preventMultipleSubmits)
    });

});
</script>


<form action="http://www.example.com/path/to/action" class="allow-one-time-submit">
    <input type="text">
    <input type="submit" value="Submit">
</form>

功能防止多个子项（事件）{
if（this.hasClassName（'allow-one-time-submit'））{
此.removeClassName（'allow-one-time-submit'）；
//不要停止这项活动
}否则{
警报（“您已提交”）；
事件停止（）；
}
}
document.observe（'dom:loaded'，function（））{
var forms=$A（document.getElementsByTagName（'form'）；
表单。每个（函数（表单）{
//将类名添加到加载的每个窗体中
form.addClassName（'allow-one-time-submit'）；
形式。遵守（‘提交’、防止多个提交）
});
});

看起来很好（在Chrome和Firefox中）谢谢你的帖子。我不知道你提到的那个网站。我会试着依靠JSFIDLE找到线索。嗨，Artlung，谢谢你的提示。你的话是相关的，我会考虑的。但问题是我必须处理现有的代码，所以在我众多的表单中添加类名不是一个选项。啊，好吧，在加载时添加一个函数，将类名添加到每个表单中，这很容易。@1我继续添加代码，将类添加到每个表单中。

<script type="text/javascript">
function preventMultipleSubmits(event) {
    if (this.hasClassName('allow-one-time-submit')) {
        this.removeClassName('allow-one-time-submit');
        // don't stop the event
    } else {
        alert('You already submitted');
        event.stop();
    }
}

document.observe('dom:loaded', function() {
    var forms = $A(document.getElementsByTagName('form'));
    forms.each(function(form) {
        // add Class Name to each and every form on load
        form.addClassName('allow-one-time-submit');
        form.observe('submit', preventMultipleSubmits)
    });

});
</script>


<form action="http://www.example.com/path/to/action" class="allow-one-time-submit">
    <input type="text">
    <input type="submit" value="Submit">
</form>