Empêcher la redirection du formulaire ou le rafraîchissement lors de l'envoi ?

Question

J'ai cherché sur plusieurs pages, mais je n'ai pas trouvé mon problème, alors j'ai dû faire un post.

J'ai un formulaire qui a un bouton d'envoi, et quand il est envoyé, je veux qu'il ne soit PAS actualisé ou redirigé. 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 de mal. Ce qui m'ennuie le plus, c'est que j'ai un exemple qui le fait parfaitement : Page d'exemple

Si vous voulez voir mon problème en direct, allez à stormink.net (mon site) et vérifiez la barre latérale où il est indiqué "Envoyez-moi un courriel" et "Abonnement RSS". Il s'agit de deux formulaires sur lesquels j'essaie de faire fonctionner le système.

Answer 1

Une solution alternative serait de ne pas utiliser la balise form et de gérer l'événement de clic sur le bouton submit 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 "enter" pour la soumission ne fonctionnera pas et, sur les mobiles, vous n'aurez pas de bouton "go" (un style dans certains mobiles). Il faut donc s'en tenir à l'utilisation de la balise de formulaire et utiliser la réponse acceptée.

Answer 2

C'est un peu hors contexte, mais c'est lié au renouvellement du formulaire lors de l'actualisation de la page. Par exemple, un formulaire a pour action="/hello" et method=post et le formulaire est soumis en cliquant sur le bouton "submit" de type "submit".

Au niveau du contrôleur, on a 1. la méthode storeHello() avec RequestMapping value="/hello", RequestMethod.POST { return "redirect:/hello" ; } Et 2. méthode getHello() avec RequestMapping value="/hello", RequestMethod.GET

Lorsque l'utilisateur effectue le 1er envoi, la méthode storeHello() est appelée. À partir de cette méthode, il faut rediriger vers la méthode getHello() de type GET. Ainsi, chaque fois que la méthode refresh est utilisée, seule la méthode getHello() est appelée au lieu de la méthode storeHello() de type post. Cela évitera de soumettre à nouveau le formulaire.

Pour éviter de soumettre à nouveau le formulaire au contrôleur du printemps, rediriger vers la méthode avec le mapping de la requête comme "/hello", RequestMethod.GET en utilisant retourner "redirect:/hello" de la méthode RequestMapping value="/hello", RequestMethod.POST