Question

我有一个javscript代码，可以根据选择菜单创建字段

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

有没有办法在页面重新加载后显示自动创建的字段？因为，就目前而言，如果我重新加载页面以进行其他搜索，则此字段将消失。

搜索之前/之后：

字段值由GET方法发送。

Answer 1

有很多方法可以做到这一点。我会写一个cookie。 Cookie是写入用户浏览器的数据，将在请求之间保留。 Cookie是存储数据的绝佳方式，而javascript中已经存在API。您可以通过分配到document.cookie来写入cookie。当您使用表单时，我会序列化一个表示表单当前状态的对象。

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

当页面加载时，您可以检查您的值

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

现在我们知道如何存储cookie，我们需要弄清楚要存储在cookie中的内容。要做到这一点，我会写两个函数。第一个函数让它调用它functionThatBuildsTheFormFromObject()会接受一个对象。我会使用以下对象。请注意，对于每个成人和孩子，我们在数组中使用值。

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

使用此对象，我们创建表单

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

所以现在所需要的只是白色函数来创建你已经完成的所有字段。换句话说，我将定义一个函数，它将为您提供表单的当前值。检查一下 Convert form data to JavaScript object with jQuery问题，因为它完全符合您的需求。我会称这个函数为serializeForm()。我还会考虑每次更改表单时设置cookie。这样，当用户刷新浏览器时，应始终更新表单。您也可以考虑为用户提供一个重置表单按钮，因为他们想要重新开始。

重新加载后显示自动创建的字段

1 个答案: