SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2007
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multiple text boxes but on demand??

    Hi is it possible with JavaScript or even AJAX to do the following:

    Have a form with 1 text box with a button next to it saying add. When the user clicks add another text box will be displayed. Thefore displaying 2 text boxes. If the the user clicks add again a third text box will be displayed.

    Any help would be great

  2. #2
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ugh, thats the problem with the fame of AJAX.

    Anyways...

    Yeah, there are a number of ways but you should post any code you have so that we can adapt it to your code.

    A very simple solution, shouldn't be used in a production environment.
    HTML Code:
    <span><input /></span><button onclick="this.previousSibling.innerHTML+='<input />'">Add text box</button>
    Test case: http://mmj48.com/test/test.html

  3. #3
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The code above clears what the user entered in the existing text fields.

    Code:
    <script type="text/javascript">
    function addTextbox() {
    	var input = document.createElement("input");
    	input.type = "text";
    	
    	document.body.appendChild(input);
    }
    </script>
    
    <input type="button" onclick="addTextbox();" value="add"><br>
    <input type="text">

  4. #4
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oops!

    HTML Code:
    <span><input /></span><button onclick="this.previousSibling.appendChild(document.createElement('input'))">Add text box</button>
    I fixed the test case.

  5. #5
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Note though that previousSibling easily fails if there is a whitespace in the HTML code, making it a bit unreliable.

  6. #6
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pepejeria View Post
    Note though that previousSibling easily fails if there is a whitespace in the HTML code, making it a bit unreliable.
    Quote Originally Posted by M-M-J
    A very simple solution, shouldn't be used in a production environment.
    I didn't write any serious code because I am assuming the OP already has the html structure.

    If he doesn't than:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Page Title</title>
    <script type="text/javascript">
    function addInput(){
    	var a = document.createElement('input');
    	a.type='text';
    	document.getElementById('inputs').appendChild(a);
    }
    </script>
    </head>
    <body>
    <span id="inputs"><input type="text" /></span><br />
    <button onclick="addInput()">Add text box</button>
    </body>
    </html>
    Last edited by M-M-J; Jan 4, 2008 at 15:02.

  7. #7
    SitePoint Zealot
    Join Date
    Oct 2007
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Firstly thanks for the replies thats exactly what I wanted. However is there a way you can limit the user to create no more than 10 boxes?

  8. #8
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jamiecottonuk View Post
    Firstly thanks for the replies thats exactly what I wanted. However is there a way you can limit the user to create no more than 10 boxes?
    Whose code are you using?

  9. #9
    SitePoint Zealot
    Join Date
    Oct 2007
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For the moment the same code you created

    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Page Title</title>
    <script type="text/javascript">
    function addInput(){
    	var a = document.createElement('input');
    	a.type='text';
    	document.getElementById('inputs').appendChild(a);
    }
    </script>
    </head>
    <body>
    <span id="inputs"><input type="text" /></span><br />
    <button onclick="addInput()">Add text box</button>
    </body>
    </html>

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    To limit the number of input elements that are created, update the script to the following

    Code Javascript:
    var inputLimit = 10;
    function countInput(id) {
        var count = 0;
        var el = document.getElementById(id);
        for (var i = 0; i < el.childNodes.length; i++) {
            if (el.childNodes[i].nodeName.toLowerCase() === 'input') {
                count++;
            }
        }
        return count;
    }
    function addInput() {
        if (countInput('inputs') < inputLimit) {
            var a = document.createElement('input');
            a.type = 'text';
            document.getElementById('inputs').appendChild(a);
        }
    }

  11. #11
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jamiecottonuk View Post
    For the moment the same code you created
    Okay;

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Page Title</title>
    <script type="text/javascript">
    var i = 0;
    function addInput(){
        if (i >= 10)
            return;
        var a = document.createElement('input');
        a.type='text';
        document.getElementById('inputs').appendChild(a);
        i++;
    }
    </script>
    </head>
    <body>
    <span id="inputs"><input type="text" /></span><br />
    <button onclick="addInput();">Add text box</button>
    </body>
    </html>
    @pmw57: KISS.

  12. #12
    SitePoint Zealot
    Join Date
    Oct 2007
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks also at the momement the text boxes are in a row where abouts would i insert an <br/> so that its a vertical row instead of a horizontal row

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jamiecottonuk View Post
    Thanks also at the momement the text boxes are in a row where abouts would i insert an <br/> so that its a vertical row instead of a horizontal row
    That would be before the appendChild part.

    Code Javascript:
    ...
    var br = document.createElement('br');
    document.getElementById('inputs').appendChild(br);
    document.getElementById('inputs').appendChild(a);

  14. #14
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jamiecottonuk View Post
    Thanks also at the momement the text boxes are in a row where abouts would i insert an <br/> so that its a vertical row instead of a horizontal row
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Page Title</title>
    <script type="text/javascript">
    var i = 0;
    function addInput(){
        if (i >= 10)
            return;
        var a = document.createElement('input');
        a.type='text';
        var inputs = document.getElementById('inputs');
        inputs.appendChild(a);
        inputs.appendChild(document.createElement('br'));
        i++;
    }
    </script>
    </head>
    <body>
    <span id="inputs"><input type="text" /></span><br />
    <button onclick="addInput();">Add text box</button>
    </body>
    </html>
    Or you could just add clear: both to your css.

  15. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    @M-M-J: Won't he then have two inputs together at the top?

    I think that the break should go before the input element.

  16. #16
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yup.

  17. #17
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Would you mind please editing your code sample so anyone else who copies and pastes will have good results.

  18. #18
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Heh, okay. I don't think he'll be back though.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Page Title</title>
    <script type="text/javascript">
    var i = 0;
    function addInput(){
        if (i >= 10)
            return;
        var a = document.createElement('input');
        a.type='text';
        var inputs = document.getElementById('inputs');
        inputs.appendChild(document.createElement('br'));
        inputs.appendChild(a);
        i++;
    }
    </script>
    </head>
    <body>
    <span id="inputs"><input type="text" /></span><br />
    <button onclick="addInput();">Add text box</button>
    </body>
    </html>

  19. #19
    SitePoint Zealot
    Join Date
    Oct 2007
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi all,

    Firtsly thanks for the previous help just wondered if it was possible to modify something. We have the following :


    Code:
    <script type="text/javascript">
    var i = 0;
    function addInput(){
        if (i >= 10)
            return;
        var a = document.createElement('input');
        a.type='text';
        var inputs = document.getElementById('inputs');
        inputs.appendChild(document.createElement('br'));
        inputs.appendChild(a);
        i++;
    }
    </script>
    If I want to change the value of i based upon a value of a text box I would of thought i would have to do the following:

    Code:
    var i = document.form.keywordsNumber.value
    but then this allows unlimited number of text boxes to be generated no what what the value of the text box is

  20. #20
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jamiecottonuk View Post
    If I want to change the value of i based upon a value of a text box I would of thought i would have to do the following:

    Code:
    var i = document.form.keywordsNumber.value
    but then this allows unlimited number of text boxes to be generated no what what the value of the text box is
    So check the conditions after it's been assigned. I is not a good variable to use to store values, because it is in strong danger of being overwritten when someone carelessly uses a for loop.

    Code Javascript:
    var value = document.form.keywordsNumber.value;
    if (value =< 10) {
        // create text boxes
    }

    Or you may want to limit the total number of input boxes

    Code Javascript:
    var total = 0;
    var value = 0;
    ...
    value = document.form.keywordsNumber.value;
    if (total + value > 30) {
        value = 30 - total;
    }
    // create text boxes
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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