-1

I have a form that will ask number of input fields from user, and then append inputs to the form. I have developed the function using JavaScript.

The problem is for the first time it will work fine. If I again select another number from the select tag, it will append the number of input fields to the previous inputs.

Example:

  • If I first select 4 input fields it will show 4 input fields.
  • If I again select 2 from the select tag it will add another two input fields.

So altogether 6 input fields. I don't want that. If I select 4 it should be 4. If I again select 2 it should be 2, not 6. Here is my code:

function obj(){

    var a=document.getElementById('no_of_obj').value; //select tag value(1 to 6)
    var b=document.getElementById('objBlock') //this is the container
    var i=0;

    while(i<a){
        var txt=document.createElement('input');
        txt.type="text";
        txt.id="obj"+i;
        txt.style.height="30px";

        b.appendChild(txt);
        i++;
    }

}
Simon Adcock
  • 3,554
  • 3
  • 25
  • 41
user1820858
  • 57
  • 1
  • 2
  • 8
  • 1
    You're doing fine so far, you just need to use `removeChild` (probably looking up the inputs via the `id` you've assigned them) when you're removing inputs. E.g., know how many you already have, and if the number is now fewer, remove rather than adding. There's no trick to it, you just have to write the code. – T.J. Crowder Mar 25 '13 at 13:43

2 Answers2

3

You could clear down the objBlock container before appending the new input elements, using:

b.innerHTML = '';
Simon Adcock
  • 3,554
  • 3
  • 25
  • 41
  • 1
    This will, of course, wipe out any values the user has typed in the first two fields which are meant to be retained. (Which may or may not be okay.) – T.J. Crowder Mar 25 '13 at 13:42
  • thanks Simon Adcock it worked fine.but the input fields coming in one row.probably i should include a
    tag after every input.how can i do that?     – user1820858 Mar 25 '13 at 13:48
  • Yep, something like `var br=document.createElement('br');` and then `b.appendChild(br);`? – Simon Adcock Mar 25 '13 at 13:55
  • No problem :) Please feel free to mark this as answered, if it has solved your problem. – Simon Adcock Mar 25 '13 at 14:14
  • still one problem b.innerHTML = ''; is wiping out values the user has typed in the previous fields.i want to retain them. – user1820858 Mar 26 '13 at 06:14
  • I see, in which case you're probably better off assigning an id to each input field and using the `removeChild` method suggested by @T.J.Crowder See [here](http://stackoverflow.com/questions/3955229/remove-all-child-elements-of-a-dom-node-in-javascript) – Simon Adcock Mar 26 '13 at 07:53
  • i think the method by Arun P Johny (demo is here http://jsfiddle.net/arunpjohny/UxQAs/2/) is same as @T.J.Crowder suggested! – user1820858 Mar 26 '13 at 08:48
1

Try this

function obj(){

    var a=document.getElementById('no_of_obj').value;//select tag value(1 to 6)
    var b=document.getElementById('objBlock')//this is the container
    var i=0;

    while(b.children.length < a){
        var ct = document.createElement('div');
        var txt=document.createElement('input');
        txt.type="text";
        txt.id="obj"+i;
        txt.style.height="30px";
        ct.appendChild(txt);
        b.appendChild(ct)
    }

    while(b.children.length > a){
        b.removeChild(b.children[b.children.length - 1]);
    }
}

Demo: Fiddle

Using jQuery

$(function(){
    var $ct = $('#objBlock');
    $('#no_of_obj').change(function(){
        var count = $(this).val(), counter = count - $ct.children().length;

        while(counter-- > 0){
            $('<div><input class="input-xlarge"/></div>').appendTo($ct);
        }

        $ct.children(':gt(' + (count - 1) + ')').remove();
    });
})

Demo: Fiddle

Arun P Johny
  • 384,651
  • 66
  • 527
  • 531