How to send dynamically generated document elements to a server side script for data saving?

[justaguy]

What I intend to do:
The page allows the user to add dynamic elements (and some of such elements would automatically have an image file associated with it).
that is, it allows a user to
document.createElement('span') etc.

I then, have a function to map all the document elements to a FORM element, specifically a Textarea tag with an id and name.

Problem:
I'm getting objects, instead of objects properties.
See below
[object HTMLHtmlElement][object HTMLHeadElement][object HTMLScriptElement]
...
So, what do I need to do to make it happen?

Thanks.


JavaScript looks like below:
// prepare page/document data for FORM submission
var prep = function() {
// document.getElementById('myData').innerHTML = document.all;
// turn them into array
arr = [].slice.call(document.all);
console.log("array length: " + arr.length);

// copy each into FORM textarea field
for (e = 0; e < arr.length; e++) {
document.getElementById('myData').innerHTML += arr[e];
}

};


Part of the HTML page looks like the following:
<textarea id="myData" name="myData" style="display:none"></textarea>

<br/>
<button onclick="prep(); console.log('verify: ' + document.getElementById('myData').innerHTML);return false;">Verify Data prior to submission</button>

[JJ]

On Thu, 10 Nov 2016 17:45:24 -0800 (PST), justaguy wrote:
> What I intend to do:
> The page allows the user to add dynamic elements (and some of such elements would automatically have an image file associated with it).
> that is, it allows a user to
> document.createElement('span') etc.
>
> I then, have a function to map all the document elements to a FORM element, specifically a Textarea tag with an id and name.
>
> Problem:
> I'm getting objects, instead of objects properties.
> See below
> [object HTMLHtmlElement][object HTMLHeadElement][object HTMLScriptElement]

> ....

> So, what do I need to do to make it happen?
>
> Thanks.

That's because an element object won't become a HTML code string when the
object is converted to string. You need to use its outerHTML property if you
want its HTML code.

[Thomas 'PointedEars' Lahn]

However, this wish is probably based on a flawed approach as the attributes
of the element, and its descendants and their attributes, are available as
and via properties in the document tree. By contrast, serialization of
element objects using the “outerHTML” property will rarely yield appropriate
results, as it will yield results that you have no control over (unless you
parse them again, but then why did you serialize in the first place?).

--
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not cc me. / Bitte keine Kopien per E-Mail.

[justaguy]

Thanks.

[justaguy]

So, what's the solution if any? Tks.

[justaguy]

[justaguy]

Data url!

[justaguy]

Meant data url ?