How to reset button state to disabled after resetting the form?

Question

In this form, I've set the submit button to be disabled until form fields are complete. When the submit button is pressed, the preventDefault() runs, and an alert is displayed. On closing that alert, the form resets, but the button state doesn't return to disabled.

//validate form input
function validateForm() {
  let formCheck = document.forms['myForm'].elements;
  let canSubmit = true;

  for (let i = 0; i < formCheck.length; i++) {
    if (formCheck[i].value.length == 0) canSubmit = false;
  } 
  submitThis.disabled = !canSubmit;
}

//prevent form submission, alert if form is submitted, reset form
document.getElementById('submitThis').addEventListener('click', function(e) {
  e.preventDefault();
  alert('Awesomeness! The form will now reset.');
  myForm.reset();
})

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  height: 100vh;
}

h2 {
  text-align: center;
}

form {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-direction: column;
}

form input {
  margin: 0.5em 0;
  padding: 0.5em;
  border-radius: 5px;
}

form input[type=submit]:active {
  background-color: darkblue;
  color: white;
}

    <form name="myForm" id="myForm" action="/">
      <h3>My Form</h3>
      <input type="text" id="fName" placeholder="First Name" onkeyup="validateForm()" />
      <input type="text" id="address" placeholder="Street Address" onkeyup="validateForm()" />
      <input type="text" id="addCity" placeholder="City" onkeyup="validateForm()" />
      <input type="text" id="addState" placeholder="State" onkeyup="validateForm()" />
      <input type="number" id="addZip" placeholder="Zip Code" onkeyup="validateForm()" />

      <!-- submit form -->
      <input type="submit" id="submitThis" value="Submit" disabled="disabled"/>
    </form>

Answer 1

As mentioned in the docs:

The HTMLFormElement.reset() method restores a form element's default values. This method does the same thing as clicking the form's reset button.

If a form control (such as a reset button) has a name or id of reset it will mask the form's reset method. It does not reset other attributes in the input, such as disabled.

Thus you will need to set the button to disabled manually after calling form reset() like:

myForm.reset();
document.getElementById("submitThis").disabled = true; 

Demo:

//validate form input
function validateForm() {
  let formCheck = document.forms['myForm'].elements;
  let canSubmit = true;

  for (let i = 0; i < formCheck.length; i++) {
    if (formCheck[i].value.length == 0) canSubmit = false;
  }
  submitThis.disabled = !canSubmit;
}

//prevent form submission, alert if form is submitted, reset form
document.getElementById('submitThis').addEventListener('click', function(e) {
  e.preventDefault();
  alert('Awesomeness! The form will now reset.');
  myForm.reset();
  document.getElementById("submitThis").disabled = true;
})

body{font-family:sans-serif;margin:0;padding:0;height:100vh}h2{text-align:center}form{display:flex;justify-content:center;align-items:center;height:100vh;flex-direction:column}form input{margin:.5em 0;padding:.5em;border-radius:5px}form input[type=submit]:active{background-color:#00008b;color:#fff}

<form name="myForm" id="myForm" action="/">
  <h3>My Form</h3>
  <input type="text" id="fName" placeholder="First Name" onkeyup="validateForm()" />
  <input type="text" id="address" placeholder="Street Address" onkeyup="validateForm()" />
  <input type="text" id="addCity" placeholder="City" onkeyup="validateForm()" />
  <input type="text" id="addState" placeholder="State" onkeyup="validateForm()" />
  <input type="number" id="addZip" placeholder="Zip Code" onkeyup="validateForm()" />

  <!-- submit form -->
  <input type="submit" id="submitThis" value="Submit" disabled="disabled" />
</form>

Answer 2

Call validateForm after submitting the form

function validateForm() {
  let formCheck = document.forms['myForm'].elements;
  let canSubmit = true;

  for (let i = 0; i < formCheck.length; i++) {
    if (formCheck[i].value.length == 0) canSubmit = false;
  }
  submitThis.disabled = !canSubmit;
}

//prevent form submission, alert if form is submitted, reset form
document.getElementById('submitThis').addEventListener('click', function(e) {
  e.preventDefault();
  alert('Awesomeness! The form will now reset.');
  myForm.reset();
  validateForm(); // changed here
})

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  height: 100vh;
}

h2 {
  text-align: center;
}

form {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-direction: column;
}

form input {
  margin: 0.5em 0;
  padding: 0.5em;
  border-radius: 5px;
}

form input[type=submit]:active {
  background-color: darkblue;
  color: white;
}

<form name="myForm" id="myForm" action="/">
  <h3>My Form</h3>
  <input type="text" id="fName" placeholder="First Name" onkeyup="validateForm()" />
  <input type="text" id="address" placeholder="Street Address" onkeyup="validateForm()" />
  <input type="text" id="addCity" placeholder="City" onkeyup="validateForm()" />
  <input type="text" id="addState" placeholder="State" onkeyup="validateForm()" />
  <input type="number" id="addZip" placeholder="Zip Code" onkeyup="validateForm()" />

  <!-- submit form -->
  <input type="submit" id="submitThis" value="Submit" disabled="disabled" />
</form>

Answer 3

Just call validateForm again after the reset:

//validate form input
function validateForm() {
  let formCheck = document.forms['myForm'].elements;
  let canSubmit = true;

  for (let i = 0; i < formCheck.length; i++) {
    if (formCheck[i].value.length == 0) canSubmit = false;
  } 
  submitThis.disabled = !canSubmit;
}

//prevent form submission, alert if form is submitted, reset form
document.getElementById('submitThis').addEventListener('click', function(e) {
  e.preventDefault();
  alert('Awesomeness! The form will now reset.');
  myForm.reset();
  validateForm();
})

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  height: 100vh;
}

h2 {
  text-align: center;
}

form {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-direction: column;
}

form input {
  margin: 0.5em 0;
  padding: 0.5em;
  border-radius: 5px;
}

form input[type=submit]:active {
  background-color: darkblue;
  color: white;
}

    <form name="myForm" id="myForm" action="/">
      <h3>My Form</h3>
      <input type="text" id="fName" placeholder="First Name" onkeyup="validateForm()" />
      <input type="text" id="address" placeholder="Street Address" onkeyup="validateForm()" />
      <input type="text" id="addCity" placeholder="City" onkeyup="validateForm()" />
      <input type="text" id="addState" placeholder="State" onkeyup="validateForm()" />
      <input type="number" id="addZip" placeholder="Zip Code" onkeyup="validateForm()" />

      <!-- submit form -->
      <input type="submit" id="submitThis" value="Submit" disabled="disabled"/>
    </form>