Come intercettare il modulo in modo affidabile?

Question

Sto provando a intercettare qualsiasi tipo di invio di moduli per un modulo specifico su una pagina web. Sembra essere molto semplice con jQuery: form.submit(function(e) {…}) e funziona perfettamente se faccio clic sul pulsante di invio.

Tuttavia, v'è anche una proprietà onChange su un campo di selezione che fa this.form.submit() e sembra che questa chiamata aggira il mio ascoltatore (in cromo/Firefox):

<script type="text/javascript"> 
    function submitForm(e) { 
     window.alert('submitted'); 
     e.preventDefault(); 
     return false; 
    } 

    $(document).ready(function() { 
     $('#bar').submit(submitForm); 
    }); 
</script> 

<form id="bar"> 
    <select name="name" onChange="this.form.submit()"> 
     <option>Foo</option> 
     <option>Bar</option> 
    </select> 
    <br/> 
    <input type="submit"/> 
</form> 

Ovviamente nel codice sopra ho solo cambiare this.form.submit() a un riferimento specifico del listener di invio. Tuttavia nella mia app reale non è così semplice, quindi sto cercando un modo in cui non devo modificare la proprietà onChange.

Se non ho fatto uno sbaglio stupido ma questo è in realtà previsto comportamento del browser, sarei davvero felice se potessi spiegare il flusso di eventi e perché questo porta ai sintomi descritti sopra.

Answer 1

Chiamare il metodo form.submit() non attiva l'evento submit, proprio come ad es. l'impostazione di value di una casella di testo non attiva l'evento change. Cercate di attivare l'evento submit tramite jQuery invece:

<form id="bar"> 
    <select name="name" onChange="$('#bar').submit();"> 
     <option>Foo</option> 
     <option>Bar</option> 
    </select> 
    <br/> 
    <input type="submit"/> 
</form> 

Secondo il documentation, l'azione predefinita submit sul modulo verrà licenziato e sarà presentato il modulo.