如何通过Javascript和Prototype不引人注意地禁用提交按钮?

时间:2009-02-23 01:02:34

标签: javascript prototypejs

所以我找到了this推荐,但我似乎无法弄清楚如何。

这是我最初开始使用的代码:

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

无论如何,我非常接近,但我似乎无法继续下去。

感谢您提供任何帮助!

更新:抱歉,我想我并不完全清楚。当有人点击提交按钮时,我想禁用所有提交按钮。但我需要发送提交按钮的值,以便服务器知道我点击了哪个按钮,因此插入调用。 (注意:插入确实not创建一个你调用它的元素的子元素。)然后在禁用提交按钮后我需要调用提交按钮提交调用的包含形式,因为IE不会在你提交后提交禁用按钮。这有意义吗?

4 个答案:

答案 0 :(得分:4)

您需要完全按照答案说明:

“不要在”onclick“中禁用该按钮,但保存它,并在表单的onsubmit中执行。”

因此在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或其他元素可见,在其位置显示为“已禁用”。

答案 1 :(得分:1)

我终于开始工作了。 Ryan帮忙所以我会投票给他:-)这是代码:

  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是这样的,当人们点击后退按钮时,页面将修复所有按钮。如果你想要禁用一个按钮并且不能在后面重新启用它,你只需给它一类禁用。

答案 2 :(得分:1)

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

答案 3 :(得分:0)

这是我想出的,它是从上面改编而来的。已修复,以便使用Prototype的停止属性检测已取消的事件传播。

其他更改包括使用更长的变量名称(我总是对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);
    });
});