CODEWITHSUNDEEP
phpjavascripthtmlckeditor
sdirlik
sdirlik

Reputation: 51

how to submit div in a form

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>&lt;div&gt;</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.

Upvotes: 0

Views: 2730

Answers (2)

gordon
gordon

Reputation: 1182

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

Upvotes: 0

Sergey
Sergey

Reputation: 5207

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>&lt;div&gt;</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>

Upvotes: 2

Related Questions