Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    New Coder
    Join Date
    Jan 2004
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    drop-down box dynamically displays text box?

    I have a drop down that has numbers, 1-4. I want the number value chosen to dynamically display the same number of text boxes.

    For example - if the customer chooses 3 from the drop-down, I want three small text boxes to appear.

    I can only find a javascript to dynamically load another drop-down with new values - how can I do this? Can you at least point me to a script or give me an example?

  • #2
    JPM
    JPM is offline
    Regular Coder
    Join Date
    Mar 2004
    Location
    Norway
    Posts
    204
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This should work

    Code:
    <html>
    <head>
    
    <script type="text/javascript">
    
    function writeText(s)
    {
      document.getElementById('myDiv').innerHTML = ""
      var i = parseInt(s)
      for(x=0;x<i;x++)
      {
        document.getElementById('myDiv').innerHTML +="<input type='text' />"
      }
    
    }
    
    </script>
    
    </head>
    <body>
    <form>
     <select onchange="writeText(this.options[this.selectedIndex].value)">
       <option value="0">Select</option>
       <option value="1">1</option>
       <option value="2">2</option>
       <option value="3">3</option>
       <option value="4">4</option>
     </select>
    <br />
    <div id="myDiv"></div>
    
    
    </form>
    </body>
    </html>
    <JPM />

  • #3
    New Coder
    Join Date
    Jan 2004
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Any idea why this works fine on Mozilla/Netscape but not IE? It moves everything on the page as if it inserts a new form field, but the field is not visible in IE.


    Quote Originally Posted by JPM
    This should work

    Code:
    <html>
    <head>
    
    <script type="text/javascript">
    
    function writeText(s)
    {
      document.getElementById('myDiv').innerHTML = ""
      var i = parseInt(s)
      for(x=0;x<i;x++)
      {
        document.getElementById('myDiv').innerHTML +="<input type='text' />"
      }
    
    }
    
    </script>
    
    </head>
    <body>
    <form>
     <select onchange="writeText(this.options[this.selectedIndex].value)">
       <option value="0">Select</option>
       <option value="1">1</option>
       <option value="2">2</option>
       <option value="3">3</option>
       <option value="4">4</option>
     </select>
    <br />
    <div id="myDiv"></div>
    
    
    </form>
    </body>
    </html>

  • #4
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You can try looking here for additional help....

    .....Willy

  • #5
    New Coder
    Join Date
    Jan 2004
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Willy Duitt
    You can try looking here for additional help....

    .....Willy
    I tried using the code at that forumns page, but that too will not work in IE 6. It works just fine when you enter a value and hit enter in Firefox .9.3! I need something that works in both - but preferrably in IE!

  • #6
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by botsko.net
    I tried using the code at that forumns page, but that too will not work in IE 6. It works just fine when you enter a value and hit enter in Firefox .9.3! I need something that works in both - but preferrably in IE!
    Uh....

    I wrote and tested that code with IE6...
    If it is not working for you, you are doing something wrong....
    Can't possibly say what tho, since you have failed to post any code....

    .....Willy

  • #7
    New Coder
    Join Date
    Jan 2004
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Just copy and pasted, adding in HTML headers.


    PHP Code:
    <html>
    <
    head>
    <
    title>Test</title>

    <
    script type="text/javascript">
     <!--
    //
      
    function addInputs(theInput){
       var 
    table document.createElement('table');
           
    table.id 'hMembers';
       var 
    hMembers document.getElementById('hMembers');
        if(
    hMembers)theInput.parentNode.removeChild(hMembers);

        if(
    theInput.value.match(/^d+$/)){
         var 
    tbody document.createElement('tbody');
          for(var 
    i=0i<theInput.valuei++){
              var 
    row   document.createElement('tr');
              var 
    cell  document.createElement('td');
              var 
    num   document.createTextNode((i+1)+')');
                  
    cell.appendChild(num);
                  
    row.appendChild(cell);
                  
    tbody.appendChild(row);

              var 
    cell  document.createElement('td');
              var 
    name  document.createTextNode('name:');
              var 
    input document.createElement('input');
                  
    input.size 20;
                  
    input.name 'name'+(i+1);
                  
    cell.appendChild(name);
                  
    cell.appendChild(input);
                  
    row.appendChild(cell);
                  
    tbody.appendChild(row);

              var 
    cell  document.createElement('td');
              var 
    age   document.createTextNode('age:');
              var 
    input document.createElement('input');
                  
    input.size 1;
                  
    input.name 'age'+(i+1);
                  
    cell.appendChild(age);
                  
    cell.appendChild(input);
                  
    row.appendChild(cell);
                  
    tbody.appendChild(row);

              var 
    cell  document.createElement('td');
              var 
    sex   document.createTextNode('sex:');
              var 
    input document.createElement('input');
                  
    input.size 2;
                  
    input.name 'sex'+(i+1);
                  
    cell.appendChild(sex);
                  
    cell.appendChild(input);
                  
    row.appendChild(cell);
                  
    tbody.appendChild(row);
          }       
    table.appendChild(tbody);
                  
    theInput.parentNode.insertBefore(table,theInput.nextSibling);
        }         

        else{ 
    alert('Please enter only numbers in this field!');
              
    theInput.value '';
              
    theInput.focus();
        }             
      }
     
    //-->
    </script>
    </head>

    <body>
    <form method="get" action="">
    How many in the household: <input type="text" onchange="addInputs(this)">
    </form>

    </html> 

  • #8
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Somewhere you lost the escape character in the regular expression....

    if(theInput.value.match(/^\d+$/)){

    .....Willy

  • #9
    New Coder
    Join Date
    Jan 2004
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Willy Duitt
    Somewhere you lost the escape character in the regular expression....

    if(theInput.value.match(/^\d+$/)){

    .....Willy

    No its in my source code - this PHPBB program must have red that incorrectly and removed it.

  • #10
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Then attach the file because that worked for me once I fixed the missing escape char....

  • #11
    New Coder
    Join Date
    Jan 2004
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    here...
    Attached Files Attached Files

  • #12
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I don't know what to tell you....
    I just checked your attached file in both Internet Explorer 6 and Firefox 9 and it worked as intended in both.....

    .....Willy

  • #13
    New Coder
    Join Date
    Jan 2004
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Willy Duitt
    I don't know what to tell you....
    I just checked your attached file in both Internet Explorer 6 and Firefox 9 and it worked as intended in both.....

    .....Willy
    I am at work, so there may be some config problem with IE. I will test this with my personal laptop at lunch.

  • #14
    New Coder
    Join Date
    Jan 2004
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I tested this on a completely seperate computer (my home machine with XP and IE 6.0.26. The version of IE at work is 6.0.28.

    I type a number into the field: nothing happens.
    I hit enter: the page acts like it is submitting the field, no new boxes appear.

  • #15
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    onchange="addInputs(this)"

    This example uses an onchange event handler....
    It is not enough to just type a number in... You must place focus somewhere else (such as clicking on the body or another form element) for the change to register.... Try changing that to onkeyup or something if you are not comfortable with the onchange event.....

    .....Willy


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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