Tengo un formulario HTML conectado al punto final del formulario formsubmit.co .
<form action="https://formsubmit.co/my@email.com" method="POST" class="form"> <input type="text" name="name" required> <input type="email" name="email" required> <button type="submit">Submit</button> </form> Agregué <input type="hidden" name="_next" value="https://mydomain.co/thanks.html"> para redirigir a la página original después de que se requiera el envío. También deshabilité el reCAPTCHA usando <input type="hidden" name="_captcha" value="false"> , por lo que cuando se envía el formulario, la página simplemente se vuelve a cargar.
El problema es que el usuario no sabe que sucedió nada después de enviar el formulario, la página solo se carga durante un tiempo y luego se vuelve a cargar. No quiero crear otra página para esto, en realidad quiero usar un modal para ello.
Intenté agregar un detector de eventos de submit , y cuando se activa ese evento, se muestra una alert ; pero la alerta se muestra incluso antes de que comience el proceso de envío del formulario.
function alertSubmit() { alert('Your details were successfully received.'); } const form = document.querySelector('form'); form.addEventListener('submit', alertSubmit); ¿Cómo puedo mostrar una alert inmediatamente después de enviar correctamente el formulario y no cuando se hace clic en el botón submit ?
Puedes hacer los siguientes cambios:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <form action="https://formsubmit.co/your@email.com" method="POST" class="form"> <input type="text" name="name" required> <input type="email" name="email" required> <button type="submit">Submit</button> </form> <script> $(document).ready(function(){ $('.form').on('submit', function(){ alert('Your details were successfully received.'); }); }); </script><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script> <form action="https://formsubmit.co/your@email.com" method="POST" class="form"> <input type="text" name="name" required> <input type="email" name="email" required> <button type="submit">Submit</button> </form> <script> $(document).ready(function(){ $('.form').on('submit', function(){ swal("Title", "Message Content", "success", { button: "Ok", }); }); }); </script>