javascript在页面重新加载后保留值

Question

I have a general question. I got a form made with django, if i use submit, but not all data is correct or when there are required fields missing, the page jumps back to default. The values inside the form are saved but not the page lay-out.

my javascript that changes lay-out:

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

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

short said, I would like to keep the status of the (un)collapsed fields. Could someone please point me in the right direction to achieve that (new to javascript)

Answer 1

If you can't use AJAX (or don't know how to use it), you can use a hidden field in your form.

I've created a fiddle to simulate that .

HTML:

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

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