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>