how can I make my submit button disabled again if the form field has no value because my javascript code works only one way? At first, the submit button is disabled. Then, if the form fields have values, it is enabled, but the submit is still enabled when I erase one form field value. It doesn't go back to being disabled. I also want my checkbox to be included in my javascript code, but I don't know how.
My JS function:
function isEmpty() {
let name = document.getElementById('name').value;
let lastname = document.getElementById('lastname').value;
let idnumber = document.getElementById('idnumber').value;
let pro = document.getElementById('pro').value;
let course = document.getElementById('course').value;
let phone = document.getElementById('phone').value;
let email = document.getElementById('email').value;
let port = document.getElementById('port').value;
let uploadresume = document.getElementById('uploadresume').value;
let left = document.getElementById('left').value;
let info = document.getElementById('info').value;
let first = document.getElementById('first').value;
let second = document.getElementById('second').value;
let exam1 = document.getElementById('exam1').value;
let exam2 = document.getElementById('exam2').value;
let writeup = document.getElementById('writeup').value;
if (
name != '' &&
lastname != '' &&
idnumber != '' &&
pro != '' &&
course != '' &&
phone != '' &&
email != '' &&
port != '' &&
uploadresume != '' &&
left != '' &&
info != '' &&
first != '' &&
second != '' &&
exam1 != '' &&
exam2 != '' &&
writeup != ''
) {
document.getElementById('apply').removeAttribute('disabled');
}
}
My HTML code for submit button and checkbox:
<input required type="checkbox" />
<button
class="btn-getstarted btn positionss"
style="width: 60%"
id="apply"
data-bs-toggle="modal"
data-bs-target="#reviewModal"
onclick="verifyapp()"
disabled
>
SUBMIT!
</button>
Thank you so much!
In JS, null is different from undefined or empty strings. and the default value of variables is usually undefined.
I am saying that, because when you do the variable tests in your if (ex name != '') the value of the variables might be null or undefined. In those cases the if would not catch it.
another JS peculiarity is that if (name) means if (name != '' && name != null && name != undefined)
so you could just remove all the != '' from your code and it should work.
if (
name &&
lastname &&
idnumber &&
...
Use form validation, there are varying types available, here's a simple one:
Add the required attribute on every form control
Do not disable the button
With the example below try submitting the form with an empty field
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style></style>
</head>
<body>
<main class="container">
<section class="row">
<form id='UI'>
<fieldset class="border p-2">
<legend class="float-none w-auto">Form Validation</legend>
<label for='text1' class='label-control'>Text 1: </label>
<input id='text1' name='data' class='form-control' required value='1'>
<label for='text2' class='label-control'>Text 2: </label>
<input id='text2' name='data' class='form-control' required value='2'>
<label for='text3' class='label-control'>Text 3: </label>
<input id='text3' name='data' class='form-control' required value='3'>
<label for='text4' class='label-control'>Text 4: </label>
<input id='text4' name='data' class='form-control' required>
<button class='btn btn-primary float-end mt-2'>Done</button>
</fieldset>
</form>
</section>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script></script>
</body>
</html>Add onkeyup="isEmpty()"
<button class="btn-getstarted btn positionss" style="width: 60%;" id="apply" data-bs-toggle="modal" data-bs-target="#reviewModal" onkeyup="isEmpty()" onclick="verifyapp()" disabled>SUBMIT!</button>