Keep auto created fields shown after reload

Question

I have a javscript code that create fields based on select menus

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

Is there any way to keep auto created fields shown after page reload ? Because, for now, if i reload the page for another search, this fields disappear.

Before/After search:

Fields values are sent by GET method.

Answer 1

There are many ways of doing this. I would write a cookie. A cookie is data written to the user's browser and will persist between requests. Cookies are a great way to store data and there are already API's in javascript to do so. You can write to the cookie by assigning to document.cookie. As your working with a form I would serialize an object that represents the current state of your form.

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

When the page loads you can check your value

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

Now that we know how to store a cookie we need to figure out what to store in the cookie. To do this I would write two functions. The first function lets call it functionThatBuildsTheFormFromObject() would accept an object. I would use the following object. Note here that for each adult and child we use a value in an array.

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

With this object let's create the form

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 now all that is required is to white functions to create all the fields which in part you have already done. Going the other way I would define a function that will give you the current values of your form. Check this Convert form data to JavaScript object with jQuery question as it does exactly what you need. I would call this function serializeForm(). I would also look at setting the cookie each time the form changed. That way when ever the user refreshes their browser the form should always be updated. You might also think about providing the user a reset form button too incase they want to start again.