How to get HTML source including form values?

[demetridesign]

Hi everyone,

I’m working on a project that requires me to generate a full HTML source string from a web form. The catch is that I need to capture the form values in this HTML source. So, I cannot simply use document.documentElement.outerHTML because that returns the source code with empty form fields.

Currently I am serializing all of the form values in an object when the user clicks a submit button. Then I am capturing the HTML source via document.documentElement.outerHTML into a variable (doc) and converting it into a DOM object. I then parse my new DOM and inject the form values into it. At this point I am able to inject the form values into my new DOM, but it still shows empty form fields when I get the HTML source from it. I guess I am getting the same result on my new DOM object as with the original document.

Does anyone know of a way to do this? I have a feeling there’s a more simple solution that I am missing.

Here’s a codepen of my issue: http://codepen.io/dganoff/pen/gfABF

Thanks!

[demetridesign]

**Update!**
I completely dumped the whole “new DOM” approach because I wasn’t accomplishing anything with that.

Now, I’m using the form values object to loop through the DOM elements of the form and setting the defaultValues on text fields, "checked", true on radio and checkboxes, and "selected", true on the drop downs. After setting those values, I am able to get the ‘edited’ html via jQuery $('#form').html().

See my above codepen for the updated solution if you’re interested.

[Author]

Posts