How to dynamically alter number of text boxes in html form?

Hello all,

I have an html form for inputting information.  Different users have dsifferent numbers of items to input.  Each item goes into a separate text box.  To make the page look clean, I don't want to just have the maximum number of text boxes.  I want to have a drop down select at the top where users select the number of items they have to put in.  Then that number of input text boxes appear ready for input.

I could do this thorugh cgi, ina Perl script, for example, but I think the re-appearing page will confuse users.  I'd rather it just appear.

Looking for suggestions on how to do this.

Thanks.
LVL 1
xfvgdrthbdtyvhgscvAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

TNameCommented:
Hi, have a look at this javascript solution:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>  
<style>
form {
  border:1px solid #ccc;
  width:400px;
  height:300px;
  margin-top:20px;
  margin-left:30px;
}
</style>
<script>
var onlyOnce=0;
function makeTextFields(obj)  {
   var nr=obj.value;
   //var nr=5;
   if ((nr>0)&&(onlyOnce==0)) {
     onlyOnce++;
     var txt;
     var label;
     var br;
     for (i=0;i<nr;i++) {
       txt=document.createElement('INPUT');
       txt.type='text';
       label=document.createElement('SPAN');
       label.innerHTML='Input field '+i+'  ';
       br=document.createElement('BR');
       document.mainForm.appendChild(label);
       document.mainForm.appendChild(txt);
       document.mainForm.appendChild(br);
     }
   }
}
</script>
</head>
<body>

<br>
<form name="mainForm">
<select onChange="makeTextFields(this)">
<option value="0">0
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
</select>
<br><br>
</form>
</body>
</html>

0
TNameCommented:
//var nr=5;   was just for testing purposes and I forgot it there  ;) ...
0
TNameCommented:
Oh, and you should maybe better change this line:

label.innerHTML='Input field '+i+'  ';

to this (so that the numbering of the input fields starts at 1):

label.innerHTML='Input field '+(i+1)+'  ';
0
TNameCommented:
For the example above, you should also add ids for the textfields, e.g.
       txt=document.createElement('INPUT');
       txt.type='text';
       txt.id='txt'+i;  <------------ here


--------------------------------------------------



On the other hand, you could simply show input fields that are hidden with display:none (instead of creating them):


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>  
<style>
form {
  border:1px solid #ccc;
  width:400px;
  height:300px;
  margin-top:20px;
  margin-left:30px;
}
input.hiddenInput {
  margin-left:20px;
  display:none;
}
span.hiddenSpan {
  margin-left:20px;
  display:none;
}
</style>
<script>
var onlyOnce=0;
function showTextFields(obj)  {
   var nr=obj.value;
   if ((nr>0)&&(onlyOnce==0)) {
     onlyOnce++;
     var lb;
     var txt;
     for (i=0;i<nr;i++) {
       lb=document.getElementById('sp'+i);
       txt=document.getElementById('txt'+i);
       lb.style.display='inline';
       txt.style.display='block';
     }
   }
}
</script>
</head>
<body>
<form name="mainForm">
<select onChange="showTextFields(this)">
<option value="0">0
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
</select>
<br><br>
<span class="hiddenSpan" id="sp0">Input field 1</span><input type="text" class="hiddenInput" name="hiddenTxtInput" id="txt0">
<span class="hiddenSpan" id="sp1">Input field 2</span><input type="text" class="hiddenInput" name="hiddenTxtInput" id="txt1">
<span class="hiddenSpan" id="sp2">Input field 3</span><input type="text" class="hiddenInput" name="hiddenTxtInput" id="txt2">
<span class="hiddenSpan" id="sp3">Input field 4</span><input type="text" class="hiddenInput" name="hiddenTxtInput" id="txt3">
<span class="hiddenSpan" id="sp4">Input field 5</span><input type="text" class="hiddenInput" name="hiddenTxtInput" id="txt4">
</form>
</body>
</html>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.