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?
A:
Without reference in basic 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>
MrThys
2009-12-18 09:01:41
In case if the form has many fields, then it must be dynamic
RSK
2009-12-18 09:04:28
The question's tagged jQuery...
munch
2009-12-18 09:08:14
Since he said two, I made a script which handles two
MrThys
2009-12-18 09:12:17
Your script is not jQuery.
BenTheDesigner
2009-12-18 09:16:08
A:
$('#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();
}
});
Per Holmäng
2009-12-18 09:02:35
Of course, but since the poster tagged the question with jquery, I figured that was alright.
Per Holmäng
2009-12-18 09:08:06
Rather than $('#input1,#input2,...') you could use the form as a container, $('#formName > :input'), or just select all the textboxes, $(':input'), if they all are part of the form.
Lazarus
2009-12-18 09:11:49
Yeah, or add a class to all required fields and use $('input.required').
Per Holmäng
2009-12-18 09:14:37
A:
astander
2009-12-18 09:04:27
Cause it's more user friendly when you activate button when input field is not empty. Otherwise you do not give enough response to the user and he/she thinks, that form is still disabled.
nemisj
2009-12-18 09:06:16
The onblur event can use java script to check the required fields, and *enable/disable* the button as required.
astander
2009-12-18 09:07:41
I mean, response from form is only visible when you leave the input field. This means, that at the moment of typing user still "in panic" why his form button is disabled.
nemisj
2009-12-18 09:18:17
Onblur requires the user to tab/click out of the element before the function is fired. Could prove annoying for the end user in this scenario.
BenTheDesigner
2009-12-18 09:19:08
A:
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.
BenTheDesigner
2009-12-18 09:10:43
+1
A:
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.
nemisj
2009-12-18 09:20:59