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

当用户提交HTML表单时，我想在服务器正在处理它时禁用表单。我不希望用户输入任何其他文本，也不希望他们快速点击提交按钮发送多个请求。我试图与原型JS这样做：如何在用户使用Prototype提交时禁用表单？

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

的形式正确地被禁用，但在服务器端，我error_log出$_POST，发现它完全是空的。此问题仅在提交时禁用表单时发生。

来源

2012-03-13 JoJo

我不是'prototype'的家伙，但你就不能回' FALSE'？ – gdoron 2012-03-13 23:12:56

如果禁用的形式，我认为它不会提交/发表您的领域，因为它会被打乱，我在这种情况下做的是禁用提交按钮，而不是整个表单。

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

UPDATE：

但禁用提交按钮是不够的。人们可以在文本输入框中输入回车键来提交表单。使用提交按钮是不是唯一的方式提交表单

然后你就可以做一个组合，这个答案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; 
     } 
    } 
);

来源

2012-03-13 23:44:21

但禁用提交按钮是不够的。人们可以通过文本输入按Enter键提交表单。使用提交按钮不是提交表单的唯一方法。 – JoJo 2012-03-13 23:47:16

只是摆脱'[type ='submit']'，这将禁用所有字段 – Ascherer 2012-03-13 23:51:22

呃，阅读你的其他评论。只是在keydown上抛出一个事件，以防止输入 – Ascherer 2012-03-14 01:12:46

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

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

var already_submitted = false; 

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

来源

2012-03-13 23:15:58 augustknight

但是，如何防止人们在服务器处理表单时输入内容？该文档中提到“请记住，禁用的元素会被序列化方法忽略！您无法序列化禁用的表单。”这种解释了为什么没有POST变量发送到服务器。 – JoJo 2012-03-13 23:34:36

创建用户点击的方式全页面元素：

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

来源

2012-03-14 11:28:27 clockworkgeek

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

回答

相关问题