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

Il suffit de gérer la soumission du formulaire sur le soumettre et renvoie false :

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

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

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

Answer 2

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énement "click" utilisant jQuery pour le bouton submit (ou tout autre bouton), qui prendra submitClick comme callback. Nous passons l'événement au callback pour appeler preventDefault C'est ce qui empêchera le clic de soumettre le formulaire.

Answer 3

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

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

Answer 4

On dirait qu'il vous manque un return false .

Answer 5

Si vous voulez voir les erreurs du navigateur par défaut qui sont affichées Par exemple, ceux déclenchés par les attributs HTML (qui apparaissent avant tout traitement JS du code client) :

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

Vous devez utiliser le submit au lieu de l'événement click événement. Dans ce cas, une popup 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 a mentionné précédemment , return false arrêterait la propagation (c'est-à-dire que si d'autres gestionnaires sont 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 sera toujours exécutée en premier. Même avec un return false à la fin.

Alors si vous voulez vous débarrasser de ces pop-ups par défaut. utilisez le click 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