Solved

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

Posted on 2007-03-30
4
219 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
Comment Utility
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
Comment Utility
//var nr=5;   was just for testing purposes and I forgot it there  ;) ...
0
 
LVL 28

Expert Comment

by:TName
Comment Utility
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
Comment Utility
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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
The viewer will learn how to dynamically set the form action using jQuery.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

744 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now