Solved

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

Posted on 2007-03-30
4
245 Views
Last Modified: 2013-11-19
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.
0
Comment
Question by:xfvgdrthbdtyvhgscv
  • 4
4 Comments
 
LVL 28

Expert Comment

by:TName
ID: 18827861
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
 
LVL 28

Expert Comment

by:TName
ID: 18827863
//var nr=5;   was just for testing purposes and I forgot it there  ;) ...
0
 
LVL 28

Expert Comment

by:TName
ID: 18827867
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
 
LVL 28

Accepted Solution

by:
TName earned 500 total points
ID: 18827925
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

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn how to count occurrences of each item in an array.

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question