Question

以下是我用来创建动态表单的代码，点击＆＃34;添加更多...＆＃34;按钮。我的问题是如何在动态生成字段中添加+1，以便其名称看起来像testimonial1，testimonial2，testimonial3等等。

HTML：

<ul id="testimonial_ul" style="list-style-type: none; padding-left: 0px;">
    <li>
        <div class="field">
            <input title="Testimonial" name="testimonial" class="testimonial required" type="text" placeholder="Testimonial"/>
            <input name="testimonial_by" id="testimonial_by" class="testimonial_by required" type="text" placeholder="by..."/>
        </div>
    </li>
</ul>
<a href="#" id="more_testimonials">Add more...</a>

JS：

$("#more_testimonials").click(function() {
    $("#testimonial_ul").append('<li><div class="field"><input class="testimonial" type="text" placeholder="Testimonial"/><input class="testimonial_by" type="text" placeholder="by..."/></div><a class="removeLI">Remove</a></li> ');
});

Answer 1

试试这个：

var counter = 1;
$("#more_testimonials").click(function () {
    $("#testimonial_ul").append('<li><div class="field"><input  name="Testimonial'+counter+'" class="testimonial" type="text" placeholder="Testimonial"/><input name="Testimonial'+counter+'" class="testimonial_by" type="text" placeholder="by..."/></div><a class="removeLI">Remove</a></li> ');
    counter++;
});

工作Fiddle.

Answer 2

我已更新您的小提琴CHECK HERE

var formInputLen = $('.testimonial').length;

使用类testimonial计算总元素。并将递增的计数器添加到id id="testimonial' + (formInputLen + 1) +'"。

Answer 3

您可以将一些特殊字符串替换为输入数量。 http://fiddle.jshell.net/k1twc1tz/1/

带增量的动态表单字段创建

3 个答案: