0

I have a web form #form1 and many elements are dynamically created, therefor I can't just use searialize. I want to store the form input in localstorage so that when the user submits the form, they can hit the back button, and I can recreate the form 100% where they left off.

This is an internal company tool, nothing super secure required for a public facing site. I want to store the HTML contents from the form including the form itself, that way all dynamic content can be restored.

I've tried $('#form1')[0].outerHTML $('#form1').content() and many other options in jQuery, but that doesn't give me any filled form values.

I basically want the evaluated HTML of the form id form1 100% complete, including all filled out data to be stored in a variable in JS.

This is not a duplicate because no other question I've seen anywhere relates to getting a complete HTML element, and all form values stored to a single string for easy restoration later. This is NOT serialization.

user3657553
  • 94
  • 7
  • Did you try this: http://stackoverflow.com/questions/22195065/how-to-send-a-json-object-using-html-form-data – István Jun 21 '16 at 13:36
  • That's serializing the elements and values, but it wouldn't add dynamic elements back in when I tried to restore the content. I need a full HTML dump, but it needs to include the completed form elements. – user3657553 Jun 21 '16 at 13:38
  • 1
    You have to use JQuery to restore the content, getting the inputs by name and set their value – István Jun 21 '16 at 13:39
  • That won't work. I have dynamically inserted table rows containing form elements. Those dynamic rows will not be restored. I just need the HTML as it is, with values filled out on the screen stored into a string. – user3657553 Jun 21 '16 at 13:41
  • Are all informations temporally stored in input fields? – miny1997 Jun 21 '16 at 13:50
  • @Cerbrus, please unclose this. This is not a duplicate because no other question I've seen anywhere relates to getting a complete HTML element, and all form values stored to a single string for easy restoration later. This is NOT serialization. – user3657553 Jun 21 '16 at 14:18
  • 1
    So, just to be clear, you're asking for a solution that's a combination of [`outerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML) and [`serialize`](https://api.jquery.com/serialize/). Is that correct? – Michael Gaskill Jun 21 '16 at 21:14

2 Answers2

1

Try getting the information from the input fields with .val() and store it in arrays for AJAX querys or another process operations:

JS example:

var key = [];
var value = [];
$("input").filter('.form1').each(function(){
    key.push($(this).attr('id'););
    value.push($(this).val());
});

You can also store the information in one array and split the key and the value like CVS with a semicolon.

miny1997
  • 469
  • 3
  • 13
-1

Try this:

$('<div>').append($('#formId').clone()).html();

I found it here.

Example.

Community
  • 1
  • 1
István
  • 5,057
  • 10
  • 38
  • 67