Come fare qualcosa prima di inviare? [chiuso]

142

ho un modulo che ha un pulsante che invia il modulo. Devo fare qualcosa prima che avvenga l'invio. Ho provato a fare onClick su quel pulsante, ma succede dopo l'invio.

Non riesco a condividere il codice ma, in generale, cosa devo fare in jQuery o JS per gestirlo?

javascript jquery html

— piede di porco
fonte

11

tosse jsFiddle Esempio tosse

— Brad Christie

2

@Brad Christie se solo potessi accettare un commento come risposta. Grazie molto utile

— Jimmy,

3

Lo odio quando lo stackover chiude una domanda. Puoi gestire le tue azioni usando i seguenti eventi che si attivano nei seguenti tempi appena prima di inviare un modulo: 1- onmouseover 2- onmousemove 3- onmousedown 4- onfocus 5- onmouseup 6- onclick 7- onsubmit

— Shadi Namrouti

1

Apprezzo questa domanda perché ho riscontrato lo stesso problema di recente e questa domanda è esattamente quello che volevo fare.

— wastetime909,

2

divertente che questa domanda sia stata chiusa perché non è una vera domanda: -?

— AnnaKlein,

207

Se hai un modulo come tale:

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

È possibile utilizzare il seguente codice jQuery per fare qualcosa prima che il modulo sia inviato:

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

— Dan Breen
fonte

2

Sto riscontrando problemi nell'usarlo per i loop che devono essere completati prima dell'invio. Eventuali suggerimenti?

— Smilyan,

Hai qualche codice da guardare? Non sono sicuro di aver capito il problema.

— Dan Breen,

3

Perché questo è racchiuso in una chiamata di funzione vuota? La submitfunzione non dovrebbe essere in grado di legarsi direttamente a $('#form')senza la funzione vuota circostante? EDIT: i documenti suggeriscono che la chiamata di funzione circostante non è necessaria .

— eykanal,

@eykanal Un buon punto. Sono andato avanti e ho modificato la risposta per rimuovere il wrapper di funzione dopo aver confermato che funziona correttamente con rimosso.

— Jon Schneider,

3

@eykanal Ho usato la chiamata di funzione "vuota", perché è una scorciatoia per la $(document).ready()funzione di jQuery , che assicura che il DOM sia completo prima di allegare l' submitevento. Se il tuo JS è in fondo alla pagina, non è necessario, ma se è nella <head>sezione allora ne hai bisogno. Vedi: stackoverflow.com/q/13062246/135108

— Dan Breen,

23

Supponendo che tu abbia un modulo come questo:

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

</form>

È possibile allegare un onsubmitevento con jQuery in questo modo:

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

Se return falseil modulo non verrà inviato dopo la funzione, se restituisci true o nulla verrà inviato come al solito.

Consulta la documentazione di jQuery per maggiori informazioni.

— acme
fonte

11

È possibile utilizzare onclickper eseguire codice JavaScript o jQuery prima di inviare il modulo in questo modo:

<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
fonte

18

Ma questo non funziona, quando il modulo contiene ad esempio un campo di input, l'utente sta premendo il tasto invio che sta generando l'evento di invio. Di solito è meglio collegarsi direttamente all'evento di invio in modo da poter assicurarsi che venga chiamato indipendentemente da come l'utente ha inviato l'invio.

— Acme,

2

— Ansyori,

5

assicurati che il pulsante di invio non sia del tipo "invia", rendilo un pulsante. Quindi utilizzare l'evento onclick per attivare alcuni javascript. Lì puoi fare quello che vuoi prima di pubblicare i tuoi dati.

— rogerlsmith
fonte

3

Il modulo può essere inviato in vari modi, ad esempio premendo Invio in determinati campi. Associare a un clic su un pulsante a cui non è possibile fare clic non è una buona idea. Le altre risposte mostrano come vincolare onsubmitil modulo , che verrà attivato indipendentemente dalla modalità di invio del modulo.

— Jason,