basic form action 1

vasox56 · Aug 16, 2007

hi. i have basic skills in javascript and am aware of the accessibility issues javascript causes.

basically i want my form to have two radio button choices..

o From Heathrow
o To Heathrow

if they choose from Heathrow, i want a drop down to appear below like so

To:
[drop down]

if they choose To Heathrow, i want a drop down to appear below like so

From:
[drop down]

can anyone give me a small snippet of code that will achieve this?

thanks

feherke · Aug 16, 2007

Hi

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
div#fromdiv,div#todiv {
  display: none;
}
</style>
<script type="text/javascript">
function ch(what)
{
  document.getElementById('fromdiv').style.display=what.value=='from'?'block':'none'
  document.getElementById('todiv').style.display=what.value=='to'?'block':'none'
}
</script>
</head>
<body>
<form action="#">
<p>
<input type="radio" name="direction" value="from" onclick="ch(this)"> From Heathrow<br>
<input type="radio" name="direction" value="to" onclick="ch(this)"> To Heathrow<br>
</p>
<div id="fromdiv">
From<br>
<select name="fromlist" id="fromlist">
<option>From Value</option>
</select>
</div>
<div id="todiv">
To<br>
<select name="tolist" id="tolist">
<option>To Value</option>
</select>
</div>
</form>
</body>
</html>

Feherke.

http://rootshell.be/~feherke/

vasox56 · Aug 16, 2007

hi, thats great.. thanks.. a couple of things.

take a look at this..

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
div#fromdiv,div#todiv {
  display: none;
}
</style>
<script type="text/javascript">
function ch(what)
{
  document.getElementById('fromdiv').style.display=what.value=='from'?'block':'none'
  document.getElementById('todiv').style.display=what.value=='to'?'block':'none'
}
</script>
</head>
<body>
<form action="#">
<p>
<input type="radio" name="direction" value="from" onclick="ch(this)"> From Heathrow<br>
<input type="radio" name="direction" value="to" onclick="ch(this)"> To Heathrow<br>
</p>
<div id="fromdiv">
Transfer to:<br>
<select name="fromlist" id="fromlist">
<option>London Area</option>
<option>Another Airport</option>
<option>Seaport/Cruise Terminal</option>
<option>Train Station</option>
<option>Outside London</option>
</select>
</div>
<div id="todiv">
Pickup from:<br>
<select name="tolist" id="tolist">
<option>London Area</option>
<option>Another Airport</option>
<option>Seaport/Cruise Terminal</option>
<option>Train Station</option>
<option>Outside London</option>
</select>
</div>
</form>
</body>
</html>

what i would like is to load another drop down underneath the first drop down..

each drop down option will load their own separate drop down below..

however, if they choose Outside London, i want the page to instantly re-direct to another page.. such as newform.asp

feherke · Aug 16, 2007

Hi

vasox56 said:
what i would like is to load another drop down underneath the first drop down..

What you mean, "load" ?
[ul]
[li]Load with AJAX ? See faq216-6294, by Dan.[/li]
[li]Just show ? Apply a similar thing like for the [tt]radio[/tt] buttons.[/li]
[/ul]

Feherke.

http://rootshell.be/~feherke/

vasox56 · Aug 16, 2007

yes.. this was my suspicion, i didnt know whether i should move str8 to ajax..

when i say load.. i mean goto a new url.

so imagine this form is on page1.asp

when Outside London is selected, page2.asp instantly is loaded
(not loaded onto page1.asp, but simple opened in the same window str8 away.. without a submit button)

vasox56 · Aug 16, 2007

yes..

the first drop down that loads, when an option is selected, it can just call and display another drop down underneath it like the radio button did.

feherke · Aug 16, 2007

