web-dev-qa-db-fra.com

Comment empêcher la boîte de dialogue "Confirmer la soumission du formulaire"?

Comment puis-je nettoyer les informations d'un formulaire après l'envoi afin que cette erreur ne s'affiche pas après l'actualisation d'une page?

Voir l'image (de chrome):

Le dialogue a le texte:

La page que vous cherchez a utilisé
informations que vous avez entrées. Revenant à cela
page pourrait provoquer une action que vous avez pris pour être
répété. Voulez-vous continuer?

Je veux que ce dialogue n'apparaisse pas.

phpjavascriptjquerycodeigniter
17
Martin Rose

Edit: Cela fait quelques années que j'ai posté cette réponse, et même si j'ai eu quelques votes positifs, je ne suis pas vraiment satisfait de ma réponse précédente, je l'ai donc complètement refaite. J'espère que ça aide.

Quand utiliser GET et POST:

Une façon de supprimer ce message d'erreur consiste à faire en sorte que votre formulaire utilise GET au lieu de POST. N'oubliez pas qu'il s'agit de pas toujours une solution appropriée} (lire ci-dessous).

Utilisez toujours POST si vous effectuez une action que vous ne voulez pas répéter, si des informations sensibles sont en cours de transfert ou si votre formulaire contient un fichier téléchargé ou si la longueur de toutes les données envoyées est plus long que ~ 2000 caractères .

Voici des exemples d'utilisation de POST:

  • Un formulaire de connexion
  • Un formulaire de contact
  • Un formulaire de paiement
  • Quelque chose qui ajoute, édite ou supprime des entrées d'une base de données
  • Un téléchargeur d'image (notez que si vous utilisez GET avec un champ <input type="file">, seul le nom du fichier sera envoyé au serveur, dont 99,73% du temps n'est pas ce que vous voulez.)
  • Un formulaire avec plusieurs champs (qui créerait une longue URL si vous utilisez GET)

Dans tous les cas, vous ne souhaitez pas que les utilisateurs actualisent la page et renvoient les données. Si vous envoyez des informations sensibles, utiliser GET ne serait pas seulement inapproprié, ce serait un problème de sécurité (même si le formulaire est envoyé par AJAX) puisque l'élément sensible (par exemple, le mot de passe de l'utilisateur) est envoyé. dans l'URL et apparaîtra donc dans les journaux d'accès au serveur.

Utilisez GET pour faire autre chose. Cela signifie que, si cela vous est égal si cela est répété, pour tout ce pour quoi vous pourriez fournir un lien direct, lorsqu'aucune information sensible n'est transférée, lorsque vous êtes à peu près sûr que votre longueur d'URL ne va pas devenir incontrôlable et lorsque vos formulaires ne contiennent aucun fichier téléchargé.

