创建动态表单元素(具有递增的名称属性)

时间:2009-03-14 02:40:47

标签: javascript jquery forms

如何动态创建表单元素并为其提供动态增量的输入名称属性?我正在使用jquery,但我愿意接受任何解决方案。

我有一个看起来像这样的div:

<div>

<input type="text" name="title1" />

<input type="text" name="body1" />

<select name="photo1" size="1">

<option value="0">foo</option>

</select>

</div>

我希望克隆它n次并将名称值增加1 所以,例如,第二个div看起来像这样(只有名称值改变):

<div>

<input type="text" name="title2" />

<input type="text" name="body2" />

<select name="photo2" size="1">

<option value="0">foo</option>

</select>

</div>

使用jquery克隆div很简单:

$(document).ready(function(){
    $('.toClone').click(function(){
        $(this).clone(true).insertAfter(this);
     });
});

但是我无法自动增加动态创建的div字段的名称值 任何人都知道如何做到这一点?

2 个答案:

答案 0 :(得分:3)

你在做什么处理?使用PHP,您可以命名字段title[]body[]等,以便它们作为数组发送。这将是最好的方法,因为克隆将是微不足道的。据我所知,它的工作方式与其他技术类似。无论如何,如果你真的想按照自己的方式去做:

$(document).ready(function(){
    $('.toClone').click(function(){
        var el = $(this).clone(true).insertAfter(this);
        var regex = new RegExp(/^(.+)(\d+)$/);
        $(el).find(':input').each(function() {
            var match = $(this).attr('name').match(regex);
            $(this).attr('name', match[1] + (++match[2]));
        });
    });
});

这应该可以解决问题。

答案 1 :(得分:1)

更改名称属性字段可以通过以下方式完成:

var i = 1;
$(this).clone(true).attr('name', 'title' + i).insertAfter(this);

然后你只需要管理递增变量。