¿Cómo restablecer el estado del botón a deshabilitado después de restablecer el formulario?

Jared Newnam

En este formulario, configuré el botón de envío para que esté deshabilitado hasta que los campos del formulario estén completos. Cuando se presiona el botón enviar, preventDefault () se ejecuta y se muestra una alerta. Al cerrar esa alerta, el formulario se restablece, pero el estado del botón no vuelve a desactivado.

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

jo3rn

Simplemente validateFormvuelva a llamar después del reinicio:

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

Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.

En caso de infracción, por favor [email protected] Eliminar

Editado en
0

Déjame decir algunas palabras

0Comentarios
Iniciar sesiónRevisión de participación posterior

Artículos relacionados

Restablecer el estado del enlace después de hacer clic

Formularios reactivos angulares: cómo restablecer el estado del formulario y mantener los valores después del envío

restablecer validaciones después de restablecer el formulario (ReactiveForms)

restablecer validaciones después de restablecer el formulario (ReactiveForms)

¿Cómo eliminar la marca de verificación React visible después de restablecer el formulario?

Formik - Cómo restablecer el formulario después de la confirmación

Formik - Cómo restablecer el formulario después de la confirmación

¿Cómo restablecer el formulario y habilitar el botón Enviar después del envío del formulario (react-formio)?

¿Restablecer el estado de React después de que finalice la animación del componente?

Cómo restablecer el formulario después de enviar correctamente el formulario Redux

Restablecer el estado del formulario y la página después de 5 segundos en ASP.NET

Desactivar el botón Guardar / Enviar después de restablecer el formulario

¿Cómo restablecer (borrar) el formulario a través de JavaScript?

Cómo restablecer los campos del formulario al seleccionar el cambio de opción

Borrar (restablecer) los campos (datos) del formulario después de enviar el formulario

¿Cómo restablecer el mensaje de error después de presionar el botón?

Restablecer el valor del campo Formik deshabilitado

Restablecer el valor del campo Formik deshabilitado

Restablecer el valor del campo de entrada deshabilitado

¿Cómo restablecer el formulario después de una presentación exitosa con una entidad de tipo flotante?

¿Cómo ejecutar código después de restablecer el formulario html con jquery?

Restablecer el campo de entrada del formulario después de enviarlo en Phoenix LiveView

¿Cómo restablecer el formulario después de enviar usando angular?

Restablecer el marcador de posición al valor predeterminado en un formulario Vue JS después del envío

Restablecer los valores del objeto después de cancelar el formulario

Cómo restablecer el estado de un GRU en tensorflow después de cada época

Cómo restablecer el formulario de la tarjeta de crédito después de enviar el formulario en Square Connect

¿Cómo podemos mantener / conservar el valor desplegable seleccionado después de enviar y restablecer el área de texto en el formulario de ganchos de reacción?

jQuery - Actualización de campos seleccionados después de restablecer el formulario