Empêcher la redirection de forme ou la mise à jour lors de la soumission?

J'ai cherché dans un tas de pages, mais je ne trouve pas mon problème, alors j'ai dû faire une publication.

J'ai un formulaire qui a un bouton de soumission, et lorsqu'il est soumis, je le souhaite NE PAS actualiser ou rediriger. Je veux simplement 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 mal. Ce qui m'a beaucoup agi, c'est que j'ai un exemple qui le fait parfaitement: Exemple de page

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

Suivez simplement la présentation du formulaire sur l'événement de soumission et renvoyez faux:

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

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

 <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 un gestionnaire d'événements «cliquer» à l'aide de jQuery au bouton de soumission (ou n'importe quel bouton), ce qui nécessitera l'envoiCliquez comme rappel. Nous passons l'événement au rappel pour appeler preventDefault , ce qui empêchera le clic de soumettre le formulaire.

Il semble que vous manquez un return false .

Dans la balise d'ouverture de votre formulaire, définissez un attribut d'action de la manière suivante:

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

Une autre solution serait de ne pas utiliser l'étiquette de formulaire et de gérer l'événement de clic sur le bouton de soumission via jquery. De cette façon, il n'y aura pas de rafraîchissement de page, mais en même temps il y a un inconvénient que le bouton «entrer» pour la soumission ne fonctionnera pas et, sur les mobiles, vous ne recevrez pas de bouton aller (un style dans certains mobiles). Accordez-vous à l'utilisation de l'étiquette de formulaire et utilisez la réponse acceptée.