prototypejs - How can I unobtrusively disable submit buttons with Javascript and Prototype? - Stack Overflow

admin管理员组

文章数量:1334953

So I found this remendation, 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="mit" 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?

So I found this remendation, 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="mit" 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?

• javascript
• prototypejs

Share Improve this question Follow edited May 23, 2017 at 12:01 CommunityBot 111 silver badge asked Feb 23, 2009 at 1:02 Frew SchmidtFrew Schmidt 9,5441717 gold badges6666 silver badges8888 bronze badges 1

• what exactly do you want to do? disabled inputs should not be submitted with the form. – tliff Commented Feb 23, 2009 at 1:08

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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.

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.

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

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

本文标签： prototypejsHow can I unobtrusively disable submit buttons with Javascript and PrototypeStack Overflow