www.webdeveloper.com
Results 1 to 13 of 13

Thread: creating text boxes dynamically using javascript

  1. #1
    Join Date
    Dec 2010
    Posts
    28

    creating text boxes dynamically using javascript

    As part of my form I have a box for the user to input the number of text boxes needed. I already have the page creating the textboxes but do not know the IDs of each text box.
    Once the user adds textboxes they can click add again to create more. If the user previously added 3 textboxes and now enters 4 I want the program to just add one more instead of 4 more.

    The function I am using is:

    function add(type) {
    var num=(document.getElementById('NoOfValues').value)-0;
    for (i=1;i<=num;i=i+1)
    {
    //Create an input type dynamically.
    var element = document.createElement("input");
    //Assign different attributes to the element.
    element.setAttribute("type", type+i);
    element.setAttribute("name", type+i);
    var foo = document.getElementById("fooBar");
    //Append the element in page (in span).
    newline=document.createElement("br");
    foo.appendChild(newline);
    foo.appendChild(element);
    }
    }

    (NoOfValues is the text box that the user inserts how many textboxes they want added)

    This is where I call the function:

    <span id="fooBar"><input onclick="add('Textbox')" type="button" value="Add" style="visibility:hidden" name="cmdAddValues"/></span>


    Im wondering:
    1. what the IDs of the new textboxes are?
    and
    2. how to check if textboxes have already been added so that extras arent added....(e.g. the user adds 3 and then types in 4 and clicks add.....in total I only want 4 textboxes and not 7)

    any help on this is really appreciated!

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    1. The textboxes don't have an id only a name. Where or how do you want to reference it's name?

    2. Get the number of inputs in #foo
    Code:
    var inputs = foo.getElementsByTagName('input').length

  3. #3
    Join Date
    Dec 2010
    Posts
    28
    Thanks Fang,

    1. I will at a later point need to get the value from each box but I guess I can do that with the name instead of ID.

    2. will:
    var inputs = foo.getElementsByTagName('input').length
    tell me how many text boxes I have previously added?

    The method I was thinking of was:
    -the user has already added 3 text boxes (names: textbox1, textbox2 and textbox3)
    -the user then selects to insert 4 textboxes
    -I was going to write a loop from i=1 to 4, if textbox +i exists then dont add a new text box, if it doesnt exist then add new textbox +i
    -This would then end up with only 4 textboxes and not 7 which is what I want

    Am I trying to do this a long way.....is there a quicker/better way to do this?

    Thanks

    Claire

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    var inputs will give the number of inputs, just check for the maximum allowed.
    Note that hidden inputs will also be counted.

  5. #5
    Join Date
    Dec 2010
    Posts
    28
    will var inputs give the number of inputs in total on the entire page because there are other inputs on the page too that i do not want to take into account in this bit of the code.

  6. #6
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Only the ones in #fooBar

  7. #7
    Join Date
    Dec 2010
    Posts
    28
    This line of code works at the end of the function (after textboxes have been added) but if I put it at the top of the function where I want to check if textboxes exist it doesnt work.

    I have tried this at the top and bottom of the function, it works fine at the bottom of the function but nothing happens when it is at the top of the function.
    var inputs = foo.getElementsByTagName('input').length
    alert ('inputs: '+inputs);


    I know that at the point at the top of the function, when it is first run that no text boxes have been created. I want to check at the top of the function if this value is >0 (if textboxes have already been created) but when no textboxes have previously been created it doesnt give any value at all...just exits the function.


    Also, when I add 3 textboxes the value from:
    var inputs = foo.getElementsByTagName('input').length
    is 4. It gives the value of the added textboxes plus one all the time, is this correct?

  8. #8
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    The extra 1 is the hidden input

  9. #9
    Join Date
    Dec 2010
    Posts
    28
    ok but I still want to check how many inputs there are at the beginning of the function. So the first time this is run there will be no inputs. How do I get around this?

  10. #10
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Code:
    if(foo.getElementsByTagName('input')[0]){
    //...
    }
    That will check if there is at least one input element.

  11. #11
    Join Date
    Dec 2010
    Posts
    28
    below is the code for my function now:

    function add(type) {
    var num=(document.getElementById('NoOfValues').value)-0;
    if(foo.getElementsByTagName('input')[0]){
    alert('theres at least one');
    }else{
    alert('there arent any inputs');
    }
    for (i=1;i<=num;i=i+1)
    {
    var TextBoxToCheck='Textbox'+i
    var element = document.createElement("input");
    //Assign different attributes to the element.
    element.setAttribute("type", type+i);
    element.setAttribute("value", type+i);
    element.setAttribute("name", type+i);
    var foo = document.getElementById("fooBar");
    //Append the element in page (in span).
    newline=document.createElement("br");
    foo.appendChild(newline);
    foo.appendChild(element);
    }
    var inputs = foo.getElementsByTagName('input').length
    alert ('inputs: '+inputs);
    }

    i put in the if statement at the beginning to check it works but when it is run, nothing happens?

  12. #12
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    function add(type) {
    var num=(document.getElementById('NoOfValues').value)-0;
    var foo = document.getElementById("fooBar");
    if(foo.getElementsByTagName('input').length>=1){
    alert('theres at least one');// always true as the hidden input is counted
    }else{
    alert('there arent any inputs');
    }
    for (i=1;i<=num;i=i+1)
    {
    var TextBoxToCheck='Textbox'+i
    var element = document.createElement("input");
    //Assign different attributes to the element.
    element.setAttribute("type", type+i);
    element.setAttribute("value", type+i);
    element.setAttribute("name", type+i);
    
    //Append the element in page (in span).
    newline=document.createElement("br");
    foo.appendChild(newline);
    foo.appendChild(element);
    } 
    var inputs = foo.getElementsByTagName('input').length
    alert ('inputs: '+inputs);
    }

  13. #13
    Join Date
    Dec 2010
    Posts
    28
    amazing...thank you so much, works perfectly

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles