web-dev-qa-db-fra.com

Empêcher la redirection après l'envoi du formulaire

J'ai un formulaire HTML qui envoie un e-mail avec PHP et qui l'envoie redirige vers cette page PHP Y a-t-il un moyen d'empêcher que cette redirection se produise? J'ai construit une animation avec jQuery que je veux avoir au lieu de rediriger. J'ai essayé de retourner false, mais cela ne fonctionnerait pas. Voici ma fonction:

$(function() {
    $('.submit').click(function() {
        $('#registerform').submit();
        return false;
    }); 
});

Voici la balise d'ouverture du formulaire:

<form id="registerform" action="submit.php" method="post">

Et le bouton d'envoi:

<input type="submit" value="SUBMIT" class="submit" />
jqueryhtmlformsredirect
20
Robert Pessagno

Vous devriez le poster avec ajax, cela l'empêchera de changer de page et vous obtiendrez toujours l'information.

$(function() {
    $('form').submit(function() {
        $.ajax({
            type: 'POST',
            url: 'submit.php',
            data: { username: $(this).name.value, 
                    password: $(this).password.value }
        });
        return false;
    }); 
})

Voir Publier de la documentation pour JQuery

34
Bruce Armstrong

Au lieu de renvoyer false, vous pouvez essayer event.preventDefault (); comme ça:

$(function() {
$('#registerform').submit(function(event) {
    event.preventDefault();
    $(this).submit();
    }); 
});
11
bozdoz

Utiliser Ajax

En utilisant la méthode jQuery Ajax request, vous pouvez envoyer les données de l’email à un script (submit.php). Utilisation de l'option de rappel success pour animer des éléments après l'exécution du script.

note - Je suggérerais d'utiliser l'objet de réponse ajax pour vérifier que le script a été exécuté avec succès.

$(function() {
    $('.submit').click(function() {
        $.ajax({
            type: 'POST',
            url: 'submit.php',
            data: 'password=p4ssw0rt',
            error: function()
            {
               alert("Request Failed");
            },
            success: function(response)
            {  
               //EXECUTE ANIMATION HERE
            } // this was missing
        });
        return false;
    }); 
})
5
Derek Adair
$('#registerform').submit(function(e) {
   e.preventDefault();
   $.ajax({
        type: 'POST',
        url: 'submit.php',
        data: $(this).serialize(),
        beforeSend: //do something
        complete: //do something
        success: //do something for example if the request response is success play your animation...
   });

})
5
Matricore

Si vous souhaitez que les informations du formulaire soient traitées par la page PHP, vous DEVEZ alors appeler cette page PHP. Pour éviter une redirection ou une actualisation dans ce processus, soumettez les informations du formulaire via AJAX. Peut-être utilisez-vous la boîte de dialogue jQuery pour afficher les résultats ou votre animation personnalisée.

5
mwotton

Sans savoir exactement ce que vous essayez d'accomplir ici, c'est difficile à dire, mais si vous passez le temps de résoudre ce problème avec javascript, une requête de AJAX sera votre meilleur pari. Toutefois, si vous souhaitez le faire complètement avec PHP, indiquez-le à la fin de votre script, et vous devriez le définir.

if(isset($_SERVER['HTTP_REFERER'])){
    header("Location: " . $_SERVER['HTTP_REFERER']);    
} else {
    echo "An Error";
}

La page sera toujours modifiée deux fois, mais l'utilisateur se terminera sur la page à l'origine de la demande. Ceci n’est même pas proche de la bonne façon de procéder, et je recommande fortement d’utiliser une requête AJAX, mais le travail sera fait.

4
Steven Zurek

Si vous pouvez exécuter javascript, ce qui semble être le cas, créez un nouveau iframe et publiez-le à la place. Vous pouvez faire <form target="iframe-id" ...> Ainsi, toutes les redirections auront lieu dans l'iframe et vous aurez toujours le contrôle de la page. 

L'autre solution est de faire aussi un post via ajax. Mais c'est un peu plus délicat si la page doit vérifier les erreurs ou quelque chose du genre. 

Voici un exemple:

$("<iframe id='test' />").appendTo(document.body);
$("form").attr("target", "test");
3
Amir Raminfar

Vous pouvez utiliser comme ci-dessous

e.preventDefault()

Si cette méthode est appelée, l'action par défaut de l'événement ne sera pas déclenchée.

Aussi, si je peux suggérer, lisez ceci: .prop () vs .attr ()

J'espère que cela vous aidera

exemple de code:

$('a').click(function(event){
    event.preventDefault();
    //do what you want
  }
1
gargAman

La réponse simple est d'envoyer votre appel à un script externe via la demande AJAX. Ensuite, gérez la réponse comme vous le souhaitez.

1
Parris Varney

Vous devrez probablement faire juste une demande Ajax à votre page. Et faire return false ne fait pas ce que vous pensez qu'il est en train de faire.

1
Lachezar

Vous devez mettre le retour à l'intérieur de l'appel submit ().

  $('.submit').click(function() {
     $('#registerform').submit(function () {
     sendContactForm();
     return false;
    });
    //Here you can do anything after submit
}
1
Juan

Tout comme Bruce Armstrong l'a suggéré dans sa réponse . Cependant, j'utiliserais FormData:

$(function() {
    $('form').submit(function() {
        var formData = new FormData($(this)[0]);
        $.ajax({
            type: 'POST',
            url: 'submit.php',
            data: formData,
            processData: false,
            contentType: false,
        });
        return false;
    }); 
})
1
flix

La conception de HTTP signifie que faire un POST avec des données retournera une page. Les concepteurs d'origine ont probablement prévu que cela soit une page de "résultat" de votre POST.

Il est normal qu'une application PHP revienne sur la même page POST, car elle peut non seulement traiter la demande POST, mais elle peut générer une page mise à jour basée sur le GET d'origine mais avec les nouvelles informations du POST. Cependant, rien n'empêche votre code de serveur de fournir une sortie complètement différente. Vous pouvez également POST sur une page entièrement différente. 

Si vous ne voulez pas la sortie, une méthode que j'ai déjà vue avant que AJAX décolle, était que le serveur renvoie un code de réponse HTTP de (je pense) 250. Cela s'appelle "Pas de contenu" et devrait faire en sorte que le navigateur ignore les données.

Bien sûr, la troisième méthode consiste à effectuer un appel AJAX avec les données que vous avez soumises.

1
staticsan