View Full Version : Onchange function

07-08-2007, 01:01 AM
MY javascript knowlege is a little well non existant so I'm flying a little blind with the help of a few tutorals. What I'm trying to do is change the visible page content depending on what option is selected from a drop down menu. Bit it doesn't seem to be working.

Does anyone have any ideas why ?

Javascript Code

function showtypeinfo(){


document.getElementById('normal').style.visibility = 'visible';
document.getElementById('backpackers').style.visibility = 'hidden';
document.getElementById('annual').style.visibility = 'hidden';

} else if (this.text=="annnual"){

document.getElementById('annual').style.visibility = 'visible';
document.getElementById('backpackers').style.visibility = 'hidden';
document.getElementById('single').style.visibility = 'hidden';
document.getElementById('independent').style.visibility = 'hidden';

} else if (this.text=="independent"){

document.getElementById('annual').style.visibility = 'hidden';
document.getElementById('backpackers').style.visibility = 'hidden';
document.getElementById('single').style.visibility = 'hidden';

} else if (this.text=="backpacker"){
document.getElementById('backpackers').style.visibility = 'visible';
document.getElementById('annual').style.visibility = 'visible';
document.getElementById('single').style.visibility = 'visible';
document.getElementById('independent').style.visibility = 'visible';


HTML Code (some of it)

<body onload="showtypeinfo();">
<form action="workout.php" method="post">
<table border="1">
<td colspan="9">Trip Type</td>
<td colspan="9">
<select name="triptype" onchange="showtypeinfo(this.value)">
<option value="single">Single Trip</option>
<option value="singlew">Single Trip with Winter Sports (12.5% added)</option>
<option value="annual">Annual Trip (upto 59 days)</option>
<option value="annualw">Annual Trip with Winter Sports (Price doubled) (upto 59 days)</option>
<option value="independent">Independent/ Long Stay Single Trip (More than 59 days)</option>
<option value="independentw">Independent/ Long Stay Single Trip Winter Sports (Price doubled) (More than 59 days)</option>
<option value="backpacker">Backpacker</option>
<td colspan="9" id="backpacker">Destination (backpacker)</td>
<td colspan="9" id="backpacker">
<select name="dbp">
<option value="europe">Europe</option>
<option value="ausandnewzealand">Australia and New Zealand</option>
<option value="worldwide">Worldwide </option>

If you can work out whats wrong that would be soo great! it's going to make me hours otherwise and it's probably something really stupid.

07-08-2007, 01:35 AM
In your showtypeinfo() function this.text is undefined.
To pass your arguments to the function try:

function showtypeinfo(txt){

........because you have to change the select menu to get the onchange to work the selection 'single' will not be too user friendly

07-08-2007, 01:25 PM
Thanks for the help!

I've fixed that problem and had another fiddle around with the script however it's still not working. :(

Can you see any other problems with my code?

Philip M
07-08-2007, 05:08 PM
} else if (this.text=="annnual") { // spelling

<option value="backpacker">Backpacker</option> // should be backpackers