- This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
Viewing 2 posts - 1 through 2 (of 2 total)
- The forum ‘JavaScript’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › JavaScript › How to get HTML source including form values?
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!
**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.