Bien, esta podría ser una pregunta un poco confusa, pero de todos modos: tengo un formulario, dirigido a una URL externa para la validación.
<form id="form1" name="form1" class="formclass" accept-charset="UTF-8" autocomplete="off" enctype="multipart/form-data" method="post" novalidate action="https://www.external_url.com" >Sin embargo, quiero hacer algo en el momento en que el usuario haga clic en el botón Enviar y el formulario se envíe a la URL externa. Básicamente, estoy tratando de lograr eso eliminando la acción del formulario allí y creando un controlador de eventos:
button=document.getElementById("SubmitButton"); button.addEventListener('click', submitaction); function submitaction() { // Do something and THEN submit it to external URL }Cuando termine de "hacer algo" (por ejemplo, tal vez para mostrar una alerta antes de enviarlo), quiero tomar el formulario completo y enviarlo a un servidor externo. ¿Qué debo hacer para lograr exactamente el mismo resultado que la acción en el formulario?
¡Gracias chicos!
EDITAR:
Tomé el consejo con respecto al detector de eventos de envío. Sin embargo, se debe realizar una solicitud AJAX antes de enviar el formulario.
form1.addEventListener('submit', function(e) { $.ajax({ type: 'POST', url: 'form_submission.php', data: {'check_input': input.value}, success: function(response){ if (response == true){ alert("Thank you for your inquiry!"); } } else { alert("Your input entered was incorrect.") e.preventDefault(); } } } );De alguna manera, el detector de eventos simplemente ignora mi solicitud de AJAX y aún envía el formulario. Ni siquiera muestra las alertas, lo cual es súper extraño.
Eliminar el atributo de action no evitará el envío del formulario, solo recargará la página.
En su lugar, debe adjuntar un detector de eventos de submit en el formulario y agregar el código que desea ejecutar antes de enviarlo en la devolución de llamada:
form1.addEventListener('submit', function(){ alert('submit!'); }) <form id="form1" name="form1" class="formclass" accept-charset="UTF-8" autocomplete="off" enctype="multipart/form-data" method="post" novalidate action="https://www.external_url.com"> <button>submit</button> </form> Para el envío de formularios condicionales, se utiliza Event.preventDefault() para evitar el envío de formularios:
form1.addEventListener('submit', function(e) { if (!input.value.length > 0) { console.log('You have not filled out the input field') e.preventDefault(); } }) <form id="form1" name="form1" class="formclass" accept-charset="UTF-8" autocomplete="off" enctype="multipart/form-data" method="post" novalidate action="https://www.external_url.com"> <input id="input"> <button>submit</button> </form>Si está realizando una solicitud AJAX, su código debería verse así:
form1.addEventListener('submit', function(e) { e.preventDefault(); $.ajax({ type: 'POST', url: 'form_submission.php', data: { 'check_input': input.value }, success: function(response) { if (response == true) { alert("Thank you for your inquiry!"); form1.submit(); } } else { alert("Your input entered was incorrect.") } }) });Este es un pequeño fragmento que ilustra el uso de una publicación de búsqueda para verificar el valor de entrada antes de enviar el formulario. Solo si el valor numérico del campo de entrada es >0 , se enviará el formulario.
form1.addEventListener('submit', function(e) { e.preventDefault(); fetch("https://jsonplaceholder.typicode.com/users",{ method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify({usrVal:input1.value}) }).then(r=>r.json()).then(o=>{ if (+o.usrVal>0) form1.submit() }) }) <form id="form1" name="form1" class="formclass" accept-charset="UTF-8" autocomplete="off" enctype="multipart/form-data" method="post" novalidate action="https://www.external_url.com"> <input id="input1"> <button>submit</button> </form>