¿Evitar la redirección del formulario O actualizar al enviar?

He buscado en un montón 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 que se actualice NI redireccione. Solo quiero que jQuery realice una función.

Aquí está el formulario:

<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í está el jQuery:

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

Lo intenté con y sin un elemento de acción en el formulario, pero no sé qué estoy haciendo mal. Lo que más me ha molestado es que tengo un ejemplo que lo hace a la perfección: Página de ejemplo

Si quieres ver mi problema en vivo, ve a stormink.net (mi sitio) y mira la barra lateral donde dice "Enviarme y enviar un correo electrónico" y "Suscripción RSS". Ambas son formas en las que estoy tratando de que esto funcione.

Simplemente maneje el envío del formulario en el evento de envío y devuelva falso:

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

Ya no necesitas el evento onclick en el botón de enviar:

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

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á enlazar un controlador de eventos de 'clic' usando jQuery al botón de enviar (o cualquier botón), que tomará submitClick como devolución de llamada. Pasamos el evento a la devolución de llamada para llamar a preventDefault , que es lo que evitará que el clic envíe el formulario.

En la etiqueta de apertura de su formulario, establezca un atributo de acción como este:

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

Parece que te falta un return false.

Si desea ver los errores predeterminados del navegador que se muestran , por ejemplo, los activados por atributos HTML (que aparecen antes de cualquier tratamiento JS de código de cliente):

<input name="o" required="required" aria-required="true" type="text">

Debería utilizar el submitevento en lugar del clickevento. En este caso, se mostrará automáticamente una ventana emergente solicitando " Por favor, complete este campo ". Incluso con preventDefault:

$('form').on('submit', function(event) {
   event.preventDefault();
   my_form_treatment(this, event);
}); // -> this will show up a "Please fill out this field" pop-up before my_form_treatment

Como alguien mencionó anteriormente , return falsedetendría la propagación (es decir, si hay más controladores adjuntos al envío del formulario, no se ejecutarán), pero, en este caso, la acción activada por el navegador siempre se ejecutará primero. Incluso con un return falseal final.

Entonces, si desea deshacerse de estas ventanas emergentes predeterminadas , use el clickevento en el botón enviar:

$('form input[type=submit]').on('click', function(event) {
   event.preventDefault();
   my_form_treatment(this, event);
}); // -> this will NOT show any popups related to HTML attributes

Una solución alternativa sería no usar la etiqueta de formulario y manejar el evento de clic en el botón de envío a través de jquery. De esta manera no habrá ninguna actualización de la página, pero al mismo tiempo hay una desventaja de que el botón "Enter" para el envío no funcionará y también en los móviles no obtendrá un botón de ir (un estilo en algunos móviles). Así que apégate al uso de la etiqueta de formulario y usa la respuesta aceptada.