jQuery 显示/隐藏提交按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1927096/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
show / hide submit button
提问by Henry
HOWTO?
如何？
show submit button only if one or two needed inputs are filled with a value but if you remove on of the needed values, the submit has to disappear.
仅当一两个需要的输入填充了值时才显示提交按钮，但如果您删除了所需的值，则提交必须消失。
should be done with keyup i think. any idea?
我认为应该用keyup来完成。任何的想法？
回答by BenTheDesigner
The function below should help you out:
下面的函数应该可以帮助你：
$(function(){
// Hide submit button if either field is empty
$('form input').keyup(function(){
if($('#input1').val() == "" || $('input2').val() == ""){
$('#submit').hide();
}
else {
$('#submit').show();
}
});
// Don't submit form if either field is empty
$('form').submit(function(){
if($('#1').val() == "" || $('#2').val() == ""){
return false;
}
});
});
By the way, you'll need to use CSS (display:none) to hide your submit button initially.
顺便说一下，您display:none最初需要使用 CSS ( ) 来隐藏您的提交按钮。
回答by nemisj
I propose to use one event handler at the form itself and to check all required fields. To keep it a little bit more abstractive, it would be nice if you can tag your inputs with some attribute. The example solution follows:
我建议在表单本身使用一个事件处理程序并检查所有必填字段。为了让它更抽象一点，如果你可以用一些属性标记你的输入会很好。示例解决方案如下：
$('#formNode').keyup(function(e){
var invalid = false;
$(this).children().each(function(i,child){
if(($(child).attr("isReq") == "true")
&& child.value.length == 0
){
invalid = true;
}
});
$("#submitButton")[invalid ? "hide" : "show"]();
});
<form id="formNode">
<input type="text" isReq="true"/>
<input type="text" isReq="true"/>
<input type="text" isReq="true"/>
<input type="submit" value="Submit" style="display:none" id="submitButton"/>
</form>
As you can see, every time you want to check node, you just should mark it with attribute isReq and the script will do its work for you.
如您所见，每次要检查节点时，只需使用属性 isReq 标记它，脚本就会为您完成工作。
回答by Thizzer
Without reference in basic javascript:
在基本 javascript 中没有参考：
<input type="text" id="input-1" onkeyup="submitChange();" />
<input type="text" id="input-2" onkeyup="submitChange();" />
<input type="submit" id="submit" style="display: none;" />
<script type="text/javascript">
inputOne = document.getElementById("input-1");
inputTwo = document.getElementById("input-2");
inputSubmit = document.getElementById("submit");
function submitChange()
{
if(inputOne.value == "" || inputTwo.value == "")
{
inputSubmit.style.display = "none";
}
else
{
inputSubmit.style.display = "block";
}
}
</script>
回答by Per H
$('#inputid').keyup(function() {
if ($(this).val().length > 0) {
$('#submitbutton').show();
} else {
$('#submitbutton').hide();
}
});
for multiple:
对于多个：
$('#inputid1,#inputid2, etc...').keyup(function() {
var hidden = false;
$('#inputid1,#inputid2, etc...').each(function() {
if ($(this).val().length == 0) {
hidden = true;
}
})
if (hidden) {
$('#submitbutton').hide();
} else {
$('#submitbutton').show();
}
});
});
回答by Adriaan Stander
Why not have a look at the onblur.
为什么不看看onblur.
The onblur event occurs when an object loses focus.
onblur 事件发生在对象失去焦点时。
