0

I'm trying to append every new <option> to the select field, but I seem to be getting multiples after the first submission.

Any help is appreciated.

<input id="name" placeholder="name">
<input id="phone" placeholder="phone">
<button id="submit">Submit</button>

and

$("button").on("click", function(){
    userData.name = $("#name").val();
    userData.phone = $("#phone").val();
    users.push(userData);

    var len = users.length;

    for (var i = 0; i < len; i++) {
        $("<option value=" + users[i].phone+ ">" + users[i].name + "</option>").appendTo(select);
    }
});

Heres a fiddle : http://jsfiddle.net/Buttery/5dQhj/3/

Currently outputs

Terry
Gus
Gus
Foo
Foo
Foo

5 Answers 5

2

When you click your button, you're appending the new addition to the original data source, then looping over the original data source and re-adding each one, creating duplicates, try this:

$("button").on("click", function(){
    userData.name = $("#name").val();
    userData.phone = $("#phone").val();
    users.push(userData);

    $("<option value=" + userData.phone + ">" + userData.name + "</option>").appendTo(select);
});
1
  • Damn, I was so close. Thanks heaps! Sep 5, 2012 at 12:09
1

Remove your for loop:

$("button").on("click", function(){
    userData.name = $("#name").val();
    userData.phone = $("#phone").val();
    users.push(userData);

    $("<option value=" + userData.phone+ ">" + userData.name + "</option>").appendTo(select);
});

http://jsfiddle.net/9u7LS/

2
  • why still using var len = users.length; ..? @arxanas Sep 5, 2012 at 12:17
  • @VishalSuthar That was an artifact from a previous solution, sorry. Sep 5, 2012 at 12:18
0

Move the global variables into the function

$ ("button").on("click", function(){
var users = [];
var userData = {};
var select = $("#users");
userData.name = $("#name").val();
userData.phone = $("#phone").val();
users.push(userData);

var len = users.length;

for (var i = 0; i < len; i++) {
    $("<option value=" + users[i].phone + ">" + users[i].name +  "</option>").appendTo(select);
}

});

0

Try with this: Fiddle Demo

As you were again and again adding the existing values using the loop so just avoid using the loop.

var users = [];
var userData = {};
var select = $("#users");

$("button").on("click", function(){

userData.name = $("#name").val();
userData.phone = $("#phone").val();
users.push(userData);

    $("<option value=" + users[0].phone+ ">" + users[0].name +   
    "</option>").appendTo(select);
});
0
var users = [];
var userData = {};
var select = $("#users");

$("button").on("click", function(){
    userData.name = $("#name").val();
    userData.phone = $("#phone").val();
    users.push(userData);

    select.append($("option>/option>").attr("value",userData.phone).text(userData.name));



});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.