Use Javascript to find text within DIV, insert into HTML form?

Question

I'm currently working on a Safari Extension to create a printable form based upon information provided within a website. A custom CSS stylesheet wouldn't be ideal, instead I was hoping that it would be possible to do the following...

If I were to have the following DIV on page called name.html

<div id="name">John</div>

Is there a way of getting the contents of #name and passing it into a text field in another page called form.html? Ideally, avoiding server side scripts?

Answer 1

To retrieve the element's text (as in ALL the text, subnodes included):

var value = document.getElementById('name').textContent;

Then to assigned the text to the input field in another page:

document.getElementById('myField').value = value;

Of course that doesn't work across pages. If you don't want to use server-side code for this, one simple way of doing it would be to pass the code in a query string, redirect to your form page, and retrieve the variable from the query parameters. Which sounds simpler than it actually is, as you'd need a function to add a query parameter, another one to read a query parameter, and to be sure that everything is encoded and decoded properly.

Another - bad - alternative could be to use cookies via JavaScript.

Another - better but not yet widespread - alternative could to use the WebStorage API. (see localStorage and/or sessionStorage). This will require a modern browser supporting these APIs (for instance, Google Chrome, IE9, Firefox 4, etc...)

The embedded links will provide the missing parts.