'how can i make my button disabled again if form fields is not filled

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!

javascripthtmljqueryforms


Solution 1:[1]

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 &&
   ...

Solution 2:[2]

Use form validation, there are varying types available, here's a simple one:

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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <script></script>
</body>

</html>

Solution 3:[3]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 The Fabio
Solution 2 zer00ne
Solution 3 Krelq

Related Questions