Fatal编程技术网
  • javascript/
  • Javascript 动态复制表单textarea

Javascript 动态复制表单textarea

javascript html ckeditor

Javascript 动态复制表单textarea,javascript,html,ckeditor,Javascript,Html,Ckeditor,我是Javascript新手。我正在尝试创建一个用于撰写评论的页面。我被困在某一点上 应该有一个按钮来添加一个节，该节复制整个节div，以允许用户编写另一个节 下面是我的代码。我正在使用CKeditor插件，以允许最终用户格式化他们的文本，因为他们希望 当前代码在创建新节时，不允许用户写入创建的文本区域。请告诉我哪里错了 <?php include 'settings.php'; if (!isset($dbc)){ $dbc = new mysq

我是Javascript新手。我正在尝试创建一个用于撰写评论的页面。我被困在某一点上

应该有一个按钮来添加一个节，该节复制整个节div，以允许用户编写另一个节

下面是我的代码。我正在使用CKeditor插件，以允许最终用户格式化他们的文本，因为他们希望

当前代码在创建新节时，不允许用户写入创建的文本区域。请告诉我哪里错了

    <?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>


写一篇新的评论。
标题部分。
作者：

标题：

标语：

分数：

赞成的意见：
请在此处输入产品的pro。
欺骗：
请在此处输入产品的cons。
判决：
在此处输入您的视频。
部分。
添加一节
节图标：

章节标题：

章节正文：
在此处输入文本。
组别分数：
结论:
在这里输入你的结论。
var i=0；
var original=document.getElementById（'section'）；
函数复制（）{
var clone=original.cloneNode（true）；/“deep”clone
clone.id=“section”++i；
//或clone.id=“”；如果div不需要id
original.parentNode.appendChild（克隆）；
}
下面是我所做的事情的信息来源的链接

像这样尝试javascript

<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>


var i=1；
函数复制（）{
var clone='节图标：
节标题：
节文本：在此处输入文本。节分数：'；
var div=document.getElementById（'sections'）；
var newdiv=document.createElement（'div'）；
newdiv.innerHTML=克隆；
附属儿童分部（新分部）；
CKEDITOR.replace（'section_text'+i）；
i++；
}
似乎CKEditor在绑定动态添加元素的控件时遇到了一些问题。您可以参考此问题，其中包含了面临类似问题的人的讨论及其解决方案

还发现了这个，它绑定了CKEditor inline

CKEDITOR.inline( el.get( 0 ) );
这家伙还写了一篇关于

看看是否有帮助…

这样你就不能在文本区域中写入任何内容，或者文本区域中没有添加的CKeditor？@Bollis，我可以看到所有的CKeditor控件，但我不能在其中写入任何内容。好的，我想你需要克隆文本区域，而不使用CKeditor控件，并使用唯一的id，然后调用CKeditor.replace（'new_section_id'）；在该文本区域上获取新控件。但是，由于可以添加许多节，我如何命名它们？我知道div被动态命名为“section”++I。但是我如何获取该div内的textarea的值（我需要替换它）？我知道它是类似于“#divid elementId”的东西，但我不确定。抱歉，在自己实际测试后进行了一些编辑。现在应该很好。尽管格式看起来仍然很差。它正在工作。谢谢你的帮助。直到我读到@Suman的答案，我才知道ekeditor有这样的问题Barick@Bollis，我不想再打扰你了未设置e表单的post变量。我尝试将脚本移动到标记内，但没有帮助。请确定，将脚本移回。要在$\u post中通过的每个文本区域和输入都需要一个名称。例如，名称将是$\u post中的键，用户输入将是$\u post中的值。对于$\u文本和其他输入如果多个输入具有相同的名称，请使用name=“section_text[]”，这将在每个用户输入时将该键的数组放入$\u POST中。如果要为该数组设置键，可以在[]中指定一个数字。