如何使用 Javascript 和 Prototype 不显眼地禁用提交按钮? [英] How can I unobtrusively disable submit buttons with Javascript and Prototype?

问题描述

所以我找到了这个推荐，但是我似乎不太明白怎么做.

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.

非常感谢您的帮助！

更新:抱歉，我想我不是很清楚.当有人单击提交按钮时，我想禁用所有提交按钮.但是我确实需要发送提交按钮的值，以便服务器知道我单击了哪个按钮，因此调用了插入.(注意:insert 不创建元素你调用它.)然后在禁用提交按钮后，我需要调用提交按钮的包含表单提交调用，因为在禁用按钮后 IE 将不会提交.有意义吗?

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?

推荐答案

我终于让它工作了.Ryan 帮助了我，所以我会为他点赞 :-) 代码如下:

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

fixButtons 是为了当人们点击后退按钮时页面将修复所有按钮.如果你想禁用一个按钮并且不让它在背面重新启用，你只需给它一个禁用类.

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.

这篇关于如何使用 Javascript 和 Prototype 不显眼地禁用提交按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！