如何在用户按下按钮时从输入区域添加相同内容?

时间:2014-04-10 15:11:52

标签: javascript jquery web frontend

我现在正在做一个表单,当用户按下按钮时,我想自动添加另一个输入区域,与上面一行相同。

 <div class="row" id="1">
                <div class="form-group col-lg-2">

                        <select class="form-control" id="select">
                            <option selected>Tag Name</option>
                            <option value="p">p</option>
                            <option value="br">br</option>
                        </select>

                </div>
                <div class="form-group col-lg-2">
                        <select class="form-control" id="class">
                            <option selected>Tag Class</option>
                            <option value="Day">Day</option>
                            <option value="BlockTime">BlockTime</option>
                            <option value="BlockTitle">BlockTitle</option>
                            <option value="Session">Session</option>
                            <option value="Person">Person</option>
                            <option value="Firm">Firm</option>
                        </select>                      
                </div>                    
                <div class="form-group col-lg-7">
                    <textarea class="form-control" rows="3" id="textArea">Please put the content inside this html tag.</textarea>         
                </div>
                <div class="form-group col-lg-1">
                        <input type="button" class="btn btn-default" onclick="addLine()" value="Add">
                </div>                        
                </div>

这是一行输入区域,我想在用户按下&#34;添加&#34;输入区域时添加相同的html。按钮。也许使用JQuery?

It should looks like this one.

这就是我的尝试:

function addLine() {
$('#1').clone().attr('id', '').appendTo('form');

}

现在,它似乎有用,但如果我想将id添加到新创建的元素,比如说2,3,4,我该怎么办?

此外,我不确定我是做对了还是最好的方法。

2 个答案:

答案 0 :(得分:1)

jQuery解决方案

    var n = 8 // adjust it in some way
    var inputArea = ['<div class="form-group col-lg-'+n+'">',
'<textarea class="form-control" rows="3" id="textArea-'+n+'">',// let's be nice and not use same IDs twice
'Please put the content inside this html tag.',
'</textarea></div>'].join('') 
 $('.row').append(inputArea);

然而确保您的后端已准备好处理该输入。

修改 解决方案可能不太花哨,使用clone()也完全没问题。 为了跟踪id,我会添加一个像n这样的简单变量,我会在每次添加新输入区域时递增,然后将其添加到id。

所以,init

var n = 0; 

在addLine中:

n++;

设置id(也可在addLine中使用)

$target.attr('id', 'inputArea-'+n);//Assuming that $target is the inputArea in question

答案 1 :(得分:0)

您可以从DOM中的蓝图结构进行复制,并在按钮后附加您的副本。

var addline = function() {
    var invisibleNewLine = jQuery('#blueprint').clone();
    var visibleNewLine = invisibleNewLine.removeClass('invisible');
    jQuery('#target').append(visibleNewLine);
};
jQuery('#add-line').click(addline);

删除元素上的onClick处理程序并使用jQuery绑定事件。

<button id="add-line" class="btn btn-default">Add</button>

请参阅此处的小提琴:JSFiddle