it-swarm.com.de

Wie kann ich die aktuelle Seite neu laden, ohne Formulardaten zu verlieren?

Kann ich die aktuelle Seite neu laden, ohne Formulardaten zu verlieren? Ich benutzte..

window.location = window.location.href;

und 

window.location.reload(true);

Aber diese zwei Dinge können für mich keine früheren Formdaten erhalten. Was ist falsch ? Wenn Sie den Browser manuell aktualisieren, ist dies in Ordnung (ich verliere keine Formulardaten). Bitte führe mich, wie ich es herausfinden kann.

Hier ist mein vollständiger Code ...

<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>

Und bei meiner JS-Datei ..

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");
    });}
50
Cataclysm

Sie können verschiedene lokale Speichermechanismen verwenden, um diese Daten im Browser zu speichern, z. B. Web Storage, IndexedDB, WebSQL (veraltet) und Datei-API (veraltet und nur in Chrome verfügbar) (und UserData with IE).

Die einfachste und am weitesten verbreitete Lösung ist WebStorage, bei der Sie über permanenten Speicher (localStorage) oder sitzungsbasiert (sessionStorage) verfügen, der sich im Speicher befindet, bis Sie den Browser schließen. Beide haben dieselbe API.

Sie können beispielsweise (vereinfacht) Folgendes tun, wenn die Seite gerade neu geladen wird:

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());
    // ...
}

Web Storage arbeitet synchron, so dass hier funktionieren kann. Optional können Sie die Daten für jedes Unschärfeereignis in den Elementen speichern, in die die Daten eingegeben werden.

Beim Laden der Seite können Sie Folgendes überprüfen:

window.onload = function() {

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

    // ...
}

getItem gibt null zurück, wenn die Daten nicht vorhanden sind.

Verwenden Sie sessionStorage anstelle von localStorage, wenn Sie nur temporär speichern möchten.

48
user1693593

Ich habe den Code von K3N geändert, um für meine Zwecke zu funktionieren, und ich habe ein paar Kommentare hinzugefügt, um anderen zu helfen, herauszufinden, wie sessionStorage funktioniert. 

<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

Finden Sie dies auf GitHub. Speziell für sie erstellt.

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

7
Rajan Rawal

Diese Antwort war sehr hilfreich für mich und erspart die Mühe, jedes Feld manuell durchzugehen:

jQuery verwenden, um den Status eines komplizierten Formulars zu speichern

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

funktioniert bei mir.

4
Naveen Agarwal

Wie einige Antworten erwähnen, ist localStorage eine gute Option und Sie können es sicherlich selbst tun, aber wenn Sie nach einer ausgefeilten Option suchen, gibt es auf GitHub bereits ein Projekt, das dies als Knoblauch) bezeichnet .js .

3
nickytonline

Normalerweise sende ich automatisch mein eigenes Formular an den Server und lade die Seite mit gefüllten Argumenten erneut. Ersetzen Sie die Platzhalterargumente durch die Parameter, die Ihr Server erhalten hat.

3
moutonjr

Stimmen Sie dem lokalen Speicher für HTML5 zu ../_. Dies ist ein Beispielcode

2
dikkini

Sie müssen Daten senden und die Seite neu laden (serverseitiges Formular mit Daten rendern). Beim erneuten Laden werden keine Daten gespeichert. Es ist nur so, dass Ihr Browser die Formulardaten bei der manuellen Aktualisierung zwischenspeichert (nicht bei allen Browsern). 

2
Dileep

Sie können localStorage ( http://www.w3schools.com/html/html5_webstorage.asp ) verwenden, um die Werte zu speichern, bevor Sie die Seite aktualisieren.

2
paka

Sie können eine Bibliothek verwenden, die ich geschrieben habe, FormPersistence.js , die die Serialisierung von Form (de) durch Speichern von Werten im lokalen/Sitzungsspeicher übernimmt. Dieser Ansatz ähnelt dem der in einer anderen Antwort verlinkt ist , er benötigt jedoch kein jQuery und speichert keine Klartextpasswörter im Webspeicher.

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

Wenn Sie die gespeicherten Daten nach erfolgreicher Formularübermittlung löschen möchten:

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

Der zweite Parameter jeder FormPersistence-Funktion definiert, ob lokaler Speicher (false/abwesend) oder Sitzungsspeicher (true) verwendet werden soll. In Ihrem Fall ist der Sitzungsspeicher wahrscheinlich geeigneter.

0
Vulcan

Registrieren Sie einen Ereignis-Listener für das Ereignis keyup:

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