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
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
Share Improve this question edited Jun 2, 2022 at 15:29 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Mar 9, 2011 at 15:39 MellonMellon 38.9k78 gold badges192 silver badges265 bronze badges4 Answers
Reset to default 6Here'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/nc6NW/1/
JQuery: jQuery disable/enable submit button
Pure JS:
Event listener version
window.addEventListener('DOMContentLoaded', () => {
const form = document.getElementById('myForm');
// this is a little overkill
form.addEventListener('submit', (e) => {
let name1 = form.first_name.value.trim();
let name2 = form.second_name.value.trim();
if (name1 === "" || name2 === "") e.preventDefault(); // stop submission
});
form.addEventListener('input', (e) => {
let name1 = form.first_name.value.trim();
let name2 = form.second_name.value.trim();
document.getElementById('subbut').disabled = name1 === "" || name2 === "";
});
});<form method="POST" id="myForm">
<input type="text" id="first_name" name="first_name" />
<input type="text" id="second_name" name "second_name" />
<input id="subbut" type="submit" value="Submit" disabled="disabled" />
</form>HTML only version
<form method="POST">
<input type="text" id="first_name" name="first_name" required />
<input type="text" id="second_name" name "second_name" required />
<input name="subbut" type="submit" value="Submit" />
</form>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");
});
});