¿Cómo impido que se recargue el formulario usando Javascript?

Question

Cuando un usuario envía el formulario, quiero detener el comportamiento predeterminado del formulario. es decir, no debería volver a cargar. para que pueda realizar la solicitud de AJAX.

aquí está el código que he usado.

<script type="text/javascript"> 
    function validateForm() 
    { 
     return false; 
    } 
</script> 
<form action="" name="contact" onsubmit="validateForm();"> 
    <input type="text" name="name" value="Enter Your Name..."/> 
    <input type="submit" name="submit"/> 
</form> 

esto no impide que se envíe o vuelva a cargar el formulario. ¿Cómo logro esto?

Answer 1

Es necesario que haya onsubmit="return validateForm()"

Answer 2

se debe utilizar un retorno en el hanlder onsubmit de la forma. Prueba esta versión:

<script type="text/javascript"> 
    function validateForm() 
    { 
     return false; 
    } 
</script> 
<form action="" name="contact" onsubmit="return validateForm();"> 
    <input type="text" name="name" value="Enter Your Name..."/> 
    <input type="submit" name="submit"/> 

Answer 3

añadir un retorno en el controlador de eventos:

onsubmit="return validateForm();" 

contrario, la función ejecutada, pero no le dice al navegador para detener el proceso.

Answer 4

Usted puede utilizar el atributo onsubmit como se sugiere, de una manera más discreta es utilizar preventDefault() en el objeto de evento pasado a la función con destino a su onsubmit evento:

function validateForm(e) { 
    if (e.preventDefault) { 
     e.preventDefault(); 
    } 
    e.returnValue = false; // for IE 
} 

Esto sólo funciona si enlaza el evento oyente al formulario, en lugar de tener onsubmit en línea.

Editar: aquí es cómo podría vincular un oyente de evento al formulario, que cuando se desencadena pasará un objeto de evento (tenga en cuenta que este es el estilo W3C, esto no funcionará en IE, pero le dará una idea):

var form = document.getElementById('myform'); 
form.addEventListener('submit', validateForm, false); 

Cuando se activa el evento submit, se llamará a la función validateForm, pasando el objeto de evento. He aquí un artículo muy bueno sobre los eventos de JavaScript:

http://www.quirksmode.org/js/introevents.html

Answer 5

Usando jQuery:

$('form').on('submit', function() { 
    // call functions to handle form 
    return false; 
}); 

Básicamente lo mismo que las soluciones anteriores, pero prefiero mantener mis JS de mi HTML, incluso el "onsubmit" atributo.