0

El siguiente formulario no envía (submit POST) y debería usar class para el button y el form en vez de id, porque hay varios button y varios form. Estuve probando querySelector(); querySelectorAll(); getElementsByClassName(); pero no logro hacerlo funcionar.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.css" type="text/css">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.js"></script>

<form method="post" action="/post.php" enctype="multipart/form-data" id="form" novalidate>
<p>Nombre:</p>
<input name="nombre" type="text" class="form-control" required>
<button id="btnA" type="submit" id="boton" class="btn btn-success" >Enviar</button>
</form>

<script>
window.addEventListener('DOMContentLoaded', Init); 

function Init(){ //se ejecuta cuando el DOM ha sido cargado
  const form = document.getElementById('form'); //no hay un solo form, por lo tanto es necesario ocupar querySelectorAll
  form.addEventListener('submit', event => {
   event.preventDefault();
      if (!form.checkValidity()) { //Si el form tiene errores
        event.preventDefault(); //detenemos el submit
        event.stopPropagation();
        form.classList.add('was-validated'); // agregamos la clase para que muestre la alerta con errores
        return; //retornamos
      }
      
      //Aqui sigue si es que no hay errores en el form
      form.querySelectorAll("input, button, select").forEach(el => el.disabled=true); //desabilitamos todos los inputm buttons y select del form
      document.getElementById("btnA").innerHTML='<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Espere...'; //agregamos este spinner al boton submit
form.submit(); // Le agregué esta linea hace el submit pero no envía "nombre"
    }, false)
}
</script>

1 respuesta 1

0

Le falta agregar this, al final de su evento submit dentro de la funcion init cuando ejecuta la setencia form.submit le hace falta agregar el this, recuerde que con el this puede acceder a las variables que estan por fuera de la funcion del evento submit de su codigo.

this.form.submit();

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.