Как я могу ненавязчиво отключить кнопки отправки с помощью 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); 
    }); 
    }); 

Во всяком случае, я довольно близко, но я не могу показаться, чтобы получить дальше.

Спасибо за любую помощь вообще!

Обновление: Извините, я думаю, я был не совсем ясен. Я хочу отключить все кнопки отправки, когда кто-то нажимает кнопку отправки. Но I do необходимо отправить по значению кнопки отправки, чтобы сервер знал, на какую кнопку я нажал, следовательно, вызов вставки. (Примечание: insert делает not создайте дочерний элемент, на который вы его назовете.) И затем после отключения кнопок отправки мне нужно вызвать содержащую форму кнопки отправки submit submit, поскольку IE не будет отправляться после отключения кнопки. Имеет ли это смысл?

Answer 1

Я, наконец, получил его на работу. Райан помог, так что я буду upvote его :-) Вот код:

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

Вот что я придумал, который адаптирован сверху. Исправлено так, что оно обнаруживает отмененное распространение события с использованием атрибута Stop 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); 
      }); 
     }); 
     });  
    });