script to refresh form based on drop down choice?

[babs]

hi there,

i'm in need of a script that would allow me to change a form on an php page based on what a user chooses in a drop down menu. i.e. if the user says they want 3 things i want the page to refresh and have 3 form items to specify details about each of the 3 items. or 2 if they choose 2, etc etc.

thanks in advance!

[tamago]

You don't even need to refresh to do this -- you can just use JavaScript to dynamically insert however many fields you want, there and then.

For example:<script type="text/javascript">
function showFields(num){
container = document.getElementById('fieldsGoHere')
container.innerHTML = ''

for(i = 0; i < parseFloat(num); i ++){
container.innerHTML += '<input type="text" /><br />'
}
}
</script>

<select onchange="showFields(this.options[this.selectedIndex].value)">
<option value="0">Choose:</option>
<option value="1">Show 1 Field</option>
<option value="2">Show 2 Fields</option>
<option value="3">Show 3 Fields</option>
<option value="4">Show 4 Field</option>
</select>

<div id="fieldsGoHere"></div>This is just a very basic example, but is it the kind of thing you're after?

[babs]

yes, that appears to be exactly what i want! thanks very much - am going try it in my code today.

:)

[tokey666]

I know this is an old one, but it is so close to what I want, I gotta revive it. :)

I am wanting to display a SET of form elements, instead of just one input box, based on the number the user selects.

InnerHTML doesn't work of course because of the long length of the form.

The following code should appear x number of times depending on what the user inputs.


Name:
<input type="text" name="Name" id="Name" />

Date Of Birth:
<select name="month">
<option value="na" selected="selected">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>

<select name="day">
<option value="na" selected="selected">Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>

<select name="year">
<option value="na" selected="selected">Year</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
<option value="1946">1946</option>
<option value="1945">1945</option>
<option value="1944">1944</option>
<option value="1943">1943</option>
<option value="1942">1942</option>
<option value="1941">1941</option>
<option value="1940">1940</option>
<option value="1939">1939</option>
<option value="1938">1938</option>
<option value="1937">1937</option>
<option value="1936">1936</option>
<option value="1935">1935</option>
<option value="1934">1934</option>
<option value="1933">1933</option>
<option value="1932">1932</option>
<option value="1931">1931</option>
<option value="1930">1930</option>
<option value="1929">1929</option>
<option value="1928">1928</option>
<option value="1927">1927</option>
<option value="1926">1926</option>
<option value="1925">1925</option>
<option value="1924">1924</option>
<option value="1923">1923</option>
<option value="1922">1922</option>
<option value="1921">1921</option>
<option value="1920">1920</option>
<option value="1919">1919</option>
<option value="1918">1918</option>
<option value="1917">1917</option>
<option value="1916">1916</option>
<option value="1915">1915</option>
<option value="1914">1914</option>
<option value="1913">1913</option>
<option value="1912">1912</option>
<option value="1911">1911</option>
<option value="1910">1910</option>
<option value="1909">1909</option>
</select>
Gender:
<select name="Gender">
<option value="na" selected="selected">Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>

Any suggestions?

[Philip M]

The following code should appear x number of times depending on what the user inputs.



Have you looked at the replies you were given in
http://www.codingforums.com/showthread.php?t=172539

One way is to create a number of divs with style="display:none" and change them to style.display="block" according to number selected by the user. There are doubtless more sophisticated ways as well.

[tokey666]

Hey Phillip,
Thanks for the reply, and for the help on the other thread as well.

I really like the above code because of a) the simplicity and b) because it is open ended and doesnt stop at a finite number. The number can go from 1 to 10000 if it needed to, whereas I would have to manually build six HUGE divs with your suggestion. I am just thinking for future applications, if something like this would ever be needed requiring a selection like that.