web-dev-qa-db-fra.com

Comment recharger la page en cours sans perdre aucune donnée de formulaire?

Puis-je recharger la page en cours sans perdre aucune donnée de formulaire? J'ai utilisé..

window.location = window.location.href;

et 

window.location.reload(true);

Mais ces deux choses ne peuvent pas obtenir des données de formulaire plus tôt pour moi. Qu'est-ce qui ne va pas ? Lorsque vous actualisez le navigateur manuellement, tout va bien (je ne perds aucune donnée de formulaire). S'il vous plaît guidez-moi comment le comprendre.

Voici mon code complet ...

<div class="form-actions">
        <form>
            <table cellpadding = "5" cellspacing ="10">
                <tr class="control-group">
                    <td style="width: 100px;">
                        <div>Name:&nbsp;<font color="red">(*)</font></div>
                    </td>
                    <td>
                        <input type="text" id="inputName" placeholder="Name" required>
                    </td>
                </tr>
                <tr class="control-group">
                    <td>
                        <div>Email:&nbsp;<font color="red">(*)</font></div>
                    </td>
                    <td>
                        <input class="span3" placeholder="[email protected]" id= "inputEmail" type="email" required>
                    </td>
                </tr>
                <tr class="control-group">
                    <td>
                        <div>Phone:&nbsp;</div>
                    </td>
                    <td>
                        <input type="text" id="inputPhone" placeholder="phone number">
                    </td>
                </tr>
                <tr class="control-group">
                    <td>
                        <div>Subject:&nbsp;<font color="red">(*)</font></div>
                    </td>
                    <td>
                        <input type="text" id="inputSubject" placeholder="Subject" required>
                    </td>
                </tr>
                <tr class="control-group">
                    <td colspan ="2">
                        <div>
                            <div>Detail:&nbsp;</div>
                            <div class="controls">
                                <textarea id="inputDetail"></textarea>
                            </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                    <div>
                        <label style="font-weight: bold;" class="checkbox"> <input id="confirmCheck" value="" type="checkbox">
                                I Agree to the Personal information handling policy
                        </label>
                    </div>
                    <div id = "alert_placeholder"></div>
                        <div class="acceptment">
                            [Personal information handling policy]<br> <br>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div align="center">
                            <button id="btnConfirm" class="btn btn-primary">Confirm</button>
                            <input type="reset" style="width: 65px; height: 27px;" id="btnReset" class="btn">
                        </div>
                    </td>
                </tr>
            </table>
        </form>
    </div>

Et à mon fichier JS ..

function bind() {
$('#btnConfirm').click(function(e) {
    if ($('#confirmCheck').is(":checked")) {
        getConfirmationForSendFAQ();
    }
    else {
        e.preventDefault();
        showalert("You should accept \"Personal Information Policy\" !", "alert-error");
    }
});};function getConfirmationForSendFAQ() {
    var name = $('#inputName').val();
    var email = $('#inputEmail').val();
    var phone = $('#inputPhone').val();
    var subject = $('#inputSubject').val();
    var detail = $('#inputDetail').val();

    $('.form-actions').empty();
    html = [];
    html.Push("<table cellpadding ='8' class = 'submitInfo'");
    html.Push("<tr>");
    html.Push("<td class = 'title'>Name:</div>");
    html.Push("<td class = 'value'>"+ name +"</td>");
    html.Push("</tr>");

    html.Push("<tr>");
    html.Push("<td class = 'title'>Email Address:</div>");
    html.Push("<td class = 'value'>"+ email +"</td>");
    html.Push("</tr>");

    if (phone.trim().length > 0) {
        html.Push("<tr>");
        html.Push("<td class = 'title'>Phone No:</div>");
        html.Push("<td class = 'value'>"+ phone +"</td>");
        html.Push("</tr>");
    }

    html.Push("<tr>");
    html.Push("<td class = 'title'>Subject:</div>");
    html.Push("<td class = 'value'>"+ subject +"</td>");
    html.Push("</tr>");

    html.Push("<tr>");
    html.Push("<td class = 'title'>Detail Info:</div>");
    html.Push("<td class = 'value'>"+ detail +"</td>");
    html.Push("</tr>");

    html.Push("<tr>");
    html.Push("<td colspan='2'><div align = 'center'>");
    html.Push("<button id='btnSend' class='btn btn-primary' style='width: 65px;'>Send</button>");
    html.Push("<button id='btnReturn' class='btn btn-inverse' style='width: 65px; height: 27px; margin-left: 5px;'>Return</button>");
    html.Push("</div></td></tr>");

    html.Push("</table>");
    $('.form-actions').append(html.join(''));
    $('#btnReturn').click(function(e) {
        // HERE I WANT TO KNOW HOW TO DO.....
    });
    $('#btnSend').click(function(e) {
        alert("Doom");
    });}
javascriptjqueryhtmlhtml5jquery-ui
50
Cataclysm

Vous pouvez utiliser divers mécanismes de stockage locaux pour stocker ces données dans le navigateur, tels que Stockage Web, IndexedDB, WebSQL (obsolète) et File API (obsolète et disponible uniquement dans Chrome) (et UserData avec IE).

