PDA

View Full Version : Drop down and text fields



etg4free
Sep 4th, 2007, 02:52 AM
I want to have a drop down list with numbers. If a user clicks on 3, for example, I want the page to display 3 text fields.

coothead
Sep 4th, 2007, 07:55 AM
Hi there etg4free,

have a look at this example, it may suit your requirements...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>dynamic input creation</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
#container {
width:190px;
padding:10px;
border:3px double #999;
margin:auto;
}
#container legend {
font-size:0.8em;
color:#999;
}
#inps,#sel {
border:1px solid #999;
width:160px;
padding:5px 10px;
margin:5px;
text-align:center;
}
#sel select {
border:1px solid #999;
margin:5px 0;
}
#inps input {
width:140px;
border:1px solid #999;
margin:5px 0;
}
.hide {
display:none;
}
</style>

<script type="text/javascript">
var inp=new Array();
var obj;
window.onload=function() {
obj=document.getElementById('inps');
document.forms[0][1].onchange=function() {
createInputs(this.value);
}
}

function createInputs(num) {
if(obj.childNodes.length>0){
for(c=obj.childNodes.length-1;c>=0;c--){
obj.removeChild(obj.childNodes[c]);
}
obj.className='hide';
}
for(c=0;c<num;c++){
inp[c]=document.createElement('input');
inp[c].setAttribute('name','text'+c);
obj.appendChild(inp[c]);
obj.className='';
}
}
</script>

</head>
<body>

<form action="#">

<fieldset id="container">

<legend>create inputs</legend>

<div id="sel">
<select>
<option value="0">numbers</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="16">16</option>
</select>
</div>

<div id="inps" class="hide"></div>

</fieldset>

</form>

</body>
</html>
coothead

etg4free
Sep 5th, 2007, 02:12 AM
Thank you. That's exactly what I needed!

coothead
Sep 5th, 2007, 05:02 AM
No problem, you're very welcome. ;)