Formulario Enviar Ejecutar JavaScript ¿Mejores prácticas?

Question

Me gustaría ejecutar una función de JavaScript cuando se envía un formulario. El problema es que, cuando se envía el formulario, la página se vuelve a cargar y los valores del formulario se anexan a la URL como parámetros GET. Me gustaría que permanezca en la página actual y solo ejecute la función de JavaScript.

Me preguntaba cuál es la mejor práctica (o lo que hace) para evitar tener que cargar la página y enviar los parámetros.

Answer 1

Utilice el evento onsubmit para ejecutar código JavaScript cuando se envíe el formulario. A continuación, puede devolver el valor falso o llamar al método preventDefault del evento pasado para deshabilitar el envío del formulario.

Por ejemplo:

<script> 
function doSomething() { 
    alert('Form submitted!'); 
    return false; 
} 
</script> 

<form onsubmit="return doSomething();" class="my-form"> 
    <input type="submit" value="Submit"> 
</form> 

Esto funciona, pero es mejor no a la basura su HTML con Javascript, al igual que no se debe escribir un montón de reglas CSS en línea. Muchos frameworks de Javascript facilitan esta separación de preocupaciones. En jQuery que ates un evento utilizando código JavaScript, así:

<script> 
$('.my-form').on('submit', function() { 
    alert('Form submitted!'); 
    return false; 
}); 
</script> 

<form class="my-form"> 
    <input type="submit" value="Submit"> 
</form> 

Answer 2

Adjunte un controlador de eventos al evento de envío del formulario. Asegúrese de que cancele la acción predeterminada.

El modo Quirks tiene a guide to event handlers, pero probablemente sería mejor usar una biblioteca para simplificar el código y resolver las diferencias entre los navegadores. Todas las principales (como YUI y jQuery) incluyen características de manejo de eventos, y hay una gran colección de tiny event libraries.

Aquí es cómo usted lo haría en YUI 3:

<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script> 
<script> 
    YUI().use('event', function (Y) { 
     Y.one('form').on('submit', function (e) { 
      // Whatever else you want to do goes here 
      e.preventDefault(); 
     }); 
    }); 
</script> 

Asegúrese de que the server will pick up the slack si el JavaScript falla por cualquier razón.

Answer 3

Sé que es un poco tarde para esto. Pero siempre pensé que la mejor manera de crear oyentes de eventos es directamente desde JavaScript. Algo así como no aplicar estilos CSS en línea.

function validate(){ 
    //do stuff 
} 
function init(){ 
    document.getElementById('form').onsubmit = validate; 
} 
windows.onload = init; 

De esta manera no tiene un grupo de oyentes de eventos en todo su HTML.