¿Evitar la redirección de formulario O actualizar en enviar?

Question

He buscado a través de un grupo de páginas, pero no puedo encontrar mi problema, así que tuve que hacer una publicación.

Tengo un formulario que tiene un botón de envío, y cuando lo envíe NO quiero actualizarlo ni redirigirlo. Solo quiero que jQuery realice una función.

Aquí es la forma:

<form id="contactForm"> 
    <fieldset> 
     <label for="Name">Name</label> 
     <input id="contactName" type="text" /> 
    </fieldset> 

    <fieldset> 
     <label for="Email">Email</label> 
     <input id="contactEmail" type="text" /> 
    </fieldset> 

    <fieldset class="noHeight"> 
     <textarea id="contactMessage" cols="20"></textarea> 
     <input id="contactSend" class="submit" type="submit" onclick="sendContactForm()" /> 
    </fieldset> 
</form>   
<small id="messageSent">Your message has been sent.</small> 

Y aquí es el jQuery:

function sendContactForm(){ 
    $("#messageSent").slideDown("slow"); 
    setTimeout('$("#messageSent").slideUp();$("#contactForm").slideUp("slow")', 2000); 
} 

He intentado con y sin un elemento de acción en el formulario, pero no saben lo que yo' estoy haciendo mal Lo que me ha molestado más es que tengo un ejemplo que lo hace perfectamente: Example Page

Si quieres ver mi problema vivir, ir a stormink.net (mi sitio) y echa un vistazo a la barra lateral donde dice "Envíame y correo electrónico "y" Suscripción RSS ". Ambas son formas en las que intento que esto funcione.

Answer 1

Sólo manejar el envío del formulario en el evento submit, y volver falsa:

$('#contactForm').submit(function() { 
sendContactForm(); 
return false; 
}); 

usted no necesita más el evento onclick en el botón de envío:

<input class="submit" type="submit" value="Send" /> 

Answer 2

Parece que se está perdiendo un return false.

Answer 3

aquí:

function submitClick(e) 
{ 
    e.preventDefault(); 
    $("#messageSent").slideDown("slow"); 
    setTimeout('$("#messageSent").slideUp(); 
    $("#contactForm").slideUp("slow")', 2000); 
} 

$(document).ready(function() { 
    $('#contactSend').click(submitClick); 
}); 

En lugar de usar el evento onClick, usará un evento 'clic' h andler usa jQuery para enviar el botón (o el botón que corresponda), que llevará submitClick como una devolución de llamada. Pasamos el evento a la devolución de llamada para llamar al preventDefault, que es lo que evitará que el clic envíe el formulario.

Answer 4

Una solución alternativa sería no utilizar la etiqueta de formulario y manejar el evento de clic en el botón Enviar a través de jquery. De esta forma no habrá ninguna actualización de página, pero al mismo tiempo hay una desventaja: el botón "enter" para la sumisión no funciona y tampoco en los móviles no obtendrás un botón de "ir" (un estilo en algunos móviles). Así que adhiérase al uso de la etiqueta de formulario y use la respuesta aceptada.

Answer 5

En la etiqueta de apertura de su formulario, establezca una acción de atributos de este modo:

<form id="contactForm" action="#">