jquery loop to create elements with retained values

Question

Dear all,

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

Answer 1

I would think of two solutions.

First, you want to keep those previous added inputfields (like forever) and just attach the new ones. In that scenario just replace

$('somewhere').html(container);

to

$('somewhere').append(container);

and change the for-loop to

for(var i = $('#myContainer').find('input').length + 1; i <= num; i++) {

(attention to #myContainer, is the id of the container div which I added)

---

If you only want to keep already available values entered, you need some checking within that for-loop. For instance:

$('select').change(function() {
  var num = parseInt($(this).val(), 10),
      container = $('<div />', {id: 'myContainer'),
      search = null;
  for(var i = 1; i <= num; i++) {          
      search = $('#myContainer').find('input#id'+i);
      if(!search.length || ( search.length && /^$/.test(search.val()) ))
         container.append('<input id="id'+i+'" name="name'+i+'" />');
  }
  $('somewhere').html(container);
});

that should only append new elements which aren't already there, or they do exists but with no value.

Kind Regards

-Andy

Answer 2

$('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);
});

Answer 3

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.