Question

I want the variable inputname to go up by 1 every time a new <input /> is added

e.g.

<input name="1" />

<input name="2" />

<input name="3" />

—html—

<p class="add">Add</p>
<div class="added"></div>

—jQuery/javascript—

$(document).ready(function() {
    $("p.add").click(function() {


        var inputname = somevar;
        var added = "<input type=\"text\" name=\""+inputname+"\" />";
        $("div.added").append(added);
    });
});

 

here it is on jsfiddle.net if it helps -> http://jsfiddle.net/gamepreneur/54kzw/

Answer 1

Change the variable scope

Use this:

// declare your variable here so it exists throughout every call, instead of being
// delcared new with every call.
var inputname = somevar;

$(document).ready(function() {
    $("p.add").click(function() {
        var added = "<input type=\"text\" name=\""+(inputname++)+"\" />";
        $("div.added").append(added);
    });
});

Alternatives:

• Grab the number of inputs ($('div.added input').length) and use that for a counter.
• Grab the id of the last item $('div.added input:last').prop('name')) and increment it.