Capturing the content/state of the HTML Page along with the changes

[praveenmmohanan]

Hi...,

We have a pretty huge form where the user/support spends more than
6 minutes. Now, behind the scenes, I wanted to capture the outerHTML
data & send it to a different URL to save it in draft.

Now there is no outerHTML in Firefox. secondly even innerHTML is
different for IE & Firefox as in IE the updates I do to the text field
are now visible in the innerHTML text but the changes are not visible
when I run the javascript in Firefox.

For eg. if there is a Text Box which alreay has value "100" & I change
it to "1000". The innerHTML o/p in IE shows the value "1000" correctly
where as in Firefox it shows "100".

My main intention is to capture the current HTML state (along with the
changes) and post it to a different URL while the user is filling the
current form.

How do I achieve it,?

Regards,

Praveen

 

[Evertjan.]

wrote on 10 jan 2007 in comp.lang.javascript:

Hi...,

We have a pretty huge form where the user/support spends more than
6 minutes. Now, behind the scenes, I wanted to capture the outerHTML
data & send it to a different URL to save it in draft.

Now there is no outerHTML in Firefox.

The outer element's innerHTML can be the inner's the outer one, methinks.

secondly even innerHTML is
different for IE & Firefox as in IE the updates I do to the text field
are now visible in the innerHTML text but the changes are not visible
when I run the javascript in Firefox.

For eg. if there is a Text Box which alreay has value "100" & I change
it to "1000". The innerHTML o/p in IE shows the value "1000" correctly
where as in Firefox it shows "100".

My main intention is to capture the current HTML state (along with the
changes) and post it to a different URL while the user is filling the
current form.

That seeme a bad idea, Praveen.

Do not expect different browsers to act the same while building the DOM
tree from the same html source.

All you need is the form's input content,
because the html is already known to you.

So why not use the DOM to collect that content and send it to the other
server using XMLHTTP.

You could do that, say, every 10 seconds or so.

=====================================

Something like [not tested, just an idea, read as pseudocode]:

var z = '';
var coll = document.forms[0].getElementsBytagName('input');
for (i in coll)
z += coll.name + ':' + coll.value.replace(/[:;]/g,'?') + ';'

var http = new ActiveXObject("Microsoft.XMLHTTP");
// do the good thing for FF too here [like new XMLHttpRequest();]
http.open("POST", "http://....", true[?]);
http.setRequestHeader("Content-Type", ....... );
http.send(z);