SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Jun 2001
    Location
    Jakarta
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dynamic Input Textbox

    Hi...
    I wonder how can I make a dynamic input textbox. Example : first when the page load, there is only 1 input textbox and a combo box so user can select how many input textbox they want. After the user click then the page is reload again with input textbox amount that user have specified. Thanks for the help

  2. #2
    ********* obeah makeda's Avatar
    Join Date
    Jun 2001
    Location
    rollin' on dubs
    Posts
    492
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is a solution that would work with IE:

    attatch an onChangeEvent to your combo box so that whenever it changes it calls a function and passes it the value of the selection. so for example, "One Box" has a value="1", "two boxes" value="2" etc... also in the body of your page have a div tag where your text boxes will go ex: <div id="divComboBoxes"></div>

    then write your function which will run a loop for a # of times equal to the value passed to it. ex:

    function writeBoxes(iNumOfTimes) {
    var sTableString="<table>";
    for (var i=0; i<iNumOfTimes; i++)
    sTableString += "<tr><td><input type=\"text\"></td></tr>"
    }
    sTableString += "</table>";
    divComboBoxes.innerHTML = sTableString;

    }

  3. #3
    SitePoint Zealot
    Join Date
    Jun 2001
    Location
    Jakarta
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Makeda,
    Thanks for replying. I tried your instruction but I'm not sure exactly how to do it. Here is my coding :

    <html>
    <head>
    <title>Dynamic Form</title>
    <script>
    function writeBoxes(iNumOfTimes) {
    var sTableString="<table>";
    for (var i=0; i<iNumOfTimes; i++)
    sTableString += "<tr><td><input type=\"text\"></td></tr>"
    }
    sTableString += "</table>";
    divComboBoxes.innerHTML = sTableString;
    }
    </script>
    </head>

    <body>
    <form name="InputForm">
    <table>
    <tr>
    <td>Name /td>
    <td><input name="name"></td>
    </tr>
    <div id="divComboBoxes"></div>
    <tr>
    <td>Total recipient /td>
    <td><select name="amount" onChange="writeBoxes(amount)">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    </select>
    </tr>
    </table>
    </form>

    </body>
    </html>

    It's not working Can you tell me what the problem is ? Thanks

  4. #4
    SitePoint Zealot
    Join Date
    Jun 2001
    Location
    Jakarta
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I have notice some wrong (the red color). It now working but only display one textbox whether I choose the numbers. Seem like I can't pass the value. How can I do that ?

    <html>
    <head>
    <title>Dynamic Form</title>
    <script language="JavaScript">

    function writeBoxes(iNumOfTimes) {

    var sTableString = "<table>";
    for (var i=0; i<iNumOfTimes; i++) {
    sTableString += "<tr><td><input type=\"text\"></td></tr>"
    }
    sTableString += "</table>";
    divComboBoxes.innerHTML = sTableString;
    }
    </script>
    </head>

    <body>
    <form name="InputForm">
    <table>
    <tr>
    <td>Name /td>
    <td><input name="name"></td>
    </tr>
    <tr>
    <td>Total recipient /td>
    <td>
    <select name="amount" onChange="writeBoxes(true) ">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    </select>
    </tr>
    </table>
    <div id="divComboBoxes"></div>
    </form>

    </body>
    </html>

  5. #5
    ********* obeah makeda's Avatar
    Join Date
    Jun 2001
    Location
    rollin' on dubs
    Posts
    492
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    use this:

    <select name="amount" onChange="writeBoxes(this.value) ">

    once you add this, everything should work fine as i tested it with your code.

  6. #6
    SitePoint Zealot
    Join Date
    Jun 2001
    Location
    Jakarta
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow...it's working now Thanks a lot Makeda.
    There is one more thing I want to ask.
    This script I combine with my ASP programming. I wonder how to name the textbox.
    sTableString += "<tr><td><input type=\"text\" name=strname+i ></td></tr>"
    But I think it's not working since I try to write the value with ASP and result is empty.

  7. #7
    ********* obeah makeda's Avatar
    Join Date
    Jun 2001
    Location
    rollin' on dubs
    Posts
    492
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well if you are trying to write the name for the textbox with ASP, then you need to do something like this:

    sTableString += "<tr><td><input type=\"text\" name=\"<%=strname+i%>\"></td></tr>"

    However, I am not sure what you are trying to do. If you don't get it working but can provide more info., I may be able to help.

  8. #8
    SitePoint Zealot
    Join Date
    Jun 2001
    Location
    Jakarta
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Once again thanks Makeda. It already work


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
  •