SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2003
    Location
    NJ
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Drop down menu -> dynamically create # of text boxes

    Good evening all,

    I have an idea which will require a different number of text boxes to be created/visible to the user pending the selection of a number from a drop down box (ie user selects 4, 4 rows of text boxes will be created, all having different names, adjacent or below the drop down box).

    I'm using php as well so there's an option for creating the boxes. I'd like to not have to reload the entire form though, because it is part of a multi-page form and things could get screwy.

    First of all, can this be done reasonably without reloading the form page everytime, or if not, what is the best way to go about this?

    Any help, suggestions, code is greatly appreaciated.

    Peace,
    Justin

  2. #2
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <title>untitled</title>
    <style type="text/css">
    
    body, html {
    	margin: 0;
    	background: #eee;
    }
    
    #boxer, #OK {
    	width: 100px;
    	margin: 18px 120px;
    	font: bold 12px tahoma, verdana, arial, sans-serif;
    	color: #000;
    	border: 1px #000 solid;
    	background: #fff;
    }
    .dlabel {
    	display: block;
    	font: normal 10px tahoma, verdana, arial, sans-serif;
    	letter-spacing: .1em;
    	padding: 2px 12px;
    	background: #efefff;
    }
    .dinput {
    	width: 180px;
    	font: 12px tahoma, verdana, arial, sans-serif;
    	color: #000;
    	border: 1px #000 solid;
    	background: #cdf;
    }
    
    </style>
    <script type="text/javascript">
    
    var dname = 'thingy'; //base text input name
    
    function addInput(s)
    {
    	if (!s.value)
    		return;
    	var want = Number(s.value), got = 0;
    	while (document.getElementById(dname + (got + 1)))
    		++got;
    	var dcontainer = document.getElementById('dbox');
    	if (got < want)
    	{
    		for (var i = got; i++ < want;)
    		{
    			var dlabel = document.createElement('label');
    			dlabel.setAttribute('htmlFor', dname + i);
    			dlabel.className = 'dlabel';
    			dlabel.appendChild(document.createTextNode(dname + ' ' + i + (i < 10 ? '  ' : '  ')));
    			var dinput = document.createElement('input');
    			dinput.setAttribute('type', 'text');
    			dinput.setAttribute('name', dname + i);
    			dinput.setAttribute('id', dname + i);
    			dinput.setAttribute('value', '');
    			dinput.className = 'dinput';
    			dlabel.appendChild(dinput);
    			dcontainer.appendChild(dlabel);
    		}
    	}
    	else for (var i = got; i > want; --i)
    			dcontainer.removeChild(dcontainer.lastChild);
    }
    
    </script>
    </head>
    <body>
    <form>
    <select id="boxer" onchange="return addInput(this)">
    <option value="">add inputs</option>
    <option value=""></option>
    <option value="1">add 1</option>
    <option value="2">add 2</option>
    <option value="3">add 3</option>
    <option value="4">add 4</option>
    <option value="5">add 5</option>
    <option value="6">add 6</option>
    <option value="7">add 7</option>
    <option value="8">add 8</option>
    <option value="9">add 9</option>
    <option value="10">add 10</option>
    </select>
    <div id="dbox">
    </div>
    <input id="OK" type="submit" value="OK" />
    </form>
    </body>
    </html>
    
    ::: certified wild guess :::


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
  •