Les exemples incluent:

  • Effectuer une recherche dans un moteur de recherche
  • Un formulaire de navigation pour naviguer sur le site
  • Effectuer des actions uniques en utilisant un mot de passe nonce ou à usage unique (tel qu'un lien "désabonnement" dans un courrier électronique).

Dans ces cas, POST serait complètement inapproprié. Imaginez si les moteurs de recherche utilisaient POST pour leurs recherches. Vous recevrez ce message chaque fois que vous actualiserez la page et vous ne pourrez pas simplement copier et coller l'URL des résultats à des personnes, elles devront remplir manuellement le formulaire elles-mêmes.

Si vous utilisez POST:

Pour moi, dans la plupart des cas, le simple fait d'ouvrir la boîte de dialogue "Confirmer la soumission du formulaire" indique qu'il existe un défaut de conception. De par la nature même de POST utilisée pour exécuter des actions destructives, les concepteurs Web doivent empêcher les utilisateurs de les exécuter plusieurs fois en actualisant la page par inadvertance (ou de manière intentionnelle). De nombreux utilisateurs ne savent même pas ce que cette boîte de dialogue signifie et cliquent simplement sur "Continuer". Et si c'était après une demande de "soumettre le paiement"? Le paiement est-il envoyé à nouveau?

Donc que fais-tu? Heureusement, nous avons le modèle de conception Post/Redirect/Get . L'utilisateur soumet une demande POST au serveur, celui-ci redirige le navigateur de l'utilisateur vers une autre page, qui est ensuite extraite à l'aide de GET.

Voici un exemple simple utilisant PHP:

if(!empty($_POST['username'] && !empty($_POST['password'])) {
    $user = new User;
    $user->login($_POST['username'], $_POST['password']);

    if ($user->isLoggedIn()) {
        header("Location: /admin/welcome.php");
        exit;
    }
    else {
        header("Location: /login.php?invalid_login");
    }
}

Notez que dans cet exemple, même lorsque le mot de passe est incorrect, je suis toujours redirigé vers le formulaire de connexion. Pour afficher un message de connexion non valide à l'utilisateur, procédez comme suit:

if (isset($_GET['invalid_login'])) {
    echo "Your username and password combination is invalid";
}
16
Mike

Cela n'a rien à voir avec votre forme ou les valeurs qu'il contient. Il est déclenché par le navigateur pour empêcher l'utilisateur de répéter la même demande avec les données mises en cache. Si vous devez réellement activer l'actualisation de la page de résultats, vous devez rediriger l'utilisateur, soit via PHP (header('Location:result.php');), soit via un autre langage côté serveur que vous utilisez. La solution de balise méta devrait également fonctionner pour désactiver le renvoi lors de l'actualisation.

7
zatatatata

Après avoir traité la page POST, redirigez l'utilisateur vers la même page.

Sur http://test.com/test.php

header('Location: http://test.com/test.php');

Cela éliminera la boîte, car l'actualisation de la page ne renverra pas les données.

6
Garrett Smallwood

J'ai eu une situation où je ne pouvais utiliser aucune des réponses ci-dessus. Mon cas impliquait de travailler avec la page de recherche où les utilisateurs obtiendraient "confirmer la soumission du formulaire" si on cliquait dessus après la navigation dans les résultats de recherche. J'ai écrit le javascript suivant qui a contourné le problème. Ce n'est pas une bonne solution, car il est un peu scintillant, et cela ne fonctionne pas avec IE8 ou une version antérieure. Néanmoins, cela pourrait être utile ou intéressant pour quelqu'un qui traite de cette question.

jQuery(document).ready(function () {

//feature test
if (!history)
    return;

var searchBox = jQuery("#searchfield");

    //This occurs when the user get here using the back button
if (history.state && history.state.searchTerm != null && history.state.searchTerm != "" && history.state.loaded != null && history.state.loaded == 0) {

    searchBox.val(history.state.searchTerm);

    //don't chain reloads
    history.replaceState({ searchTerm: history.state.searchTerm, page: history.state.page, loaded: 1 }, "", document.URL);

    //perform POST
    document.getElementById("myForm").submit();

    return;
}

    //This occurs the first time the user hits this page.
history.replaceState({ searchTerm: searchBox.val(), page: pageNumber, loaded: 0 }, "", document.URL);

});
1
Felix Steiny

Il semble que vous cherchiez le modèle Post/Redirect/Get .

Une autre solution consiste à ne plus utiliser la redirection.

Vous pouvez traiter et afficher le résultat du traitement immédiatement sans alerte de confirmation POST. Vous devriez juste manipuler l'objet d'historique du navigateur:

history.replaceState("", "", "/the/result/page")

Voir Complet ou Court Réponses

0
Eugen Konkov

J'ai eu le même problème,

cela a fonctionné pour moi,

echo("<script>location.href = 'http://localhost/pagename.html';</script>");
0
Sachi.Dila

Vous pouvez essayer d’utiliser des appels AJAX avec jQuery. Comme comment youtube ajoute votre commentaire sans rafraîchir. Cela éliminerait le problème de rafraîchissement général. 

Vous devez envoyer les informations nécessaires via l'appel ajax.
.__ Je vais utiliser le commentaire youtube comme exemple.

$.ajax({
    type: 'POST',
    url: 'ajax/comment-on-video.php',
    data: {
        comment: $('#idOfInputField').val();
     },
    success: function(obj) {
        if(obj === 'true') {
            //Some code that recreates the inserted comment on the page.
        }
    }
});

Vous pouvez maintenant créer le fichier comment-on-video.php et créer quelque chose comme ceci:

<?php
    session_start();

    if(isset($_POST['comment'])) {
        $comment = mysqli_real_escape_string($db, $_POST['comment']);
        //Given you are logged in and store the user id in the session.
        $user = $_SESSION['user_id'];

        $query = "INSERT INTO `comments` (`comment_text`, `user_id`) VALUES ($comment, $user);";
        $result = mysqli_query($db, $query);

        if($result) {
            echo true;
            exit();
        }
    }
    echo false;
    exit();
?>
0
Kerwin Sneijders