Estoy tratando de evitar el comportamiento predeterminado de volver a cargar la página después de enviar un formulario, para mostrar una información y después de un segundo más o menos, continuar con ese evento (enviar) que provoca la actualización.
he hecho esto
HTML:
<form id="uploadForm" method=post enctype=multipart/form-data onsubmit="showConfirmationModal(event)"> <span id="confirmationModal" class="confirmModal"></span> <input type=file name=file> <input id="uploadButton" class="primaryButton" type=submit class="primaryButton" value=Enviar> </form>JS:
const showConfirmationModal = (event) => { event.preventDefault(); const confirmation = document.getElementById('confirmationModal') confirmation.innerText = " Uploading File ... "; confirmation.style.display = 'inline'; setTimeout(() =>{ document.getElementById("uploadForm").submit(); },1000) }Pero no se envía el documento que se está cargando.
¿Alguna idea?
¡Gracias!
(He estado buscando información, pero la mayoría de la gente usa JQuery para resolver el problema y es algo que no quiero hacer, me gustaría usar solo JS)
Aquí hay un código de muestra que muestra una característica de un programa modal después de hacer clic en el botón Enviar y el submit se procesa solo después de la confirmación con el botón que se muestra en el modal
let submitBtn = document.getElementById("uploadButton"); let modal = document.getElementById("modal"); let confirmBtn = document.getElementById("confirm"); let uploadForm = document.getElementById("uploadForm"); submitBtn.addEventListener('click', event => { event.preventDefault(); modal.style.display = "flex"; }); confirmBtn.addEventListener('click', event => { event.preventDefault(); uploadForm.submit(); }); #modal{ position: absolute; top: 0; left:0; display: none; justify-content: center; align-items: center; width: 100vw; height: 100vh; background: rgba(0,0,0,0.6); } #modal .modal-content { width: 80%; height: 80%; background: white; display: flex; justify-content: center; align-items: center; } <form id="uploadForm" method="post" enctype="multipart/form-data"> <span id="confirmationModal" class="confirmModal"></span> <input type=file name=file> <input id="uploadButton" class="primaryButton" type=submit class="primaryButton" value=Enviar> </form> <div id="modal"> <div class="modal-content"> <button id="confirm">Confirm</button> </div> </div>Cambiar el
type=submita
type=buttonEn este caso (como mencionó @mousetail), por supuesto, debe mover el controlador de eventos al evento de clic.
Si quieres seguir con el envío, prueba
return falseAl final del manipulador.
function mySubmit(e) { e.preventDefault(); try { someBug(); } catch (e) { throw new Error(e.message); } return false; }