¿Cómo se intercepta el formulario de forma confiable?

Question

Estoy tratando de interceptar todo tipo de presentaciones de formularios para un formulario específico en una página web. Parece ser muy simple con jQuery: form.submit(function(e) {…}) y funciona muy bien si hago clic en el botón Enviar.

Sin embargo, existe también una propiedad onChange en un campo de selección que realiza this.form.submit() y parece que esta llamada elude mi oyente (en 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> 

Obviamente en el código anterior que pude simplemente el cambio this.form.submit() a una referencia específica de mi oyente de envío. Sin embargo, en mi aplicación real no es tan simple, así que estoy buscando una forma en la que no tenga que modificar la propiedad onChange.

Si no cometí un error estúpido, pero en realidad este es el comportamiento esperado del navegador, me alegra mucho poder explicar el flujo del evento y por qué esto conduce a los síntomas descritos anteriormente.

Answer 1

Llamar al método form.submit() no activa el evento submit, como por ejemplo, establecer el value de un cuadro de texto no desencadena su evento change. Tratar de activar el evento submit través de jQuery en su lugar:

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

De acuerdo con la documentation, la acción predeterminada submit en el formulario será despedido y se envía el formulario.