How can I send contents of a div as a POST parameter?

Question

I have this Code:

<div contenteditable="true"><p><?php echo $row[1]; ?></p></div>

Can I take the contents of the div and send them as a POST parameter in order to use them in the PHP. It would be good if I can use: onchange="this.form.submit()".

Thanks!

Answer 1

It is not possible to post contents of div tags, as this is only possible on form elements. The workaround for this would be to use some Javascript that populates a hidden field when a form is submitted, and the hidden field is posted instead.

Observe the following HTML. See that there is an onsubmit event attached to the form element. What we're saying to the browser here is when the form is submitted, first call the Javascript function process, and only submit if said function returns true:

<form method="post" action="process.php" onsubmit="javascript: return process();">
  <input type="hidden" id="hidden" name="content" value="<?php echo $row[1] ?>">
  <div contenteditable="true" id="content"><p><?php echo $row[1] ?></p></div>
  <button type="submit">Post</button>
</form>

This would be your Javascript. What you're doing is getting the innerHTML of the element with the id content and assigning it to the value of the element with the id hidden and return true so the form can be successfully submitted:

<script>
function process() {
  document.getElementById("hidden").value = document.getElementById("content").innerHTML;
  return true;
}
</script>

And in the process.php file, just output the posted content:

var_dump("Posted content: " . $_POST['content']);

Hope this helps!