Javascript form

[l203422]

I was hoping that someone will be able to help.

What I need is a webpage example of a form whereby the user selects a radio button or dropdown box. Then a reply is provided by whatever means available with a different reply depending on the option selected from the radio buttons or menu.

eg. Radio buttons Football
Rugby
Tennis

Once selected a reply will appear depending on the choice made. Thanks in advance for any help.

[Smokie]

Have a look at the javascript examples over at http://www.irt.org

Im sure they have an article on a dynamic javascript form.

[spinal007]

the same question was asked just a few weeks ago...
have a look at this:
http://www.webforumz.com/topic.asp?TOPIC_ID=1291

or, if you have any scripting knowledge,this should do:

Code: Select all

<SCRIPT language="JSCript">
/* BEGIN BROWSER HANDLING, DON'T TOUCH */
isNS4 = (document.layers) ? true : false;
isIE4 = (document.all && !document.getElementById) ? true : false;
isIE5 = (document.all && document.getElementById) ? true : false;
isNS6 = (!document.all && document.getElementById) ? true : false;
function getObj(elementName){
  if(isNS4){ return document.layers[elementName]; }
  else if (isIE4 || isIE5){ return document.all(elementName); }
  else if (isNS6){ return document.getElementById(elementName); }
}
function Show(id){ if(getObj(id)){ getObj(id).style.display = 'block'; } }
function Hide(id){ if(getObj(id)){ getObj(id).style.display = 'none'; } }
/* END BROWSER HANDLING */

/*
we'll need to remeber which item we display so that
we can hide it later on, when we want to display a different item
*/
var previous_state; // this var will hold the id of the current state
var previous_city; // this var will hold the id of the current city

// this function will display a list of cities according to their state
function ShowCities(state){
  this_state = "selCities_" + state;
  if(previous_state){ Hide(previous_state); }
  if(previous_city){ Hide(previous_city); }
  Show(this_state);
  previous_state = this_state;
}

// this function will display the address according to the chosen city
function ShowAddress(city){
  this_city = "divAddress_" + city;
  if(previous_city){ Hide(previous_city); }
  Show(this_city);
  previous_city = this_city;
}
</SCRIPT>

<table width=100% border=1 cellspacing=5>
  <tr>
    <td valign=top width=33%>
      <select name="state" id="state" onChange="ShowCities(this.value);">
        <OPTION value="NY">New York</OPTION>
        <OPTION value="LA">Los Angeles</OPTION>
      </select>
      <HR>
      this list holds all the states.
      we''l use thbe value of this list to display the cities
    </td>
    <td valign=top width=33%>
      <select id="selCities_NY" onChange="ShowAddress(this.value);" style="display:none;">
        <OPTION value="City1">City 1</OPTION>
        <OPTION value="City2">City 2</OPTION>
        <OPTION value="City3">City 3</OPTION>
        <OPTION value="City4">City 4</OPTION>
        <OPTION value="City5">City 5</OPTION>
      </select>
      <select id="selCities_LA" onChange="ShowAddress(this.value);" style="display:none;">
        <OPTION value="City6">City 6</OPTION>
        <OPTION value="City7">City 7</OPTION>
        <OPTION value="City8">City 8</OPTION>
        <OPTION value="City9">City 9</OPTION>
      </select>
      <HR>
      the list of cities will show up here. you can add as many as you want, but
      you MUST set the id attribute to:
      <LI>"selCities_[state id]"
    </td>
    <td valign=top width=33%>

<div class=Address id="divAddress_City1" style="display:none;">
  NY
addres for city 1
111111111
</div>
<div class=Address id="divAddress_City2" style="display:none;">
  NY
addres for city 2
222222222
</div>
<div class=Address id="divAddress_City3" style="display:none;">
  NY
addres for city 3
33333333
</div>
<div class=Address id="divAddress_City4" style="display:none;">
  NY
addres for city 4
44444444
</div>
<div class=Address id="divAddress_City5" style="display:none;">
  NY
addres for city 5
55555555
</div>
<div class=Address id="divAddress_City6" style="display:none;">
  LA
addres for city 6
66666666
</div>
<div class=Address id="divAddress_City7" style="display:none;">
  LA
addres for city 7
7777777
</div>
<div class=Address id="divAddress_City8" style="display:none;">
  LA
addres for city 8
88888888
</div>
<div class=Address id="divAddress_City9" style="display:none;">
  LA
addres for city 9
99999999
</div>
      <HR>
      the addresses will show up here. you can add as many as you want, but
      again, you MUST set the id attribute to:
      <LI>"divAddress_[state id]"
    </td>
  </tr>
</table>