Question

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

<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。有没有办法控制这些动态创建的输入？

Answer 1

您的jquery方法/逻辑错误。 $("#id0").clone(true)将克隆div，其ID为id0，当您执行.attr('id', 'id' + c)时，您实际上是在div上设置id和名称而不是在其中的输入。你需要这个：

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 link。

从请求中动态添加输入

1 个答案: