web-dev-qa-db-fra.com

Empêcher la redirection du formulaire OR actualiser lors de l'envoi?)

J'ai parcouru de nombreuses 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 ne souhaite pas qu'il soit actualisé OR redirect. 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 action dans le formulaire, mais je ne sais pas ce que je fais mal. Ce qui m'a le plus énervé, 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 consultez la barre latérale où il est écrit "Envoie-moi et un courrier électronique" et "Abonnement RSS". Ce sont deux formes sur lesquelles j'essaie de faire travailler cela.

javascriptjqueryhtmlforms
89
Ian Storm Taylor

Il suffit de gérer la soumission du formulaire lors de l'événement submit et de renvoyer false:

$('#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" />
171
CMS

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 allez associer un gestionnaire d'événement 'click' à l'aide de jQuery au bouton d'envoi (ou autre), ce qui aura pour effet de soumettre submitClick. Nous passons l'événement au rappel pour appeler preventDefault , ce qui empêchera le clic de soumettre le formulaire.

18
karim79

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

<form id="contactForm" action="#">
14
Brian Loughnane

On dirait qu'il vous manque un return false.

10
Jesse Kochis

Une autre solution consisterait à ne pas utiliser de balise de formulaire ni à gérer l'événement click sur le bouton d'envoi via jquery. De cette façon, il n'y aura pas d'actualisation de page, mais en même temps, il y a un inconvénient: le bouton "Entrée" pour la soumission ne fonctionne pas et vous ne recevrez pas non plus de bouton "Aller" (un style sur certains mobiles). Tenez-vous-en à l’utilisation de balises de formulaire et utilisez la réponse acceptée.

3
Shishir Arora

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

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

Vous devez utiliser l'événement submit au lieu de l'événement click. Dans ce cas, une fenêtre contextuelle s'affichera automatiquement et demandera " 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 mentionné précédemment , return false arrêterait la propagation (c’est-à-dire que plus de gestionnaires seraient 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.

Donc si vous voulez vous débarrasser de ces fenêtres contextuelles par défaut , utilisez l'événement click du 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
3
CPHPython