Halten Auto erstellt Felder nach dem Neuladen gezeigt

Question

Ich habe einen javscript Code, Felder erstellen basierend auf ausgewählten Menüs

HTML

<div class="container"> 
    <div id="selected_form_code"> 
      <select id="select_btn"> 
        <option value="0">--How many rooms ?--</option> 
        <option value="1">1</option> 
        <option value="2">2</option> 
        <option value="3">3</option> 
        <option value="4">4</option> 
        <option value="5">5</option> 
        <option value="6">6</option> 
      </select> 
    </div> 
    <div id="form_submit"> 
    <!-- Dynamic Registration Form Fields Creates Here --> 
    </div> 
</div> 

JS

function get_chambre_html(cn) 
{ 
    return "<div>" 
     + "<b>Chambre " + cn + ":</b> " 
     + "<br/>Adultes: <select id='adultes" + cn + "'>" 
     + "<option value='0'>--How many adults ?--</option>" 
     + "<option value='1'>1</option>" 
     + "<option value='2'>2</option></select>" 
     + "<br/>Enfants: <select id='enfants" + cn + "'>" 
     + "<option value='0'>--How many enfants ?--</option>" 
     + "<option value='1'>1</option>" 
     + "<option value='2'>2</option><option value='3'>3</option><option value='4'>4</option></select>" 
     + "<div id='ages" + cn + "'></div>" // empty block for further usage 
    +"</div>"; 
} 

$(document).ready(function() 
{ 
    $('select#select_btn').change(function() 
    { 
    var sel_value = $('option:selected').val(); 
    $("#form_submit").empty(); //Resetting Form 
    // Below Function Creates Input Fields Dynamically 
    create(sel_value); 
    // Appending Submit Button To Form 
    }); 

    function create(sel_value) 
    { 
    for (var i = 1; i <= sel_value; i++) 
    { 
     $("div#form1").append($("#form_submit").append(get_chambre_html(i))); 
     $("div#form1").append($("#form_submit").append("<div id='ages"+i+"'/>")); 
     $('select#enfants'+i).change(function(){ 
     var infants = this.value; 
     var i=this.id.substr(7); // 7 = strlen of 'enfants' 
     $('#ages'+i).empty(); 
     for(var j=0; j<infants; j++) 
      $('#ages'+i).append("Age enfant "+(j+1)+" : <select><option>1 an</option><option>2 ans</option><option>3 ans</option></select>"); 
     }); 
    } 
    }; 
}); 

Gibt es eine Möglichkeit Auto zu halten erstellt Felder nach dem Neuladen der Seite angezeigt? Weil jetzt, wenn ich die Seite für eine andere Suche neu lade, diese Felder verschwinden.

Vorher/Nachher Suche:

Felder Werte von GET-Methode gesendet werden.

Answer 1

Es gibt viele Möglichkeiten, dies zu tun. Ich würde einen Keks schreiben. Ein Cookie sind Daten, die in den Browser des Benutzers geschrieben werden und zwischen den Anfragen bestehen bleiben. Cookies sind eine gute Möglichkeit, Daten zu speichern und es gibt bereits APIs in Javascript, um dies zu tun. Sie können in den Cookie schreiben, indem Sie document.cookie zuweisen. Wenn Sie mit einem Formular arbeiten, würde ich ein Objekt serialisieren, das den aktuellen Zustand Ihres Formulars darstellt.

document.cookie = JSON.stringify({ destination: 'BERCELONE' }); 

Wenn die Seite geladen Sie Ihren Wert überprüfen

var currentFormState = JSON.parse(document.cookie); 
functionThatBuildsTheFormFromObject(currentFormState); 

Jetzt, da wir wissen, wie ein Cookie zu speichern, müssen wir herausfinden, was in den Cookie zu speichern. Um dies zu tun, würde ich zwei Funktionen schreiben. Die erste Funktion ruft functionThatBuildsTheFormFromObject() auf, würde ein Objekt akzeptieren. Ich würde das folgende Objekt verwenden. Beachten Sie, dass wir für jeden Erwachsenen und jedes Kind einen Wert in einem Array verwenden.

{ 
    destination : "Berclona", 
    depatureDate : "30-08-2016", 
    adults : [], 
    children : [ 5, 8], 
    seniors : [ 55, 58 ] 
} 

Mit diesem Objekt lassen Sie uns das Formular erstellen

functionThatBuildsTheFormFromObject (theFormObject) { 
    createDestinationField(theFormObject.destination); 
    createDepatureDateField(theFormObject.depatureDate); 

    theFormObject.adults.forEach(adultAge => { 
     createSelectAgeField('adult', adultAge) 
    }) 

    theFormObject.children.forEach(childAge => { 
     createSelectAgeField('child', childAge) 
    }) 

    theFormObject.seniors.forEach(seniorAge => { 
     createSelectAgeField('senior', seniorAge) 
    }) 
} 

So, jetzt alles, was erforderlich ist, um weiße Funktionen ist es, alle Felder zu erzeugen, die zum Teil bereits getan haben. Anders herum würde ich eine Funktion definieren, die Ihnen die aktuellen Werte Ihres Formulars liefert. Überprüfen Sie diese Convert form data to JavaScript object with jQuery Frage, da es genau das tut, was Sie brauchen. Ich würde diese Funktion serializeForm() nennen. Ich würde auch versuchen, den Cookie jedes Mal zu setzen, wenn sich das Formular ändert. Auf diese Weise sollte das Formular immer aktualisiert werden, wenn der Benutzer den Browser aktualisiert. Sie könnten auch darüber nachdenken, dem Benutzer einen Reset-Formular-Button zu geben, um ihn erneut zu starten.