How to dynamically generate multiple input fields jQuery without overriding the last one

Question

So I'm working on some jQuery code to get new phone data displayed on the page.

So far everything is working except that the last phone number is the only one to be displayed no matter how many phone numbers I have. I discovered that it's because my $('.new_option').append(inputphone); is overriding the last one.

Here is the jsFiddle (not exactly the same code since I don't have a database Object, but produces the same problem): http://jsfiddle.net/leongaban/dvYMb/

The Variable (HTML with label + input):

var inputphone = $("<li><label></label><br/><input type='tel' pattern='[0-9]{10}' class='added_phone' name='' value='' autocomplete='off' maxlength='20' /></li>");

HTML DOM:

<li>
    <ul class="new_option">
    </ul>
</li>

The each loop:

$(profileData.phones).each(function(i) {
    console.log(' ');
    console.log('Phones: '+i);
    console.log(profileData.phones[i].label);
    $('.new_option').append(inputphone); //<-- The Issue
    $('.added_phone').parent().find('label').text(profileData.phones[i].tag);
    $('.added_phone').attr('id', "added_"+profileData.phones[i].tag+"phone" + i);
    $('.added_phone').attr('value', profileData.phones[i].label);
});

Console:
enter image description here

Result on page:
enter image description here

My question is how do I make this line dynamically generate new fields with unique id's?

$('.new_option').append(inputphone);

Searching around here I see people saying use an object, but haven't been successful with that approach yet.

How would you handle this?

Here is the jsfiddle I just created: jsfiddle.net/leongaban/dvYMb — Leon Gaban
– Leon Gaban, Commented Aug 27, 2013 at 15:19

Leon Gaban · Accepted Answer · 2013-08-27 18:30:00Z

Answer from a forum poster at CSS-Tricks Javascript form post

CodePen http://codepen.io/ggilmore/pen/f3a88dd68a7b1d101712b75318925198

var inputphone = "<label></label><br/><input type='tel' pattern='[0-9]{10}' class='added_phone' name='' value='' autocomplete='off' maxlength='20' />";

var profileData = "Text for input";
var currentListItem;

for (var i = 0, max = 2; i < max; i++) {
    $('.new_option').append('<li class="input-'+i+'" />');

    currentListItem = $('.input-'+i);
    currentListItem
        .append(inputphone)
        .find('label').text(profileData)

    currentListItem
        .find('.added_phone').attr('id', "added_phone" + i).attr('value', profileData);
}

Also note: This works for my simple basic example I created in jsFiddle and CodePen, however upon further developing it was still causing the same issue with my phoneData object.

So going a different route. Getting the phone numbers to be displayed via Python(which I should have done in the first place, the front-end developer in me loves jQuery however) I hope this helps someone!

Vivek · Accepted Answer · 2013-08-27 15:12:49Z

0

The issue is caused because you fill up the ul and don't reset it after.

Here's what you need to do:

$(profileData.phones).each(function(i) {
    console.log(' ');
    console.log('Phones: '+i);
    console.log(profileData.phones[i].label);
    $('.new_option').append(inputphone);
    // Reset the ul now and add a new empty ul
    $('.new_option').attr('class', 'ul_added');
    var p = $('.added_phone').parent().parent(); // This is the li above the ul
    p.append('<ul class="new_option"></ul>');
    // Set the values
    $('.added_phone').parent().find('label').text(profileData.phones[i].tag);
    $('.added_phone').attr('id', "added_"+profileData.phones[i].tag+"phone" + i);
    $('.added_phone').attr('value', profileData.phones[i].label);
});

answered Aug 27, 2013 at 15:12

Vivek

4282 silver badges13 bronze badges

2 Comments

Leon Gaban Over a year ago

Hmm I thought this would work, but it creates a new ul, however doesn't target it to put in new content? Fiddle: jsfiddle.net/leongaban/Fv3NX

Vivek Over a year ago

Ugh, the problem is that the DOM state prior to the call to $.each will be maintained in each pass. So when we end up changing 2 times, it's only the second change that takes effect. We could probably use classic JS functions like createElement to make this work.

Collectives™ on Stack Overflow

How to dynamically generate multiple input fields jQuery without overriding the last one

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related