Button disable unless both input fields have value
I have a form with two input fields and a submit button on my page, I would like to have the feature that the 'submit' button is disabled until there are values on both two input fields. That's the button will be clickable if and only 开发者_运维问答if there are values input in both fields.
How to implement this with js and jQuery?
Here is my page:
<html>
<body>
<form method=post>
<input type=text id='first_name'>
<input type=text id='second_name'>
<input type=submit value=Submit>
</form>
</body>
</html>
I would like to have both js and jQuery solution
Here's a solution using jQuery:
HTML (note that I added a id to the submit button):
<form method=post>
<input type="text" id="first_name">
<input type="text" id="second_name">
<input type="submit" value="Submit" id="submit" disabled>
</form>
JavaScript/jQuery:
$(':text').keyup(function() {
if($('#first_name').val() != "" && $('#second_name').val() != "") {
$('#submit').removeAttr('disabled');
} else {
$('#submit').attr('disabled', true);
}
});
Working example: http://jsfiddle.net/nc6NW/1/
JQuery: jQuery disable/enable submit button
Pure JS:
<html>
<body>
<form method="POST"
onsubmit="return this.first_name.value!='' && this.second_name.value!=''">
<input type="text" id="first_name" name="first_name"
onkeyup="this.form.subbut.disabled = this.value=='' || this.form.second_name.value==''">
<input type="text" id="second_name" name"second_name"
onkeyup="this.form.subbut.disabled = this.value=='' || this.form.first_name.value==''">
<input type="submit" value="Submit" disabled="disabled">
</form>
</body>
</html>
Don't forget the name property for your form fields!
<html>
<head>
<script type="text/javascript" src="path.to/jquery.js" />
<script type="text/javascript">
$(function() { // on document load
var fn = function() {
var disable = true;
$('#myForm input[type:text]').each(function() { // try to find a non-empty control
if ($(this).val() != '') {
disable = false;
}
});
$('#myForm input[type:submit]').attr('disabled', disable);
}
$('#myForm input[type:text]').change(fn); // when an input is typed in
fn(); // set initial state
});
</script>
<body>
<form id="myForm" method="POST">
<input type="text" id="first_name">
<input type="text" id="second_name">
<input type="submit" value="Submit">
</form>
</body>
</html>
$(function(){
$("#first_name, #second_name").bind("change keyup",
function(){
if($("#first_name").val() != "" && $("#second_name").val() != "")
$(this).closest("form").find(":submit").removeAttr("disabled");
else
$(this).closest("form").find(":submit").attr("disabled","disabled");
});
});
加载中,请稍侯......
精彩评论