Question

当用户提交HTML表单时，我想在服务器处理它时禁用该表单。我不希望用户键入任何其他文本，也不希望他们快速点击提交按钮发送多个请求。我试过用Prototype JS做这个：

$('formId').observe(
    'submit',
    function(event) {
        Event.element(event).disable();
    }
);

表单已正确禁用，但在服务器端，我error_log输出$_POST并发现它完全为空。只有在提交时禁用表单时才会出现此问题。

Answer 1

如果您停用该表单，我认为它不会提交/发布您的字段，因为它会被删除，在这种情况下我做的是禁用提交按钮，而不是整个表单。

$('formId').observe(
    'submit',
    function(event) {
        $$("input[type='submit']").each(function(v) {v.disabled = true;})
    }
);

看看这个How can I unobtrusively disable submit buttons with Javascript and Prototype?

更新：

但禁用提交按钮是不够的。人们可以击中在文本输入上输入密钥以提交表单。使用提交按钮不是提交表单的唯一方法

然后你可以结合这个答案https://stackoverflow.com/a/9693667/1078487

var already_submitted = false;

$('formId').observe(
    'submit',
    function(e) {
        // disable input
        $$("input[type='submit']").each(function(v) {v.disabled = true;})
        if ( already_submitted ) {
            new Event(e).stop();
            return false;
        } else {
            already_submitted = true;
        }
    }
);

Answer 2

您应该将onsubmit事件绑定到输入按钮，而不是禁用表单。在此函数中，您将停止提交事件，如果表单已提交一次，则返回false。

我不太熟悉原型，但使用上面的语法，它会是这样的：

var already_submitted = false;

$('formId').observe(
    'submit',
    function(e) {
        if ( already_submitted ) {
            new Event(e).stop();
            return false;
        } else {
            already_submitted = true;
        }
    }
);

Answer 3

以用户点击的方式创建整页元素：

$('formId').observe(
    'submit',
    function() {
        // create DIV with an id for possible later use
        var blocker = new Element('div', {id: 'blocker'});
        // expand to fill parent element
        blocker.setStyle({
            position: 'absolute',
            left: 0,
            top: 0,
            width: '100%',
            height: '100%',
            zIndex: 1000 // overlay everything
        });
        // set whole body as parent
        document.body.insert(blocker);
        // prevent keyboard interaction too
        this.blur();
    }
);

现在提交表单的时间很短，没有人可以更改任何字段（运行脚本除外）。如果愿意，您甚至可以向DIV添加等待消息，否则对用户不可见。

如果您通过AJAX提交表单，我还添加了id，以便在AJAX完成后您可以$('blocker').remove();

如何在用户使用Prototype提交表单时禁用表单？

3 个答案: