Solved

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

Posted on 2007-03-30
4
254 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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

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 …
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…

821 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