0

我有一个具有任意多个输入字段的表单:

<form method='post' action='/SaveIt/'>
    {% csrf_token %}

    <div id="id0">
        <label>Name:</label> <input type="text" name="name0">
        <label>Age:</label> <input type="text" name="age0">
        <span class="add">Add fields</span>
    </div>
    <div class="controls">
       <button type="submit">Save all</button>
    </div>
</form>

<script>
var c = 1;
$(".add").click(function() {
    $("#id0").clone(true).attr('id', 'id' + c).attr('name', 'name' + c)
    .insertBefore("form > div:last-child");
    c++;
    return false;
});

</script>

这很好地添加了字段,并且它们具有正确的 ID 和名称。但是,我在视图中收到的请求似乎没有它们:

def SaveIt(request):
    return HttpResponse(request.POST)

仅返回 age0 和 name0。有没有办法掌握这些动态创建的输入?

4

1 回答 1

2

您的 jquery 方法/逻辑是错误的。$("#id0").clone(true)将克隆div谁的 id id0,当你这样做时,.attr('id', 'id' + c)你实际上是在 div 上设置 id 和 name,而不是在其中的 input 上。你需要这个:

var c = 1;
$(".add").click(function() {
    var prev = c -1;
    $("#id" + prev).clone(true).attr('id', 'id' + c)
    .insertBefore("form > div:last-child");
    $("#id"+c+" > input[name=name"+prev+"]").attr('name', 'name' + c);
    $("#id"+c+" > input[name=age"+prev+"]").attr('name', 'age' + c);
    c++;
    return false;
});

这是jsfiddle 链接

于 2013-06-11T14:19:33.283 回答