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) {
              


        

Answer 1

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="' + 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);
        });
    });

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.

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

Here's what I came up with, which is adapted from above. Fixed so that it detects a cancelled event propagation using Prototype's stopped attribute.

Other changes include using longer variable names (I always get confused about whether e is event or element), and a function that removed the replacement inputs if the form submission is cancelled. In my implementation pressing back on the browser doesn't show the page as it was when the user left it, instead it seems to be refetched (I'm using Rails), so I've removed that part too.

I'm using buttons rather than inputs in my application so that part has changed also.

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

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 is 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.