所以我找到了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不会在你提交后提交禁用按钮。这有意义吗?
答案 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 += '…';
});
}
}
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);
});
});