Как сбросить состояние кнопки на отключенное после сброса формы?

Question

В этой форме я установил отключение кнопки отправки, пока поля формы не будут заполнены. Когда кнопка отправки нажата, запускается protectDefault () и отображается предупреждение. При закрытии этого предупреждения форма сбрасывается, но состояние кнопки не возвращается к отключенному.

//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

Как упоминалось в документах :

Метод HTMLFormElement.reset () восстанавливает значения по умолчанию для элемента формы. Этот метод делает то же самое, что и нажатие кнопки сброса формы.

Если элемент управления формы (например, кнопка сброса) имеет имя или идентификатор сброса, он будет маскировать метод сброса формы. Он не сбрасывает другие атрибуты ввода, такие как disabled.

Таким образом, вам нужно будет вручную отключить кнопку после вызова формы reset(), например:

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

Демонстрация:

//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

Просто позвоните validateForm снова после сброса:

//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>

Answer 3

Звоните validateForm после отправки формы

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>