f



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

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>
0
justaguy
11/11/2016 1:45:24 AM
comp.lang.javascript 38370 articles. 0 followers. javascript4 (1315) is leader. Post Follow

7 Replies
60 Views

Similar Articles

[PageSpeed] 51

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.
0
JJ
11/11/2016 2:43:51 PM
JJ wrote:

> 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.

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.
0
Thomas
11/11/2016 3:29:27 PM
Thanks.
0
justaguy
11/11/2016 7:38:38 PM
So, what's the solution if any? Tks.
0
justaguy
11/11/2016 7:39:36 PM
So, what's the solution if any? Tks.
0
justaguy
11/11/2016 7:39:41 PM
Data url!
0
justaguy
11/11/2016 8:12:07 PM
Meant data url ?
0
justaguy
11/11/2016 8:28:31 PM
Reply: