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

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

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

---

表单正确地被禁用，但在服务器端，我错误地\u注销$\u POST并发现它完全为空。仅当表单在提交时被禁用时才会出现此问题。

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

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

var already_submitted = false;

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

---

如果你禁用表单，我认为它不会提交/发布你的字段，因为它会被破坏，在这种情况下我所做的是禁用提交按钮，而不是整个表单

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

看看这个

更新：

---

但是禁用提交按钮是不够的。人们可以击中目标 在文本输入上输入键以提交表单。使用提交按钮 不是提交表格的唯一方式

然后你可以用这个答案组合起来

---

以用户单击的方式创建完整页面元素：

$('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

我不是原型，但是你不能直接返回false吗？但是你如何防止人们在服务器处理表单时输入东西呢？文档中说，请记住，序列化方法会跳过禁用的元素！无法序列化已禁用的表单。这解释了为什么不向服务器发送POST变量。但是禁用submit按钮是不够的。人们可以点击文本输入上的enter键来提交表单。使用“提交”按钮不是提交表单的唯一方法。只需去掉[type='submit']，它将禁用所有字段，然后阅读其他注释。只需在keydown上抛出一个事件，以防止在输入上出现keyprese，这对于Form:：disable首先应该做的工作来说是非常多的。@JoJo如果禁用表单，则不会将post字段发布到脚本。

$('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();
    }
);