La solution la plus simple et la plus largement prise en charge est WebStorage où vous disposez d'un stockage persistant (localStorage) ou d'une session (sessionStorage) qui est en mémoire jusqu'à la fermeture du navigateur. Les deux partagent la même API.

Vous pouvez par exemple (simplifié) faire quelque chose comme ceci lorsque la page est sur le point de recharger:

window.onbeforeunload = function() {
    localStorage.setItem("name", $('#inputName').val());
    localStorage.setItem("email", $('#inputEmail').val());
    localStorage.setItem("phone", $('#inputPhone').val());
    localStorage.setItem("subject", $('#inputSubject').val());
    localStorage.setItem("detail", $('#inputDetail').val());
    // ...
}

Le stockage Web fonctionne de manière synchrone, donc peut fonctionner ici. Vous pouvez éventuellement stocker les données pour chaque événement de flou sur les éléments où les données sont entrées.

Au chargement de la page, vous pouvez vérifier:

window.onload = function() {

    var name = localStorage.getItem("name");
    if (name !== null) $('#inputName').val("name");

    // ...
}

getItem renvoie null si les données n'existent pas.

Utilisez sessionStorage au lieu de localStorage si vous souhaitez stocker uniquement temporaire.

48
user1693593

J'ai modifié le code de K3N pour qu'il réponde à mes besoins et j'ai ajouté quelques commentaires pour aider les autres à comprendre le fonctionnement de sessionStorage. 

<script>
    // Run on page load
    window.onload = function() {

        // If sessionStorage is storing default values (ex. name), exit the function and do not restore data
        if (sessionStorage.getItem('name') == "name") {
            return;
        }

        // If values are not blank, restore them to the fields
        var name = sessionStorage.getItem('name');
        if (name !== null) $('#inputName').val(name);

        var email = sessionStorage.getItem('email');
        if (email !== null) $('#inputEmail').val(email);

        var subject= sessionStorage.getItem('subject');
        if (subject!== null) $('#inputSubject').val(subject);

        var message= sessionStorage.getItem('message');
        if (message!== null) $('#inputMessage').val(message);
    }

    // Before refreshing the page, save the form data to sessionStorage
    window.onbeforeunload = function() {
        sessionStorage.setItem("name", $('#inputName').val());
        sessionStorage.setItem("email", $('#inputEmail').val());
        sessionStorage.setItem("subject", $('#inputSubject').val());
        sessionStorage.setItem("message", $('#inputMessage').val());
    }
</script>
20
Doug Wilhelm

Trouvez ceci sur GitHub. Spécialement créé pour cela.

https://Gist.github.com/zaus/4717416

7
Rajan Rawal

Cette réponse m'a été extrêmement utile et évite de parcourir chaque champ manuellement:

Utilisation de jQuery pour stocker l'état d'un formulaire compliqué

6
Julian K
window.location.reload() // without passing true as argument

travaille pour moi.

4
Naveen Agarwal

Comme le mentionnent certaines réponses, localStorage est une bonne option et vous pouvez le faire vous-même, mais si vous recherchez une option raffinée, il existe déjà un projet sur GitHub appelé garlic.js .

3
nickytonline

En général, je soumets automatiquement mon propre formulaire au serveur et je recharge la page avec des arguments complétés Remplacez les arguments d’espace réservé par les paramètres reçus par votre serveur.

3
moutonjr

D'accord avec le stockage local HTML5 ..___. Ceci est un exemple de code

2
dikkini

Vous devez soumettre des données et recharger une page (formulaire de rendu côté serveur avec des données), un simple rechargement ne préservera pas les données. C’est juste que votre navigateur peut mettre en cache les données du formulaire lors de l’actualisation manuelle (différent de celui des navigateurs). 

2
Dileep

Vous pouvez utiliser localStorage ( http://www.w3schools.com/html/html5_webstorage.asp ) pour enregistrer des valeurs avant d'actualiser la page.

2
paka

Vous pouvez utiliser une bibliothèque que j'ai écrite, FormPersistence.js , qui gère la (dés) sérialisation des formulaires en enregistrant les valeurs dans le stockage local/de session. Cette approche est similaire à celle liée dans une autre réponse mais elle ne nécessite pas jQuery et n'enregistre pas les mots de passe en clair dans le stockage Web.

let myForm = document.getElementById('#my-form')
window.addEventListener('beforeunload', () => FormPersistence.save(myForm, true))
window.addEventListener('onload', () => FormPersistence.load(myForm, true))

Si vous souhaitez effacer les données stockées lors d'une soumission de formulaire réussie:

myForm.addEventListener('submit', () => FormPersistence.clearStorage(myForm, true))

Le deuxième paramètre de chaque fonction FormPersistence définit s'il faut utiliser le stockage local (false/absent) ou le stockage de session (true). Dans votre cas, le stockage de session est probablement plus approprié.

0
Vulcan

Enregistrez un écouteur d'événement pour l'événement keyup:

document.getElementById("input").addEventListener("keyup", function(e){
  var someVarName = input.value;
  sessionStorage.setItem("someVarKey", someVarName);
  input.value = sessionStorage.getItem("someVarKey");
});
0
Himanshu Agrawal