SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2006
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    drop down to control number of text boxes shown

    Hi,
    The title says it all really. I'm not sure where to start with this and I expect its a common requirement that has a number of solutions ?

    I need a drop down box with numbers 1,2,3,4....listed. When the user selects 2, two text boxes appear below, ajax style ! if they select 3, three boxes etc etc.

    Appreciate anyone who can give me a start on this problem.

    Thanks in advance.

  2. #2
    SitePoint Evangelist vikrantkorde's Avatar
    Join Date
    Jun 2004
    Location
    Mumbai, India
    Posts
    541
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is not exactly what u asked for but you can use this for guidance

    Code:
    <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title> New Document </title>
    <meta name="Generator" content="EditPlus">
    <meta name="Author" content="Vikrant Korde">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <script>
    var Cnt=0;
    
    </script>
    </head>
    
    <body>
    <a href="javascript:AddFreind();" id="hylkAddFreinds">Add More Freinds</a>
    <script>
    /*
    var newText = document.createTextNode("Four score and seven years ago...")
    var newElem = document.createElement("P")
    newElem.id = "newestP"
    newElem.appendChild(newText)
    document.body.appendChild(newElem)
    */
    function AddFreind(){ 
    //    var divFreinds=document.getElementById('divFreinds'); 
        Cnt=Cnt+1; 
        var strFreind="<table border='0' cellspacing='0' cellpadding='0' width='100&#37;' align='center'>" + "<tr>" + "<td Class='darkgrey'>Name" + Cnt + "</td>" + "<td><input type='text' id='txtFriendName" + Cnt + "' Class='textBox'></td>" + "<td Class='darkgrey'>Email Address" + Cnt + "</td>" + "<td align='right'><input type='text' id='txtFriendEmail" + Cnt + "' Class='textBox'></td>" + "</tr>" + "</table>"; 
        //document.write(strFreind);
        //divFreinds.innerHTML=divFreinds.innerHTML +strFreind; 
        var newText = document.createTextNode("Friend Details");
        var newElem = document.createElement("P");
        newElem.id = "newestP";
        newElem.appendChild(newText);
    
        var newElem1 = document.createElement("input");
        newElem1.id = "textP";
        newElem1.type = "text";
        newElem.appendChild(newElem1);
        document.body.appendChild(newElem);
    }
    </script>
    <A HREF="#" onclick="window.returnValue='YES';window.close();" >Close</A>
    </body>
    </html>
    Vikrant Korde
    S Y S T I M E, Mhape,
    Mumbai, Maharashtra, India.

  3. #3
    do righteous deeds
    Join Date
    Aug 2006
    Location
    Türkiye Turkey تركيى
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
     
    <script type="text/javascript">
    
    function addInput(){
    
    var el = document.getElementById('select');
    var div = document.getElementById('divid');
    while(div.hasChildNodes()) { div.removeChild(div.childNodes[0]); }
    
    if(el.selectedIndex > 0) {
    for(var i = 0; i<el.options[el.selectedIndex].value; i++) {
    var inp = document.createElement("input");
    inp.type="text";
    div.appendChild(inp);  
    }
    }
    }
    </script>
    
    <body>
    
    <select id="select" onchange="addInput()">
    <option value="">choice</option>
    <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>
    <div id="divid"></div>

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2006
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Muazzez,
    That's pretty much exactly what I need. Only two questions:

    1- I'd like to have the text boxes appear below each other, rather than side by side. Should I use css to do that ?

    2- Can I apply a naming convention to the text boxes 'name' attribute ? e.g. email1, email2, email3.....

    Thanks again to you and other input, much appreciated.

  5. #5
    do righteous deeds
    Join Date
    Aug 2006
    Location
    Türkiye Turkey تركيى
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
     
    <script type="text/javascript">
    
    function createNamedElement(type, name) {
       var element = null;
       // Try the IE way; this fails on standards-compliant browsers
       try {
          element = document.createElement('<'+type+' type="text" name="'+name+'">');
       } catch (e) {
       }
       if (!element || element.nodeName != type.toUpperCase()) {
          // Non-IE browser; use canonical method to create named element
          element = document.createElement(type);
          element.name = name;
          element.setAttribute('type','text');
       }
       return element;
    }
    
    function addInput(){
    
    var el = document.getElementById('select');
    var div = document.getElementById('divid');
    div.style.display = "block";
    while(div.hasChildNodes()) { div.removeChild(div.childNodes[0]); }
    
    if(el.selectedIndex > 0) {
    for(var i = 0; i<el.options[el.selectedIndex].value; i++) {
    var em = document.createElement('em');
    em.innerHTML = " e-mail "+(i+1) +"  :  ";
    em.style.color = "yellow";
    var myname = "email"+(i+1)  ;
    var br = document.createElement('br');
    var br2 = document.createElement('br') ;
    div.appendChild(em);
    div.appendChild(createNamedElement("input", myname) ); 
    div.appendChild(br);  
    div.appendChild(br2); 
    }
    }
    alert(document.body.innerHTML);
    }
    </script>
    
    <body>
    
    <select id="select" onchange="addInput()">
    <option value="">choice</option>
    <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>
    <div id="divid" style="display:none;width:250px;padding:10px 0px 0px 5px;background-color:maroon;"><br> </div>
    Code:
      
    <script type="text/javascript">
    
    function addInput(){
    var arr = ["aaaa","bbbb","cccc","dddd","eeee"];
    var el = document.getElementById('select');
    var div = document.getElementById('divid');
    div.style.display = "block";
    while(div.hasChildNodes()) { div.removeChild(div.childNodes[0]); }
    
    if(el.selectedIndex > 0) {
    for(var i = 0; i<el.options[el.selectedIndex].value; i++) {
    var em = document.createElement('em');
    em.innerHTML = arr[i] +"  :  ";
    em.style.color = "yellow";
    var myname = "email"+(i+1)  ;
    
    try
    {
     var inp = document.createElement('<input type="text" name='+myname+' >');
    }
    catch(e)
    {
      var inp = document.createElement("input");
      inp.type="text";
      inp.name= myname;
    }
    var br = document.createElement('br');
    var br2 = document.createElement('br') ;
    div.appendChild(em);
    div.appendChild(inp); 
    div.appendChild(br);  
    div.appendChild(br2); 
    }
    }
    alert(document.body.innerHTML);
    }
    </script>
    
    <body>
    
    <select id="select" onchange="addInput()">
    <option value="">choice</option>
    <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>
    <div id="divid" style="display:none;width:250px;padding:10px 0px 0px 5px;background-color:maroon;"><br> </div>
    Code:
      
    <script type="text/javascript">
    
    function addInput(){
    var arr = [
    "<p style='color:blue; text-align:center;'>aaaa : <input type='text' name='email1'></p>",
    "<p style='color:blue; text-align:center;'>bbbb : <input type='text' name='email2'></p>",
    "<p style='color:blue; text-align:center;'>cccc : <input type='text' name='email3'></p>",
    "<p style='color:blue; text-align:center;'>dddd : <input type='text' name='email4'></p>",
    "<p style='color:blue; text-align:center;'>eeee : <input type='text' name='email5'></p>",
    ];
    var el = document.getElementById('select');
    var div = document.getElementById('divid');
    div.style.display = "block";
    while(div.hasChildNodes()) { div.removeChild(div.childNodes[0]); }
    
    if(el.selectedIndex > 0) {
    for(var i = 0; i<el.options[el.selectedIndex].value; i++) {
    div.innerHTML = div.innerHTML + arr[i];
    }
    }
    alert(document.body.innerHTML);
    }
    </script>
    
    <body>
    
    <select id="select" onchange="addInput()">
    <option value="">choice</option>
    <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>
    <div id="divid" style="display:none;width:250px;padding:5px;background-color:orange;"></div>
    Last edited by muazzez; May 27, 2007 at 09:21. Reason: corrected

  6. #6
    SitePoint Enthusiast
    Join Date
    May 2006
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Muazzez,
    Thats perfect, thanks very much for your input.

    Richard.


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
  •