how to submit div in a form - php

Question

I am using ckeditor in order to edit the text seen in the screen. The information is taken from database and written to the screen in a div element and it is possible to edit the information by double clicking. However, after edited i couldn't get the edited information. Here is my code, i tried to add a form which includes the div element, but it did not work.
<form method="post">
<p>
Double-click any of the following <code><div></code> elements to transform them into
editor instances.</p>
<?php
$makeleSql = 'SELECT * FROM makale';
$makaleRs = $con->func_query($makeleSql);
while ($makaleRow = mysql_fetch_array($makaleRs)) {
?>
<div class = "editable" id = <?php echo "content".$makaleRow['id'];?> style="display:none">
<?php
$contentSql = 'SELECT * FROM content WHERE makale_id ='.$makaleRow['id'];
$contentRs = $con->func_query($contentSql);
while ($contentRow = mysql_fetch_array($contentRs)) {
echo $contentRow['icerik'].$makaleRow['id'];
}
?>
</div>
<?php }
?>
<button type="submit" value="Submit" onclick="getDiv();"/>
</form>
What should i do in order to take the information in the div element? Moreover, i am using this example.
http://nightly.ckeditor.com/7484/_samples/divreplace.html
Thanks.

Answer 1

For save form's data you need store information in input/select/textarea. Div and other not form's element not will be stored.
You have to store your data in hidden fields:
<form method="post">
<p>
Double-click any of the following <code><div></code> elements to transform them into
editor instances.</p>
<?php
$makeleSql = 'SELECT * FROM makale';
$makaleRs = $con->func_query($makeleSql);
while ($makaleRow = mysql_fetch_array($makaleRs)) {
?>
<div class="editable" id="<?php echo "content".$makaleRow['id'];?>">
<?php
$contentSql = 'SELECT * FROM content WHERE makale_id ='.$makaleRow['id'];
$contentRs = $con->func_query($contentSql);
while ($contentRow = mysql_fetch_array($contentRs)) {
echo $contentRow['icerik'].$makaleRow['id'];
// store original text
echo '<input type="hidden" name="'.$makaleRow['id'].'" value="'.htmlspecialchars($contentRow['icerik'].$makaleRow['id']).'">;
}
?>
</div>
<?php }
?>
<button type="submit" value="Submit" onclick="getDiv(this);"/>
</form>
<script>
var getDiv = function(btn) {
for(var el in btn.form.elements) {
var d = document.getElementById(btn.form.elements[el].name);
btn.form.elements[el].value = d.innerHTML;
}
return true;
}
</script>

Answer 2

Generically adds <input type="hidden"> to any <div> with the attribute addToForm, copies content into them (see notes below):
<form method="post" id="f">
<div id="txt" addToForm="1" contenteditable spellcheck="true" style="height:100px;width:300px;font-family:arial,sans serif;border:1px solid black;font-weight:normal;overflow-y:auto;"
</div><br />
<input type="button" value="Go" id="btnGo">
</form>
<script type="text/javascript">
$(document).ready(function(){
$("#btnGo").click(function(){
$("div[addToForm]").each(function(){
var tId=$(this).prop("id");
$(this).after("<input type='hidden' name='"+tId+"' id='hdn"+tId+"'>");
$("#hdn"+tId).val($(this).html());
});
$("#f").submit();
});
});
</script>
Note 1) if you want to strip out the HTML formatting of the content, use <textarea> instead of <input>
Note 2) be sure validation is successfully complete first or you will end up with multiple hidden inputs with the same name