Как я могу ненавязчиво отключить кнопки отправки с Javascript и Prototype?

Question

Итак, я нашел эту рекомендацию, но я не могу понять, как это сделать.

Это код, с которого я изначально начал:

   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);
     });
  });

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

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

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

Answer 1

Вы должны сделать именно то, что говорит ответ:

"Не отключайте кнопку в« onclick », а сохраняйте ее и делайте это при отправке формы.»

Так что в 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 2

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);
            });
         });
      });       
   });

Answer 3

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

  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 4

Вот то, что я придумал, которое адаптировано сверху. Исправлено так, что он обнаруживает отмененное распространение события с помощью атрибута Stop прототипа.

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