Dynamically replicating a form textarea

Question

I am new to Javascript. And I am trying to create a page which is used for writing reviews. I am stuck at a certain point.

There should be a button to add a section which copies the whole sections div to allow the user to write another section.

Attached below is my code. I am using CKeditor plugin to allow the end user to format their text as they wish.

The current code , while creating a new section, doesn't allow the user to write into the text area created. Please guide me as to where I was mistaken.

    <?php
    include 'settings.php';

    if (!isset($dbc)){
        $dbc = new mysqli(DB_HOST , DB_USER , DB_PASSWORD , DB_NAME);
    }

    if ($dbc -> connect_error){
        die ("Cannot connect to the database");
    }

?>
<html>
    <head>
        <title>Write a new Review.</title>
        <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
    </head>
    <body>
        <form id = "new_review" action = "form.php" method = "post">
            <div id = "header">
                <h2> Header Section. </h2>
                Author : <input type = "text" id = "author"> <br>
                Title: <input type = "text" id = "title"> <br>
                Tagline: <input type = "text" id = "tagline" > <br>
                Score: <input type = "text" id = "score" > <br>
                Pros:   <textarea class = "ckeditor" id = "pros">
                            Please enter the pro's of the product here.
                        </textarea>
                Cons:   <textarea class = "ckeditor" id = "cons">
                            Please enter the cons of the product here.
                        </textarea>
                Verdict:<textarea class = "ckeditor" id = "verdict">
                            Enter your vedict here.
                        </textarea>
            </div>              

            <div id = "sections">
                <h2> Sections. </h2>

                <input type = "button" id="button" onclick="duplicate()">Add a section</button>
                <div class = "section_base" id = "section">
                    Section Icon: <input type="file" id="icon" accept="image/*"> <br>
                    Section Title: <input type = "text" id = "section_title" > <br>
                    Section Text:   <textarea class = "ckeditor" id = "section_text">
                                    Enter you text here.
                                    </textarea>
                    Section Score: <input type = "text" id = "section_score">

                </div>

            </div>

            <div id = "conclusion">
                <h2> Conclusion: </h2>
                <textarea class = "ckeditor" id = "conclusions">
                    Enter your conclusion here.
                </textarea>
            </div>

            <input type = "submit" value="submit">
        </form>
        <script type="text/javascript">
                var i = 0;
                var original = document.getElementById('section');

                function duplicate() {
                    var clone = original.cloneNode(true); // "deep" clone
                    clone.id = "section" + ++i;
                    // or clone.id = ""; if the divs don't need an ID
                    original.parentNode.appendChild(clone);
                }
            </script>
    </body>
</html>

Below are the links from where I had the information to do what I did.

http://ckeditor.com/ckeditor_4.3_beta/samples/replacebyclass.html

How can i duplicate a div onclick with javascript?

So you can't write anything into the text area or it doesn't have the CKeditor additions to the text area? — Bollis, Jul 10 '15 at 07:32
@Bollis, I can see all the CKeditor controls, but I cannot write anything in it. — Quicksillver, Jul 10 '15 at 07:33
OK, I think you need to clone the text area without the CKeditor controls and with a unique id and then call CKEDITOR.replace('new_section_id'); to get new controls on that textarea. — Bollis, Jul 10 '15 at 07:38
But since, there can be many sections added, how do I name them? I get that the divs are named dynamically as "section" + ++i. But how do I get the value of just the textarea inside that div (which I need to replace.)? I know its some thing like ' #divid elementId ' I'm not sure though. — Quicksillver, Jul 10 '15 at 07:45

score 1 · Accepted Answer · edited Jul 10 '15 at 09:45

1

Try your javascript as this

<script type="text/javascript">
    var i = 1;

    function duplicate() {
        var clone = '<div class = "section_base" id = "section">Section Icon: <input type="file" id="icon" accept="image/*"> <br> Section Title: <input type = "text" id = "section_title" > <br> Section Text:   <textarea id = "section_text'+i+'"> Enter you text here. </textarea>Section Score: <input type = "text" id = "section_score"> </div>';
        var div = document.getElementById('sections');
        var newdiv = document.createElement('div');
        newdiv.innerHTML = clone;
        div.appendChild(newdiv);

        CKEDITOR.replace('section_text'+i);
        i++;
   }
</script>

edited Jul 10 '15 at 09:45

Suman Barick

3,101
1
15
30

answered Jul 10 '15 at 07:50

Bollis

275
1
11

Sorry, made a few edits after actually testing it myself. Should be good now. – Bollis Jul 10 '15 at 07:58
Formatting looks still poor, though. – Wiktor Zychla Jul 10 '15 at 08:03
It's working. Thanks for your help. I didn't know that ekeditor has issues like this until I read the answer by @Suman Barick – Quicksillver Jul 10 '15 at 08:31
@Bollis, hate to bother you again. But the form's post variables are not being set. I tried moving the script to be inside the tag, but it did not help. – Quicksillver Jul 10 '15 at 09:17
1

Ok, move the script back out. Each textarea and input that you want coming through in $_POST needs a name. For example The name will be the key in $_POST and the user input will be the value in $_POST. For section_text and other inputs that have the same name for multiple inputs, use name="section_text[]" which will put an array into $_POST for that key with each user input. You can specify a number inside the [] if you wish to set the key for that array. – Bollis Jul 10 '15 at 09:53
Thank you for this, I would have been lost without this. I thought name tag attribute was obsolete. and id is the new identifier. – Quicksillver Jul 11 '15 at 05:04

score 1 · Answer 2 · edited May 23 '17 at 11:43

Seems like CKEditor got some issues with binding the controls for dynamically added elements. You can refer to this problem which contains discussion from people facing similar issues and their solutions.

CKEDITOR inline on dynamic created element ( droppable/sortable )

Also found this jsfiddle demo, which binds CKEditor inline

CKEDITOR.inline( el.get( 0 ) );

The guy has also written a nice tutorial on how to add inline ckeditor on dynamically created elements

See if it helps...

Dynamically replicating a form textarea

2 Answers2