充分利用要求

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的克隆，其編號爲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。