Hi

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
div#fromdiv,div#todiv,
div#ladiv,div#aadiv,div#sctdiv,div#tsdiv {
  display: none;
}
</style>
<script type="text/javascript">
function ch(what)
{
  document.getElementById('fromdiv').style.display=what.value=='from'?'block':'none'
  document.getElementById('todiv').style.display=what.value=='to'?'block':'none'
}
function ch2(what)
{
  var divlist=new Array('la','aa','sct','ts')
  if (what.selectedIndex==5) {
    location.href='[URL unfurl="true"]http://google.com/search?q=Heathrow'[/URL]
    return
  }
  for (var i=0;i<divlist.length;i++)
    document.getElementById(divlist[i]+'div').style.display=what.selectedIndex==i+1?'block':'none'
}
</script>
</head>
<body>
<form action="#">
<p>
<input type="radio" name="direction" value="from" onclick="ch(this)"> From Heathrow<br>
<input type="radio" name="direction" value="to" onclick="ch(this)"> To Heathrow<br>
</p>
<div id="fromdiv">
Transfer to:<br>
<select name="fromlist" id="fromlist" onchange="ch2(this)">
<option>-</option>
<option>London Area</option>
<option>Another Airport</option>
<option>Seaport/Cruise Terminal</option>
<option>Train Station</option>
<option>Outside London</option>
</select>
</div>
<div id="todiv">
Pickup from:<br>
<select name="tolist" id="tolist" onchange="ch2(this)">
<option>-</option>
<option>London Area</option>
<option>Another Airport</option>
<option>Seaport/Cruise Terminal</option>
<option>Train Station</option>
<option>Outside London</option>
</select>
</div>
<div id="ladiv">
London Area:<br>
<select name="lalist" id="lalist">
<option>London Area Value</option>
</select>
</div>
<div id="aadiv">
Another Airport:<br>
<select name="aalist" id="aalist">
<option>Another Airport Value</option>
</select>
</div>
<div id="sctdiv">
Seaport/Cruise Terminal:<br>
<select name="sctlist" id="sctlist">
<option>Seaport/Cruise Terminal Value</option>
</select>
</div>
<div id="tsdiv">
Train Station:<br>
<select name="tslist" id="tslist">
<option>Train Station Value</option>
</select>
</div>
</form>
</body>
</html>

Feherke.

http://rootshell.be/~feherke/

vasox56 · Aug 16, 2007

mate, you have just acheived legend status

vasox56 · Aug 17, 2007

hi.. look here..

http://www.londonheathrowcars.com/small_menu.htm

when both drop downs have been called.. and you click one of the radios.. i would like only the top drop down to display.. and also for it to display the '-' option.. as if the process had been restarted.. rather then display the div how it was in its previous state..

does that make sense??

here is the page code.. thanks..

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]

<head>


<meta http-equiv="Content-Language" content="en-gb">


<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />

<title>London Heathrow Cars</title>

<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<style type="text/css">
div#fromdiv,div#todiv,
div#ladiv,div#aadiv,div#sctdiv,div#tsdiv {
  display: none;
}

</style>
<script type="text/javascript">
function ch(what)
{
  document.getElementById('fromdiv').style.display=what.value=='from'?'block':'none'
  document.getElementById('todiv').style.display=what.value=='to'?'block':'none'
}
function ch2(what)
{
  var divlist=new Array('la','aa','sct')
  
  for (var i=0;i<divlist.length;i++)
    document.getElementById(divlist[i]+'div').style.display=what.selectedIndex==i+1?'block':'none'
}
</script>
</head>

<body>


<br /><br />

<form action="#">
<p class="mainpage" style="text-align: left">
<input type="radio" name="direction" value="from" onclick="ch(this)"> From Heathrow<br>
<input type="radio" name="direction" value="to" onclick="ch(this)"> To Heathrow<br>

</p>

<br />
<div id="fromdiv">
<p class="mainpage" style="text-align: left">Transfer to:<br>
<select class="quote_dropdown" name="fromlist" id="fromlist" onchange="ch2(this)">
<option>-</option>
<option>Inside London</option>
<option>Outside London</option>
<option>Popular Destinations</option>
</select>
<br />

