Skip to main content
2 de 3
se eliminaron 29 caracteres en el cuerpo

Formulario que no envía Boostrap 5

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

    }, false)
}
</script>