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

【问题标题】：How to disable a form while the user is submitting it using Prototype?如何在用户使用 Prototype 提交表单时禁用表单？
【发布时间】：2012-03-30 10:04:20
【问题描述】：

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

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

表单正确地被禁用，但在服务器端，我 error_log out $_POST 发现它完全是空的。只有在提交时禁用表单时才会出现此问题。

【问题讨论】：

我不是prototype，但你不能只是return false吗？

标签： php javascript prototypejs

【解决方案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;
        }
    }
);

【讨论】：

但是禁用提交按钮是不够的。人们可以在文本输入上按回车键来提交表单。使用提交按钮并不是提交表单的唯一方法。
去掉[type='submit']，这将禁用所有字段
er，请阅读您的其他评论。只需在 keydown 上抛出一个事件以防止对输入进行按键操作
对于Form::disable 本来应该做的事情，工作量非常大。
@JoJo 如果您禁用表单，则不会将任何帖子字段发布到脚本。

【解决方案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;
        }
    }
);

【讨论】：

但是如何防止人们在服务器处理表单时输入内容呢？文档说“请记住，序列化方法会跳过禁用的元素！您不能序列化禁用的表单。”这种解释为什么没有 POST 变量被发送到服务器。

【解决方案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();

【讨论】：