How can I unobtrusively disable submit buttons with Javascript and Prototype?

Question

So I found this recommendation, but I can't quite seem to figure out how.

This is the code I originally started with:

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

Anyway, I am pretty close, but I can't seem to get any further.

Thanks for any help at all!

Update: Sorry, I guess I wasn't entirely clear. I'd like to disable all of the submit buttons when someone clicks a submit button. But I do need to send along the value of the submit button so the server knows which button I clicked, hence the insert call. (Note: insert does not create a child of the element you call it on.) And then after disabling the submit buttons I need to call the containing form of the submit buttons submit call, as IE will not submit after you disable the button. Does that make sense?

Answer 1

You need to do exactly what the answer says :

"Do not disable the button in its "onclick", but save it, and do it in form's onsubmit."

So in greySubmits() keep the line that sets the hidden value, but remove the line that disables all the submit buttons.

Then add another event handler in your online - to the form, not the submit buttons - that does the disabling.

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

Another option, which I've used it to not disable the submits but to swap visibility between two elements. On click, mark the submits hidden, and then make visible a div or some other element that displays as "disabled" in their place.

Answer 2

I finally got it to work. Ryan helped so I'll upvote him :-) Here's the code:

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

  function greySubmits(e) {
    $$("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);
        });
    });

The fixButtons is so that when people click the back button the page will fix all the buttons. And if you want to disable a button and have it not re-enable on a back you just give it a class of disabled.