Retrieving javascript variables and passing them to PHP.

[estron]

Problem:

I'm writing an application that makes use of contenteditable="true" attributes in <div> and <span> elements.
I am able to retrieve the values of these editable elements using some simple dhtml.

What I wish to do, is take the values returned from the editable elements and pass them to a PHP class I'm writing.

Basically, i'm trying to allow inline editing of a page. My problem is sending the new values of the editable elements back to the server.

Can anyone give me an example of how this might be done?

Yours,
estron

[Mordecai]

Whenever the content is edited, put it in a hidden form field. When the user switches pages, just submit that form.

[estron]

So something like an onChange() event, whenever the content in any element is edited, pass the value to a hidden element. Then when the user commits the changes, do all the backend work there?

[monAmour]

I've built a smaller function just like that, with contenteditable.
I used a hidden input field to store the html code in.

The editor is a div like this:

<div id="editor" contenteditable="true">
<!-- page to edit goes here -->
</div>

And with an hidden input:
<form name="storeForm">
<input type="hidden" name="store">
</form>

When the user presses the save button, I execute a javascript looking like this:

function store() {
document.storeForm.store.value = document.getElementById('editor').innerHTML;
}

This one passes the html code of the edited page in the hidden form field, then I store this in my mySQL database.

~monAmour

[estron]

I managed to work it out.

Since I have multiple editable areas, I've made it set the hidden form field when an onBlur() event is caught in the editable areas.

Now I need to remember the javascript to take a string sent to a function, and use it in making a pointer to an object.

e.g.
function setElement(element, id) {
document.the_form.(how do I insert the value of id here?).value = element.innerHTML;
}

[monAmour]

I'm not sure I'm getting it but maybe...

document.the_form.id.value = element.innerHTML;