如何不顯眼地禁用Javascript和Prototype的提交按鈕？

Question

所以我找到this推薦，但我似乎無法弄清楚如何。

這是我最初開始的代碼：

function greySubmits(e) { 
     var value = e.srcElement.defaultValue; 
     // This doesn't work, but it needs to 
     $(e).insert('<input type="hidden" name="commit" value="' + value + '" />'); 

     // This causes IE to not submit at all 
     $$("input[type='submit']").each(function(v) {v.disabled = true;}) 
    } 

    // This works fine 
    Event.observe(window, 'load', function() { 
    $$("input[type='submit']").each(function(e) { 
     Event.observe(e, 'click', greySubmits); 
    }); 
    }); 

不管怎麼說，我很接近，但我似乎無法得到任何進一步。

感謝您的幫助！

更新：對不起，我想我並不完全清楚。我想在有人點擊提交按鈕時禁用所有提交按鈕。但我做需要發送提交按鈕的值，以便服務器知道我點擊哪個按鈕，因此插入調用。 （注意：插入not會創建你調用的元素的子元素。）然後在禁用提交按鈕後，我需要調用提交按鈕提交調用的包含形式，因爲在禁用按鈕後IE不會提交。那有意義嗎？

Answer 1

我終於搞定了。瑞安幫助，所以我會給予好評他:-)下面的代碼：

function replaceSubmit(e) { 
    var el = e.element(); 
    Element.insert(el, { 'before': '<input type="hidden" name="' + el.name + '" value="' + el.value +'" />'}); 
    } 

    function greySubmits(e) { 
    // Don't disable the submit if the submit was stopped with a return(false) 
    if (e.returnValue) { 
     $$("input[type='submit']").each(function(v) {v.disabled = true;}) 
    } 
    } 

    function fixButtons() { 
    $$("input[type='submit']").each(function(v) { 
     if (Element.hasClassName(v, 'disabled')) { 
      v.disabled = true; 
     } else { 
      v.disabled = false; 
     } 
     }); 
    } 

    Event.observe(window, 'load', function() { 
     fixButtons(); 
     $$("input[type='submit']").each(function(e) { 
      Event.observe(e, 'click', replaceSubmit); 
     }); 
     $$("form").each(function(e) { 
      Event.observe(e, 'submit', greySubmits); 
     }); 
    }); 

的fixButtons是如此，當人們點擊後退按鈕的頁面將解決所有的按鈕。如果你想禁用一個按鈕，並讓它不能在後臺重新啓用，那麼只需給它一個禁用類。

Answer 2

你需要做的正是回答說：

的onclick「不要在其禁用按鈕‘’，但保存它，做它在表單的onsubmit。」

所以在greySubmits（）保留設置隱藏值的行，但刪除禁用所有提交按鈕的行。

然後在您的在線添加另一個事件處理程序 - 到窗體，而不是提交按鈕 - 它禁用。

function reallyGreySubmits(e) { 
    // This causes IE to not submit at all 
    $$("input[type='submit']").each(function(v) {v.disabled = true;}) 
} 

Event.observe(window, 'load', function() { 
    $$("input[type='submit']").each(function(e) { 
     Event.observe(e, 'click', greySubmits); 
    }); 
    $$("form").each(function(e) { 
     Event.observe(e, 'submit', reallyGreySubmits); 
    }); 
    }); 

我使用的另一個選項是不禁用提交，但交換兩個元素之間的可見性。點擊後，將提交內容標記爲隱藏，然後在其位置上顯示一個div或其他顯示爲「禁用」的元素。

Answer 3

這是我想出來的，這是從上面改編的。修復，以便它使用Prototype的停止屬性檢測取消的事件傳播。

其他更改包括使用較長的變量名稱（我總是對e是事件還是元素感到困惑）以及在取消表單提交時刪除替換輸入的函數。在我的實現中，按下瀏覽器時不會顯示頁面，因爲它是在用戶離開頁面時顯示的，而是似乎被重新提交（我正在使用Rails），所以我也刪除了該部分。

我在應用程序中使用按鈕而不是輸入，因此零件也發生了變化。

function replaceSubmit(event) { 
    var element = event.element(); 
    Element.insert(element, { 'before': '<input type="hidden" name="' + element.name + '" value="' + element.value +'" class="button_replacement">'}); 
} 

function removeReplacementSubmits() { 
    $$('input.button_replacement').each(function(button) { 
     button.remove(); 
    }); 
} 

function greySubmits(event) { 
    // Don't disable the submit if the submit was stopped with a return(false) 
    if (event.stopped === true) { 
     removeReplacementSubmits(); 
    } else { 
     $$('button[type="submit"]').each(function(button) { 
      button.disabled = true; 
      button.innerHTML += '&#133;'; 
     }); 
    } 
} 

Event.observe(window, 'load', function() { 
    $$("button[type='submit']").each(function(element) { 
     Event.observe(element, 'click', replaceSubmit); 
    }); 
    $$("form").each(function(element) { 
     Event.observe(element, 'submit', greySubmits); 
    }); 
}); 

Answer 4

document.observe("dom:loaded", function(){ 
    $$('form').find(function(thisForm) { 
     Event.observe(thisForm, 'submit', function(event) { 
     $$('input[type="submit"]').find(function(input) { 
      input.value = 'Please wait ...'; 
      input.setAttribute('disabled',true); 
      }); 
     }); 
     });  
    });