重置表单后如何将按钮状态重置为禁用？

Question

在此表单中，我将提交按钮设置为禁用，直到表单字段完成为止。当按下提交按钮时，preventDefault() 运行，并显示警报。关闭该警报后，表单将重置，但按钮状态不会返回到禁用状态。//validate form inputfunction 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 formdocument.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

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 2

正如文档中提到的：

HTMLFormElement.reset ()方法恢复表单元素的默认值。此方法与单击表单的重置按钮执行相同的操作。

如果表单控件（例如重置按钮）的名称或 ID 为 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 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>