Empêcher la redirection de formulaire OU actualiser lors de l'envoi?

J'ai parcouru un tas de pages, mais je ne trouve pas mon problème, j'ai donc dû publier un message.

J'ai un formulaire qui a un bouton d'envoi, et une fois soumis, je veux qu'il ne soit PAS actualisé OU redirigé. Je veux juste que jQuery exécute une fonction.

Voici le formulaire:

<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>

Et voici le jQuery:

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

J'ai essayé avec et sans élément d'action sur le formulaire, mais je ne sais pas ce que je fais de mal. Ce qui m'a plus ennuyé, c'est que j'ai un exemple qui le fait parfaitement: Exemple de page

Si vous voulez voir mon problème en direct, allez sur stormink.net (mon site) et consultez la barre latérale où il est dit "Envoyez-moi et envoyez-moi un e-mail" et "Abonnement RSS". Les deux sont des formes sur lesquelles j'essaie de faire fonctionner cela.

Il suffit de gérer la soumission de formulaire à soumettre événement, et faux retour:

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

Vous n'avez plus besoin de l'événement onclick sur le bouton d'envoi:

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

Ici:

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

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

Au lieu d'utiliser l'événement onClick, vous utiliserez lier un gestionnaire d'événements "click" en utilisant jQuery au bouton d'envoi (ou à n'importe quel bouton), qui prendra submitClick comme un rappel. Nous transmettons l'événement au callback pour appeler preventDefault , ce qui empêchera le clic de soumettre le formulaire.

Dans la balise d'ouverture de votre formulaire, définissez un attribut d'action comme ceci:

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

Il semble qu'il vous manque un fichier return false.

Si vous souhaitez voir les erreurs de navigateur par défaut affichées , par exemple, celles déclenchées par des attributs HTML (apparaissant avant tout traitement JS de code client):

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

Vous devez utiliser l' submitévénement au lieu de l' clickévénement. Dans ce cas, une fenêtre contextuelle sera automatiquement affichée demandant " Veuillez remplir ce champ ". Même avec 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

Comme quelqu'un l'a mentionné précédemment , return falsearrêterait la propagation (c'est-à-dire que s'il y avait plus de gestionnaires attachés à la soumission du formulaire, ils ne seraient pas exécutés), mais, dans ce cas, l'action déclenchée par le navigateur s'exécutera toujours en premier. Même avec unreturn false à la fin.

Donc, si vous souhaitez vous débarrasser de ces fenêtres contextuelles par défaut , utilisez l' clickévénement sur le bouton d'envoi:

$('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

Une solution alternative serait de ne pas utiliser la balise de formulaire et de gérer l'événement de clic sur le bouton d'envoi via jquery. De cette façon, il n'y aura pas de rafraîchissement de la page mais en même temps il y a un inconvénient: le bouton "Entrée" pour la soumission ne fonctionnera pas et aussi sur les mobiles, vous n'obtiendrez pas de bouton aller (un style dans certains mobiles). Alors tenez-vous-en à l'utilisation de la balise form et utilisez la réponse acceptée.