如何在用戶使用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提交時禁用表單？

回答

相關問題