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

Question

在此表单中，我将提交按钮设置为禁用，直到表单字段完成为止。当按下提交按钮时，preventDefault() 运行，并显示警报。关闭该警报后，表单将重置，但按钮状态不会返回到禁用状态。

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

validateForm重置后再次调用即可：//validate form inputfunction validateForm() {&nbsp; let formCheck = document.forms['myForm'].elements;&nbsp; let canSubmit = true;&nbsp; for (let i = 0; i < formCheck.length; i++) {&nbsp; &nbsp; if (formCheck[i].value.length == 0) canSubmit = false;&nbsp; }&nbsp;&nbsp; submitThis.disabled = !canSubmit;}//prevent form submission, alert if form is submitted, reset formdocument.getElementById('submitThis').addEventListener('click', function(e) {&nbsp; e.preventDefault();&nbsp; alert('Awesomeness! The form will now reset.');&nbsp; myForm.reset();&nbsp; validateForm();})body {&nbsp; font-family: sans-serif;&nbsp; margin: 0;&nbsp; padding: 0;&nbsp; height: 100vh;}h2 {&nbsp; text-align: center;}form {&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; align-items: center;&nbsp; height: 100vh;&nbsp; flex-direction: column;}form input {&nbsp; margin: 0.5em 0;&nbsp; padding: 0.5em;&nbsp; border-radius: 5px;}form input[type=submit]:active {&nbsp; background-color: darkblue;&nbsp; color: white;}&nbsp; &nbsp; <form name="myForm" id="myForm" action="/">&nbsp; &nbsp; &nbsp; <h3>My Form</h3>&nbsp; &nbsp; &nbsp; <input type="text" id="fName" placeholder="First Name" onkeyup="validateForm()" />&nbsp; &nbsp; &nbsp; <input type="text" id="address" placeholder="Street Address" onkeyup="validateForm()" />&nbsp; &nbsp; &nbsp; <input type="text" id="addCity" placeholder="City" onkeyup="validateForm()" />&nbsp; &nbsp; &nbsp; <input type="text" id="addState" placeholder="State" onkeyup="validateForm()" />&nbsp; &nbsp; &nbsp; <input type="number" id="addZip" placeholder="Zip Code" onkeyup="validateForm()" />&nbsp; &nbsp; &nbsp; <!-- submit form -->&nbsp; &nbsp; &nbsp; <input type="submit" id="submitThis" value="Submit" disabled="disabled"/>&nbsp; &nbsp; </form>

Answer 2

正如文档中提到的：HTMLFormElement.reset&nbsp;()方法恢复表单元素的默认值。此方法与单击表单的重置按钮执行相同的操作。如果表单控件（例如重置按钮）的名称或 ID 为 Reset，它将屏蔽表单的重置方法。它不会重置输入中的其他属性，例如disabled.因此，您需要在调用表单后手动将按钮设置为禁用，reset()如下所示：myForm.reset(); document.getElementById("submitThis").disabled&nbsp;=&nbsp;true;演示：//validate form inputfunction validateForm() {&nbsp; let formCheck = document.forms['myForm'].elements;&nbsp; let canSubmit = true;&nbsp; for (let i = 0; i < formCheck.length; i++) {&nbsp; &nbsp; if (formCheck[i].value.length == 0) canSubmit = false;&nbsp; }&nbsp; submitThis.disabled = !canSubmit;}//prevent form submission, alert if form is submitted, reset formdocument.getElementById('submitThis').addEventListener('click', function(e) {&nbsp; e.preventDefault();&nbsp; alert('Awesomeness! The form will now reset.');&nbsp; myForm.reset();&nbsp; 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="/">&nbsp; <h3>My Form</h3>&nbsp; <input type="text" id="fName" placeholder="First Name" onkeyup="validateForm()" />&nbsp; <input type="text" id="address" placeholder="Street Address" onkeyup="validateForm()" />&nbsp; <input type="text" id="addCity" placeholder="City" onkeyup="validateForm()" />&nbsp; <input type="text" id="addState" placeholder="State" onkeyup="validateForm()" />&nbsp; <input type="number" id="addZip" placeholder="Zip Code" onkeyup="validateForm()" />&nbsp; <!-- submit form -->&nbsp; <input type="submit" id="submitThis" value="Submit" disabled="disabled" /></form>

Answer 3

validateForm提交表格后致电function validateForm() {&nbsp; let formCheck = document.forms['myForm'].elements;&nbsp; let canSubmit = true;&nbsp; for (let i = 0; i < formCheck.length; i++) {&nbsp; &nbsp; if (formCheck[i].value.length == 0) canSubmit = false;&nbsp; }&nbsp; submitThis.disabled = !canSubmit;}//prevent form submission, alert if form is submitted, reset formdocument.getElementById('submitThis').addEventListener('click', function(e) {&nbsp; e.preventDefault();&nbsp; alert('Awesomeness! The form will now reset.');&nbsp; myForm.reset();&nbsp; validateForm(); // changed here})body {&nbsp; font-family: sans-serif;&nbsp; margin: 0;&nbsp; padding: 0;&nbsp; height: 100vh;}h2 {&nbsp; text-align: center;}form {&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; align-items: center;&nbsp; height: 100vh;&nbsp; flex-direction: column;}form input {&nbsp; margin: 0.5em 0;&nbsp; padding: 0.5em;&nbsp; border-radius: 5px;}form input[type=submit]:active {&nbsp; background-color: darkblue;&nbsp; color: white;}<form name="myForm" id="myForm" action="/">&nbsp; <h3>My Form</h3>&nbsp; <input type="text" id="fName" placeholder="First Name" onkeyup="validateForm()" />&nbsp; <input type="text" id="address" placeholder="Street Address" onkeyup="validateForm()" />&nbsp; <input type="text" id="addCity" placeholder="City" onkeyup="validateForm()" />&nbsp; <input type="text" id="addState" placeholder="State" onkeyup="validateForm()" />&nbsp; <input type="number" id="addZip" placeholder="Zip Code" onkeyup="validateForm()" />&nbsp; <!-- submit form -->&nbsp; <input type="submit" id="submitThis" value="Submit" disabled="disabled" /></form>