Menu
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
332
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/
187
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
