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 メソッド/ロジックが間違っています。そのID$("#id0").clone(true)のクローンを作成します。そうすると、実際には、内部にある入力ではなくdivにIDと名前を設定しています。あなたはこれを必要とします：divid0.attr('id', 'id' + c)

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 に答える