¿Cómo hacer algo antes de enviar? [cerrado]

141

Tengo un formulario que tiene un botón que envía el formulario. Necesito hacer algo antes de que sucedan los envíos. Intenté hacer onClick en ese botón pero sucede después del envío.

No puedo compartir el código pero, en general, ¿qué debo hacer en jQuery o JS para manejar esto?

javascript jquery html

— Palanqueta
fuente

11

tos jsFiddle Ejemplo tos

— Brad Christie

2

@Brad Christie si solo pudiera aceptar un comentario como respuesta. Gracias muy útil

— Jimmy

3

Odio cuando stackover cierra una pregunta. Puede manejar sus acciones utilizando los siguientes eventos que se activan en el siguiente momento justo antes de enviar un formulario: 1- onmouseover 2- onmousemove 3- onmousedown 4- onfocus 5- onmouseup 6- onclick 7- onsubmit

— Shadi Namrouti

1

Aprecio esta pregunta porque me encontré con el mismo problema recientemente y esta es exactamente lo que quería hacer.

— wastetime909

2

Es curioso que esta pregunta se haya cerrado porque no es una pregunta real: -?

— AnnaKlein

207

Si tiene un formulario como tal:

<form id="myform">
...
</form>

Puede usar el siguiente código jQuery para hacer algo antes de enviar el formulario:

$('#myform').submit(function() {
    // DO STUFF...
    return true; // return false to cancel form action
});

— Dan Breen
fuente

2

Tengo problemas para usar esto para los bucles que deben completarse antes del envío. ¿Alguna sugerencia?

— Smilyan

¿Tienes algún código para mirar? No estoy seguro de entender el problema.

— Dan Breen

3

¿Por qué está envuelto en una llamada de función vacía? ¿No debería la submitfunción poder vincularse directamente con la $('#form')función vacía circundante? EDITAR: los documentos sugieren que no se necesita la llamada a la función circundante .

— eykanal

@eykanal Buen punto. Seguí adelante y edité la respuesta para eliminar el contenedor de funciones después de confirmar que funciona bien con él eliminado.

— Jon Schneider

3

@eykanal Usé la llamada de función "vacía", porque es una forma abreviada de la $(document).ready()función de jQuery , que garantiza que el DOM esté completo antes de adjuntar el submitevento. Si su JS está en la parte inferior de la página, no es necesario, pero si está en la <head>sección, entonces lo necesita. Ver: stackoverflow.com/q/13062246/135108

— Dan Breen el

23

Suponiendo que tiene un formulario como este:

<form id="myForm" action="foo.php" method="post">
   <input type="text" value="" />
   <input type="submit" value="submit form" />

</form>

Puede adjuntar un onsubmitevento con jQuery como este:

$('#myForm').submit(function() {
  alert('Handler for .submit() called.');
  return false;
});

Si return falseel formulario no se enviará después de la función, si devuelve verdadero o nada, se enviará como de costumbre.

Consulte la documentación de jQuery para obtener más información.

— cumbre
fuente

11

Puede usar onclickpara ejecutar algún código JavaScript o jQuery antes de enviar el formulario de esta manera:

<script type="text/javascript">
    beforeSubmit = function(){
        if (1 == 1){
            //your before submit logic
        }        
        $("#formid").submit();            
    }
</script>
<input type="button" value="Click" onclick="beforeSubmit();" />

— James Johnson
fuente

18

Pero esto no funciona, cuando el formulario contiene, por ejemplo, un campo de entrada y el usuario está presionando la tecla de retorno que está activando el evento de envío. Por lo general, es mejor adjuntar directamente al evento de envío para que pueda asegurarse de que se llame independientemente de cómo el usuario haya disparado el envío.

— acme

2

— Ansyori

5

asegúrese de que el botón de envío no sea del tipo "enviar", hágalo un botón. Luego use el evento onclick para activar algunos javascript. Allí puede hacer lo que quiera antes de publicar sus datos.

— rogerlsmith
fuente

3

El formulario se puede enviar de varias maneras, como presionar enter en ciertos campos. No es una buena idea vincular a un clic en un botón que no se puede hacer clic. Las otras respuestas muestran cómo se vincula onsubmitel formulario , que se activará sin importar cómo se envíe el formulario.

— Jason