Come afferrare l'evento onSubmit per un modulo?

Voglio sapere come afferrare l'evento onsubmit da un modulo per eseguire la convalida del modulo, perché non ho accesso direttamente. (Sto scrivendo un plug-in Wordpress per i commenti, quindi non ho accesso diretto al tag form o al pulsante di invio.)Come afferrare l'evento onSubmit per un modulo?

Mi sono così frustrato cercando di farlo per il mio plugin che ho scritto una versione di Hello World sotto. Voglio che venga visualizzato l'avviso "Hello World" quando carico la pagina e l'avviso "modulo inviato" quando faccio clic sul pulsante di invio. Invece, mostra entrambi i popup quando viene caricata la pagina.

Ecco il mio codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
    <html> 
    <head> 
    <title>Hello World</title> 
    </head> 
    <body> 
    <h2>Test</h2> 
    <form action="#" method="post" id="commentform"> 

    <p><input type="text" name="author" id="author" size="22" tabindex="1" /> 
    <label for="author"><small>Name (required)</small></label></p> 

    <p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" /> 

    </form> 

    <script type="text/JavaScript"> 
    <!-- 
    alert("Hello world"); 

    var formCheck = document.getElementById("commentform"); 

    formCheck.onSubmit = doMapping(); 

    function doMapping() { 
     alert("form submitted"); 
     return false; 
    } 

    --> 
    </script>  

    </body> 
    </html>

fonte

2009-04-02 Anonymous

Modifica questo:

formCheck.onSubmit = doMapping()

a questo:

formCheck.onSubmit = doMapping

Quando si aggiunge la parentesi alla fine di una funzione si esegue questa funzione . Quando si assegna una funzione (o la si passa come parametro a un'altra funzione) è necessario omettere la parentesi poiché questo è il modo per recuperare un puntatore a funzione in JavaScript.

Edit: Sarà inoltre necessario per spostare la dichiarazione della funzione doMapping sopra l'assegnazione di quella funzione per l'evento onSubmit come questo (buona tvanfosson cattura!):

function doMapping() { 
     alert("form submitted"); 
     return false; 
    } 

formCheck.onSubmit = doMapping();

Tuttavia se la funzione doMapping non viene utilizzata altrove, è possibile dichiarare la funzione doMapping come una funzione anonima come questa:

formCheck.onSubmit = function() { 
     alert("form submitted"); 
     return false; 
    }

che sembra un po 'più pulito per me.

fonte

2009-04-02 15:51:19

Penso che dovrai anche modificare l'ordine poiché potrebbe essere necessario eseguire doMapping prima di assegnarlo come gestore onSubmit. – tvanfosson

Grazie - Ho modificato la mia risposta per rispondere al tuo punto. –

Utilizzo di jQuery.

$(document).ready(function() { 
    $('#commentform').submit(function() { 
     alert('form submitted'); 
     return false; 
    }); 
});

fonte

2009-04-02 15:54:31 tvanfosson

Grazie! In realtà l'ho risolto in un altro modo, usando sia il suggerimento di Andrew che l'evento window.onload: il problema era in parte dovuto al fatto che l'elemento non era stato effettivamente caricato.

window.onload = function(){ 
    if (document.getElementById("commentform")){ 
     document.getElementById("commentform").onsubmit = doMapping; 
    } 
} 

function doMapping(){ 
      alert("form submitted"); 
      return false; 
}

fonte

2009-04-02 16:07:44

Nota che l'evento onload è stato generato dopo che l'intera pagina è stata caricata. Quindi, se ci dovesse essere un'immagine che richiede molto tempo per essere caricata, in genere qualcosa come Google Analytics, il tuo gestore di eventi non verrà assegnato prima che l'utente prenda l'invio. – Rashack

La risposta di jQuery gestisce che ... – Rashack

Come afferrare l'evento onSubmit per un modulo?

risposta

Problemi correlati