Creating a form that will change the number of fields based on user input

[ghadley_00]

Hi,

I have a form that collects information about up to 5 items. I would
like the user to be able to select from a drop down menu how many items
for which they want to compare information, and then have the form
change the number of input fields accordingly.

In other words, if the user selects enter info for 3 items, then input
fields for only 3 items are shown, if they change it to 4 items, then a
fourth column shows up in the table with the appropriate input fields.

Any advice that could be provided would be greatly appreciated.

Best wishes,

George Hadley
(e-mail address removed)

 

[Evertjan.]

wrote on 04 jan 2006 in comp.lang.javascript:

I have a form that collects information about up to 5 items. I would
like the user to be able to select from a drop down menu how many items
for which they want to compare information, and then have the form
change the number of input fields accordingly.

In other words, if the user selects enter info for 3 items, then input
fields for only 3 items are shown, if they change it to 4 items, then a
fourth column shows up in the table with the appropriate input fields.

Any advice that could be provided would be greatly appreciated.

Show us what you have come up with sofar.

Tip:
You can make
<input style='display:none;' id='v1'>
appear with:
n=1
document.getElementById('v'+n).style.display=''

 

[sunilp]

U can add the text fields dynamically.

addToDiv(div,n) {
var str = "<input type='text' id='textGrp'>";
for(i=0;i<n;i++) {
div.innerHTML += str;
}
}

Call this function after selecting a value in select box.
you can pass div or any other object...something like this.,

onSelectBoxChange() {
var noOfItems;
//get the noOfItems selected.
var myDiv = document.getElementById("divToWhichToAddTextFields");
addToDiv(myDiv,noOfItems);
}

At server side you can get array of values for parameter ''textGrp''

--Sunil