Lossless HTML form

To store data, you can use cookies, or you can localStorage or sessionStorage. In the middle of the night, there is no longer enough power to optimize, therefore pardonte, for a bunch of code. In the SO sandbox, it refuses to execute, so the jsfiddle working example . After filling out the form, if you do not click the "Finish" button, you can reload the page, close the window, open the link again. The data and position of the form will remain in its last state.

<div id="form-output"> <form> <div> <p> <input name="inp1" type="text"> </p> <p> <input name="inp2" type="text"> </p> <p> <select name="opt1"> <option></option> <option value="a">A</option> <option value="b">B</option> <option value="C">C</option> </select> </p> </div> <div> <p> <input name="inp3" type="text"> </p> <p> <input name="inp4" type="text"> </p> <p> <select name="opt2"> <option></option> <option value="a">A</option> <option value="b">B</option> <option value="C">C</option> </select> </p> </div> <div> <p> <input type="submit" value="Finish"> </p> </div> </form> <div id="control-panel"> <button>&lt;</button> <button>&gt;</button> </div> </div> 

jQuery:

 var ctrl = $('#control-panel button'), output = $('#form-output'), form = $('form', output), formElems = $(':text, select', form), step = output.outerWidth(), maxPos = form.width() - step, pos, dir, ls = { set: function() { // Сохраняем данные формы и её координаты var data = { form: form.attr('style'), vals: {} }; formElems.each(function(i, el) { data.vals[$(el).attr('name')] = $(el).val(); }); localStorage.setItem('myform', JSON.stringify(data)); }, get: function() { var data = localStorage.getItem('myform'); // Если в LS есть данные, то подставляем в элементы формы if (data) { data = JSON.parse(data); $.each(data.vals, function(name, val) { formElems.filter('[name=' + name + ']').val(val); }); form.attr('style', data.form); } }, clear: function(e) { // Удаляем данные из LS localStorage.removeItem('myform'); // Если нужно отменить обычную отправку данных e.preventDefault(); $(this).animate({ left: 0 })[0].reset(); } }; ls.get(); ctrl.on('click', function() { pos = Math.abs(form.position().left); dir = ctrl.index(this); if (pos > maxPos && dir || pos <= 0 && !dir) { return false; } // После завершения анимации, записываем данные формы в LS form.animate({ left: '-=' + (ctrl.index(this) ? step : -step) }, ls.set); }); // После отправки формы, данные в LS очищаются form.on('submit', ls.clear); 

If “lossless” means without reloading the page, then it seems to me that the following options are quite adequate:

1. To make it so that after the next step the current form was hidden and another appeared in its place. Ie store some templates and shuffle them.

2. Or nothing to shuffle and change the data in the current form on the fly. Take data from the server and generate a form based on the data

Data from each step must be packaged into an object and finally sent to the server.