jquery loop to create elements with retained values

Question

I recently asked a question about creating elements with jquery. Specifically I needed input boxes created/deleted depending on the value of a particular select box. This was answered quickly with a very nice solution as follows:

$('select').change(function() {
     var num = parseInt($(this).val(), 10);
     var container = $('<div />');
     for(var i = 1; i <= num; i++) {
         container.append('<input id="id'+i+'" name="name'+i+'" />');
     }
     $('somewhere').html(container);
});

This works very well. Is there a way to have the values remaining in the text boxes when the selection is changed? For example, lets say the select element value is set to '2' so that there are 2 input boxes showing. If there is input already entered in these boxes and the user changes the select element value to '3' is there a way to get the first 2 input boxes to retain their value?

Thanks for the help in advance

Andy

There is also the case where a lower number is selected and I assume the input boxes need to be truncated (from the highest numbered ID back). What have you tried so far? — Lazarus
– Lazarus, Commented Apr 28, 2010 at 11:19
Heads up. Putting container.append inside the for loop is very bad for performance. Rather concatenate all the markup inside the loop (using += or array.push) and use that markup in one .append operation after the loop. — James Westgate
– James Westgate, Commented Apr 28, 2010 at 11:44

GlenCrawford · Accepted Answer · 2010-04-28 12:19:15Z

1

The following line should work, nice and simple:

var value = ($("#id"+i).val() || '');
container.append('<input id="id'+i+'" name="name'+i+'" value="'+value+'" />');

Edited, thanks patrick.

edited Apr 28, 2010 at 12:19

answered Apr 28, 2010 at 11:26

GlenCrawford

3,3893 gold badges28 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user113716 Over a year ago

This would insert undefined if there's no existing input. (Also "id" is in the wrong place. Should be "#id".) You could test for undefined first, like var value = ($("#id"+i).val() || '');.

Luis Melgratti · Accepted Answer · 2010-04-28 11:58:19Z

1

$('select').change(function() {
     var num = parseInt($(this).val(), 10);
     var container = $('<div />');
     for(var i = 1; i <= num; i++) {

         // append existing input if available
         if($("#id"+i).length){
            container.append($("#id"+i));
         }
         else {
             container.append('<input id="id'+i+'" name="name'+i+'" />');
         }
     }
     $('somewhere').html(container);
});

edited Apr 28, 2010 at 11:58

answered Apr 28, 2010 at 11:26

Luis Melgratti

12.1k4 gold badges35 silver badges32 bronze badges

1 Comment

user113716 Over a year ago

This line if($("#id"+i)) {... will always return true. You would need if($("#id"+i).length){ instead.

Collectives™ on Stack Overflow

jquery loop to create elements with retained values

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related