使用 Javascript 和 Prototype 防止多次提交

Question

我尝试通过 Prototype API 使用 Javascript 来防止 HTML 表单中的多次提交。这是我用来解决这个问题的sn-p：

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

sn-p 的问题在于提交表单不再调用服务器端。我知道IE浏览器不太支持CCS选择器，但是Firefox也有这个问题，我想先关注FF。

环境和工具：

• 火狐13.0
• 原型 1.6.1

Answer 1

this.select('input[type="submit"]').invoke('disable');

这似乎只是将 disabled 属性添加到 submit 按钮。您仍然可以通过 enter 提交单字段表单。

你可以试试这样的：

<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>