</div>
<div id="todiv">
<p class="mainpage" style="text-align: left">Pickup from:<br>
<select class="quote_dropdown" name="tolist" id="tolist" onchange="ch2(this)">
<option>-</option>
<option>Inside London</option>
<option>Outside London</option>
<option>Popular Destinations</option>
</select>
<br />
</div>
<div id="ladiv">

<p class="mainpage" style="text-align: left">Inside London:<br>
<select class="quote_dropdown" name="lalist" id="lalist">
<option>-</option>
</select>
</div>
<div id="aadiv">
<p class="mainpage" style="text-align: left">Outside London:<br>
<select class="quote_dropdown" name="aalist" id="aalist">
<option>-</option>
</select>
</div>
<div id="sctdiv">
<p class="mainpage" style="text-align: left">Popular Destinations:<br>

<select class="quote_dropdown" name="sctlist" id="sctlist">
<option>-</option>
</select>
</div>

</div>
</form>
				
</body>

</html>

vasox56 · Aug 17, 2007

the '-' option would also need to display on the 2nd drop downs also..

even if they had chosen a value beforehand..

i hope this makes sense

feherke · Aug 17, 2007

Hi

Makes sense.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]

<head>


<meta http-equiv="Content-Language" content="en-gb" />


<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />

<title>London Heathrow Cars</title>

<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<style type="text/css">
div#fromdiv,div#todiv,
div#ladiv,div#aadiv,div#sctdiv,div#tsdiv {
  display: none;
}
</style>
<script type="text/javascript">
var divlist=new Array('la','aa','sct')
function ch(what)
{
  document.getElementById('fromdiv').style.display=what.value=='from'?'block':'none'
  document.getElementById('todiv').style.display=what.value=='to'?'block':'none'
  document.getElementById(what.value+'list').selectedIndex=0
  for (var i=0;i<divlist.length;i++)
    document.getElementById(divlist[i]+'div').style.display='none'
}
function ch2(what)
{
  for (var i=0;i<divlist.length;i++)
    document.getElementById(divlist[i]+'div').style.display=what.selectedIndex==i+1?'block':'none'
}
</script>
</head>

<body>


<br /><br />

<form action="#">
<p class="mainpage" style="text-align: left">
<input type="radio" name="direction" value="from" onclick="ch(this)" /> From Heathrow<br />
<input type="radio" name="direction" value="to" onclick="ch(this)" /> To Heathrow<br />

</p>

<br />
<div id="fromdiv">
<p class="mainpage" style="text-align: left">Transfer to:</p>
<select class="quote_dropdown" name="fromlist" id="fromlist" onchange="ch2(this)">
<option>-</option>
<option>Inside London</option>
<option>Outside London</option>
<option>Popular Destinations</option>
</select>
<br />

</div>
<div id="todiv">
<p class="mainpage" style="text-align: left">Pickup from:</p>
<select class="quote_dropdown" name="tolist" id="tolist" onchange="ch2(this)">
<option>-</option>
<option>Inside London</option>
<option>Outside London</option>
<option>Popular Destinations</option>
</select>
<br />
</div>

<div id="ladiv">
<p class="mainpage" style="text-align: left">Inside London:</p>
<select class="quote_dropdown" name="lalist" id="lalist">
<option>-</option>
</select>
</div>

<div id="aadiv">
<p class="mainpage" style="text-align: left">Outside London:</p>
<select class="quote_dropdown" name="aalist" id="aalist">
<option>-</option>
</select>
</div>

<div id="sctdiv">
<p class="mainpage" style="text-align: left">Popular Destinations:</p>
<select class="quote_dropdown" name="sctlist" id="sctlist">
<option>-</option>
</select>
</div>

</form>

</body>

</html>

Note that I corrected some markup errors too.

Feherke.

http://rootshell.be/~feherke/

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

basic form action 1

vasox56

Technical User

feherke

Programmer

vasox56

Technical User

feherke

Programmer

vasox56

Technical User

vasox56

Technical User

feherke

Programmer

vasox56

Technical User

vasox56

Technical User

vasox56

Technical User

feherke

Programmer

Similar threads

Part and Inventory Search

Sponsor