JavaScript保留页面重装后的值

Question

我有一个普遍的问题。我用django创建了一个表单，如果我使用提交，但并非所有的数据都是正确的，或者当有必填字段丢失时，页面会跳回到默认值。 表单内的值已保存，但不包含页面布局。

我的javascript改变布局设计：

$(function(){ 
    $('li.fields').slice(1).hide(); 

    $('ul').on('click', 'li.title', function(){ 
     $(this).next().slideToggle(200) 
    }) 
}); 

总之说，我想保持（UN）的状态倒塌领域。 有人可以请点我在正确的方向来实现（新到javascript）

Answer 1

如果你不能使用AJAX（或不知道如何使用它），你可以在你的表单中使用隐藏的字段。

I've created a fiddle to simulate that。

HTML：

<input type="hidden" id="myHiddenField" /> 

更新的Javascript：

$(function(){ 
    $('li.fields').slice(1).hide(); 

    $('ul').on('click', 'li.title', function(){ 
     $(this).next().slideToggle(200); 
     var myString = "[ "; // create a string to simulate an Array 
     $('ul li.title').each(function() { 
      myString += $(this).is(":visible").toString() + ", "; // iterate your list to take the visible values 
     }); 
     myString += " ]"; // finishes the Array 
     $("#myHiddenField").val(myString); // populate your hidden field 
    }) 

    // when you get back from a submit, this hidden field will have some values 
    if ($("#myHiddenField").val() != "") { 
     var arr = eval($("#myHiddenField").val()); // turn the string into an Array 
     for (var i = 0; i < arr.length; i++) { // iterate the Array 
      if (!arr[i]) 
       $("ul li.title").eq(i).hide(); // if the Array item is false, hide the respective li 
     } 
    } 
});