Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2007-03-30
4
Medium Priority
?
285 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 2000 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

Simplify Your Workload with One Tool

How do you combat today’s intelligent hacker while managing multiple domains and platforms? By simplifying your workload with one tool. With Lunarpages hosting through Plesk Onyx, you can:

Automate SSL generation and installation with two clicks
Experience total server control

Question has a verified solution.

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

This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses

722 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