Question

I created a list that auto-grows as new content is added. It’s a simple example for me to learn with that allows people to add their siblings and their age (here it is: http://jsfiddle.net/j08691/bhamU). I added a submit button to the code and am sending it to a url to be processed.

Html:

<form>
<div class="family">
    <input name="age" value=0>  <input name="sibling" value="name?">
    <hr />
</div>
</form>

Javascript:

$("form").on('keydown',"input[name='age']:last", function() {
    $('.family:last').clone().insertAfter(".family:last");
})

The problem is, if I enter:

 Bob - 25 
 Cindy - 24 
 Greg - 26  

The results I get are:

 Greg - 26
 Greg - 26
 Greg - 26

The number of results are always the same as the number of siblings I enter but the actual results are always the last entry repeated. (I’m using Pyramid and using the request.POST command to see what’s being posted).

I’m wondering if this is because I’m cloning the two inputs and their names are being repeated? Is there something I should be doing to make the forms identifiable after cloning?

I am using this to get the data:

def submitchange(request):
    for x in request.POST:
        print x, ' = ', request.POST[x]

It outputs the correct number of inputs but all items are a duplicate of the last entry.

Answer 1

that’s because they have similar name attributes, you should change their name attributes after cloning. try this:

<form>
<div class="family">
    <input name="age_1" value=0>  <input name="sibling1" value="name?">
    <hr />
</div>
</form>

$("form").on('blur',"input[name^='age']:last", function() {
    var name = parseInt(this.name.slice(-1), 10)
    $('.family:last').clone().insertAfter(".family:last");
    $('.family:last').find('input[name^="age"]').attr('name', 'age_'+(name+1)).val("")
})

DEMO