提交后返回动态表格

Question

I've got a form like this:

<form action="" method="POST">
    <input type="text" value="name[]">
    <input type="submit">
</form>
<a href="#" id="add">Add field</a>

With Javascript / jQuery there is an option to add more fields, like:

$('a').click(function()
{
    $('form').append( $('input[type="text"]').clone() );
    return false;
});

It's just some dummy code, but to make clear that it's a dynamic form.

When this form is submitted and I go back (just with the back button in the browser), the extra added fields with the values are gone!

How to handle this easy?

UPDATE

I'm using CodeIgniter and the form validation. If the form fails all the variables will stay where they are and I've done some custom coding so the dynamic fields and there values are still there. Can I use some part of this for what I'm trying to do? Basically everything is already there for the form validation. Now this has to work with while going back to...

Answer 1

The submit button will make a new request for the document, unloading the current one. The easiest way to save your progress on the page is to not unload it at all. You can find a simple implementation here

You can also try using cookies or local storage to store the state of your document.

Update I just realized you could also use

$("form").bind('submit',function(){
   return false;
});

However this will not solve your problem if you unload the document. And use the "back" button to re-load it. The only things that could save you then are cookies and local storage.

Answer 2

After searching and trying a while I've used sessionStorage for this. Before the form submits all the values will be saved in it and when the user is clicking the back button everything is set back. For example before submit:

$('form').submit(function()
{
    var array           = {};
    array['name']       = [];
    array['counter']    = 0;

    $('input').each(function()
    {
        array['name'].push( $(this).val() );
        array['counter']++;
    });

    sessionStorage.setItem('input', JSON.stringify(array));
});

And on load:

if(sessionStorage.getItem('input'))
{
    var array = JSON.parse( sessionStorage.getItem('input') );

    for (var n = 0; n < (array['counter'] - 1); ++ n)
    {
        $('form').append( $('input[type="text"]').clone() );
    }

    $('input').each(function(index,value)
    {
        $(this).val( array['name'][index] );
    });

    sessionStorage.removeItem('input');
}

And I've written a blog post about this with an online demo: http://royduineveld.nl/blog/en/tips-trucs/449/waardes-behouden-na-verzenden-van-dynamisch-formulier/