javascript:dynamic textareas仅发送最后生成的textarea值

时间:2014-03-12 09:53:25

标签: javascript textarea

我有一个动态的Tinymce textarea。即可以克隆更多textarea实例,并为每个实例添加TinyMce插件。

我遇到的问题是,如果克隆了更多textareas并且用户将值输入diffetrent textareas并提交表单,则只发布最后一个textarea值(使用PHP脚本)。 / p>

所以,显而易见的是,问题来自于我用来生成textareas的javascript我希望所有textareas都绑定到这样的名称属性

content[]

然后通过$ _POST作为数组发送,但它只发送最后生成的textarea值。

这是我的js

(function ($) {
    $.fn.relCopy = function (options) {
        var settings = jQuery.extend({
            excludeSelector: ".exclude",
            emptySelector: ".empty",
            copyClass: "copy",
            append: '',
            clearInputs: true,
            limit: 0 // 0 = unlimited
        }, options);

        settings.limit = parseInt(settings.limit);

        // loop each element
        this.each(function () {

            // set click action
            $(this).click(function () {                
                var $clone = $(template);

                $('form').find('.cloneEmp:last').after($clone);

                initTinyMCE(); // re-attach plug-in to include new DOM

                return false;
            }); // end click action

        }); //end each loop

        return this; // return to jQuery
    };

})(jQuery);

头标记中的其他js

var template = '<div class="clone_box_holder cloneEmp"><p><label><strong>Text Box</strong></label><textarea class="mceSimple" name="content[]"></textarea><div class="clear"></div></p></div>';

function initTinyMCE() {
    tinyMCE.init({
        mode: "textareas",
        theme: "simple"
    });
}

$(function () {
    var removeLink = ' <a class="remove" href="#" style="float:right; margin-top:-20px; margin-bottom:10px;" onclick="$(this).parent().slideUp(function(){ $(this).remove() }); return false">remove</a>';
    $('a.add').relCopy({
        append: removeLink
    });
});

initTinyMCE();

HTML

<div style="width:800px; margin:0 auto;">
    <div class="add_res_form">
        <form name="form2" method="post" action="">
            <div class="clone_box_holder cloneEmp">
                <p>
                    <label><strong>Text Box</strong>

                    </label>
                    <textarea class="mceSimple" name="content[]"></textarea>
                    <div class="clear"></div>
                </p>
            </div>
            <p><a href="#" class="add add_res_submit" rel=".cloneEmp">Add More Text</a>

            </p>
        </form>
    </div>
</div>

演示在jsFiddle中显示正在克隆的textarea

jsFiddle link

很高兴能得到这方面的帮助。

1 个答案:

答案 0 :(得分:0)

用以下内容替换头部的“var template”: -

var template = '<div class="clone_box_holder cloneEmp"><p><label><strong>Text Box</strong></label><textarea class="mceSimple" name="content[]"></textarea><div class="clear"></div></p><p><label><strong>Another Text Box</strong></label><textarea class="mceSimple" name="content[]"></textarea><div class="clear"></div></p></div>';