Trying to display a hidden option in javascript

buzzlightweight · 19 Apr 2012 at 13:55

hi i have three radio buttons on a form and i want the form to reveal a hidden element when one on the buttons are selected.

Code:

<tr> <!-- these are the buttons -->
                <td class="form" width="230" valign="top" align="right">Fuel Type: </td>
                <td width="503" valign="top" align="left">
                	<input type="radio" name="fuelType" id="fuel1" value="Natural Gas" />
                 	<label for="fuel1">Natural Gas</label>
              		<input type="radio" name="fuelType" id="fuel2" value="LPG" />
                 	<label for="fuel2">LPG</label>
              		<input type="radio" name="fuelType" id="fuel3" value="Oil" />
                 	<label for="fuel3">Oil</label>
            	</td>
            </tr>   <!-- the next three <tr> are the hidden options -->
            <tr id="bmgas">
    			<td width="230" valign="top" align="right">Boiler manufacturer: </td>
    			<td width="503" valign="top" align="left">
                    <select name="gas" id="gas" >
                 		<option value="0">Natural Gas</option>
                 		<option value="Alpha Boilers">Alpha Boilers</option>
                 		<option value="Ariston">Ariston</option>
                 		<option value="Baxi">Baxi</option>
                 		<option value="Biasi">Biasi</option>
                 		<option value="Broag">Broag</option>
                 		<option value="Ferroli">Ferroli</option>
                 		<option value="Glowworm">Glowworm</option>
                 		<option value="Halstead Heating">Halstead Heating</option>
                 		<option value="Ideal Boilers">Ideal Boilers</option>
                 		<option value="Ikon">Ikon</option>
                 		<option value="Jaguar">Jaguar</option>
                 		<option value="Johnson &amp; Starlay">Johnson &amp; Starlay</option>
                 		<option value="Keston Boilers">Keston Boilers</option>
                		<option value="Potterton">Potterton</option>
                 		<option value="Range Powermax">Range Powermax</option>
                 		<option value="Raven Heat">Raven Heat</option>
                 		<option value="Vaillant">Vaillant</option>
                 		<option value="Viessmann">Viessmann</option>
                 		<option value="Vokera">Vokera</option>
                 		<option value="Worcester">Worcester</option>
                 		<option value="Unknown">Unknown</option>
                 		<option value="Not Listed">Not Listed</option>
              		</select>
                </td>
  			</tr>
            <tr id="bmlpg">
    			<td width="230" valign="top" align="right">Boiler manufacturer: </td>
    			<td width="503" valign="top" align="left">
                    <select name="lpg" id="lpg">
                 		<option value="0">LPG</option>
                 		<option value="Alpha Boilers">Alpha Boilers</option>
                 		<option value="Baxi">Baxi</option>
                 		<option value="Keston Boilers">Keston Boilers</option>
                 		<option value="Potterton">Potterton</option>
                 		<option value="Vaillant">Vaillant</option>
                 		<option value="Viessmann">Viessmann</option>
                 		<option value="Worcester">Worcester</option>
                 		<option value="Unknown">Unknown</option>
                 		<option value="Not Listed">Not Listed</option>
              		</select>
                </td>
  			</tr>
            <tr id="bmoil">
    			<td width="230" valign="top" align="right">Boiler manufacturer: </td>
    			<td width="503" valign="top" align="left">
                    <select name="oil" id="oil">
                 		<option value="0">Oil</option>
                 		<option value="Buderas">Buderas</option>
                 		<option value="Danesmoor">Danesmoor</option>
                 		<option value="Firebird">Firebird</option>
                 		<option value="Grant">Grant</option>
                 		<option value="HRM">HRM</option>
                 		<option value="Nuway Oil">Nuway Oil</option>
                 		<option value="Thermeco">Thermeco</option>
                 		<option value="Trianco">Trianco</option>
                 		<option value="Worcester">Worcester</option>
                 		<option value="Unknown">Unknown</option>
                 		<option value="Not Listed">Not Listed</option>
              		</select>
                </td>
  			</tr>

so at the top of the code are the three buttons then after are the hidden elements.

Code:

#bmgas {
	display:none;
}

#bmlpg {
	display:none;
}

#bmoil {
	display:none;
}

this is the css hideing the elements

Code:

function addEvent(object, evName, fnName, cap) {
   if (object.attachEvent)
       object.attachEvent("on" + evName, fnName);
   else if (object.addEventListener)
       object.addEventListener(evName, fnName, cap);
}

addEvent(window, "load", init, false);

function init(){
	document.forms[0].fName.focus();
	document.forms[0].checked = showOptions;
	document.forms[0].onreset = refreshPage;
	document.forms[0].onsubmit = checkForm;
}

function show(obj){
    obj1 = document.getElementById('bmgas');
	obj2 = document.getElementById('bmlpg');
	obj3 = document.getElementById('bmoil');
    	obj1.style.display = '';
		obj2.style.display = '';
		obj3.style.display = '';
}
  
function showOptions(){
	if(document.fix.fuel1.checked == true){
		show('bmgas');
	}else if(document.fix.fuel2.checked == true){
		show('bmlpg');
	}else (document.fix.fuel3.checked == true){
		show('bmoil')
		}
}

i cant for the life of me get this to work please help

buzzlightweight · 19 Apr 2012 at 14:18

Spunkey said:
Try setting display to 'block':

Code:

obj1.style.display = 'block'; obj2.style.display = 'block'; obj3.style.display = 'block';

I'd also suggest looking into jQuery. It'd make all of that code about 1/4 of the length.

no joy

im determined to do this in javascript, i know JQ is easier and less code but i am learning atm and i want to understand how to do it

buzzlightweight · 19 Apr 2012 at 14:36

It's a library of JavaScript yes but I wish to do this is JavaScript not JQ

buzzlightweight · 19 Apr 2012 at 14:46

That's cool, and thank you

buzzlightweight · 19 Apr 2012 at 15:53

tried this as well..... nothing?

Code:

function showOptions(fuelType){
	if(document.fix.fuel1.checked == true){
		document.getElementById('fuel1').style.display = "";
		}else if(document.fix.fuel1.checked == false){
		document.getElementById('fuel1').style.display = "none";
		}else if(document.fix.fuel2.checked == true){
		document.getElementById('fuel2').style.display = "";
		}else if(document.fix.fuel2.checked == false){
		document.getElementById('fuel2').style.display = "none";
		}else if(document.fix.fuel3.checked == true){
		document.getElementById('fuel3').style.display = "";
		}else (document.fix.fuel3.checked == false){
		document.getElementById('fuel3').style.display = "none";
		}
}

buzzlightweight · 19 Apr 2012 at 16:31

Thanks, I will have a go when I'm home, I realise frame works save time an agro but because I'm still learning I want to try and understand as much as possible.

I appreciate you having a look

buzzlightweight · 19 Apr 2012 at 17:12

visibleman said:

From having a quick skim you're handling the window load event, rather you'd add a listener to the radio option click event. I'd also suspect the addEvent function to produce errors, especially under IE, due to the if statement conditionals.

As Spunkey said, use a framework as it'll save you headaches otherwise just use the onClick event trigger attribute which will work. eg -

Code:

<td width="503" valign="top" align="left">
                    <input type="radio" name="fuelType" id="fuel1" value="Natural Gas" onClick="showOptions(this);" />
                     <label for="fuel1">Natural Gas</label>
                      <input type="radio" name="fuelType" id="fuel2" value="LPG" onClick="showOptions(this);" />
                     <label for="fuel2">LPG</label>
                      <input type="radio" name="fuelType" id="fuel3" value="Oil" onClick="showOptions(this);" />
                     <label for="fuel3">Oil</label>
                </td>

Code:

function showOptions(obj){
    if (obj.id == "fuel1") {
        document.getElementById("bmgas").style.display = '';
        document.getElementById("bmlpg").style.display = 'none';
        document.getElementById("bmoil").style.display = 'none';
    } else if (obj.id == "fuel2") {
        document.getElementById("bmgas").style.display = 'none';
        document.getElementById("bmlpg").style.display = '';
        document.getElementById("bmoil").style.display = 'none';
    } else if (obj.id == "fuel3") {
        document.getElementById("bmgas").style.display = 'none';
        document.getElementById("bmlpg").style.display = 'none';
        document.getElementById("bmoil").style.display = '';
    }        
}

ok we are 50% the way there, the desired effect i am after is that when the page loads none of the thre drop downs are present, then onclick the relevent drop down appears.

with this code all three drop downs are present but onclick two disapear.

any thoughts on how to achieve this?

buzzlightweight · 19 Apr 2012 at 17:24

done it, i managed to achive the desired effect by first having a function to initially set the display values of bmlpg and bmoil to none, then use the above code to dynamically change it.

many thanks visibleman

buzzlightweight · 20 Apr 2012 at 11:54

Limenote said:
care to post your updated code? this sort of thing is a doddle with JQ but im interested in whats going on under the hood.

yep no problem i will post shortly

buzzlightweight · 20 Apr 2012 at 12:11

so the idea was once one of these three radio buttons were selected.........

Code:

<tr id="fuel">
<td width="230" valign="top" align="right">Fuel Type: </td>
<td width="503" valign="top" align="left">
<input type="radio" name="fuelType" id="fuel1" value="Natural Gas" onclick="showOptions(this);"/>
<label for="fuel1">Natural Gas</label>
<input type="radio" name="fuelType" id="fuel2" value="LPG" onclick="showOptions(this);"/>
<label for="fuel2">LPG</label>
<input type="radio" name="fuelType" id="fuel3" value="Oil" onclick="showOptions(this);"/>
<label for="fuel3">Oil</label>
</td>
</tr>

a hidden options box would appear for the selected fuel type......

Code:

<tr id="bmgas">
<td width="230" valign="top" align="right">Boiler manufacturer: </td>
<td width="503" valign="top" align="left">
<select name="gas" id="gas" >
<option value="0">Natural Gas</option>
<option value="Alpha Boilers">Alpha Boilers</option>
<option value="Ariston">Ariston</option>
<option value="Baxi">Baxi</option>
<option value="Biasi">Biasi</option>
<option value="Broag">Broag</option>
<option value="Ferroli">Ferroli</option>
<option value="Glowworm">Glowworm</option>
<option value="Halstead Heating">Halstead Heating</option>
<option value="Ideal Boilers">Ideal Boilers</option>
<option value="Ikon">Ikon</option>
<option value="Jaguar">Jaguar</option>
<option value="Johnson &amp; Starlay">Johnson &amp; Starlay</option>
<option value="Keston Boilers">Keston Boilers</option>
<option value="Potterton">Potterton</option>
<option value="Range Powermax">Range Powermax</option>
<option value="Raven Heat">Raven Heat</option>
<option value="Vaillant">Vaillant</option>
<option value="Viessmann">Viessmann</option>
<option value="Vokera">Vokera</option>
<option value="Worcester">Worcester</option>
<option value="Unknown">Unknown</option>
<option value="Not Listed">Not Listed</option>
</select>
<td>
</tr>
<tr id="bmlpg">
<td width="230" valign="top" align="right">Boiler manufacturer: </td>
<td width="503" valign="top" align="left">
<select name="lpg" id="lpg">
<option value="0">LPG</option>
<option value="Alpha Boilers">Alpha Boilers</option>
<option value="Baxi">Baxi</option>
<option value="Keston Boilers">Keston Boilers</option>
<option value="Potterton">Potterton</option>
<option value="Vaillant">Vaillant</option>
<option value="Viessmann">Viessmann</option>
<option value="Worcester">Worcester</option>
<option value="Unknown">Unknown</option>
<option value="Not Listed">Not Listed</option>
</select>
</td>
</tr>
<tr id="bmoil">
<td width="230" valign="top" align="right">Boiler manufacturer: </td>
<td width="503" valign="top" align="left">
<select name="oil" id="oil">
<option value="0">Oil</option>
<option value="Buderas">Buderas</option>
<option value="Danesmoor">Danesmoor</option>
<option value="Firebird">Firebird</option>
<option value="Grant">Grant</option>
<option value="HRM">HRM</option>
<option value="Nuway Oil">Nuway Oil</option>
<option value="Thermeco">Thermeco</option>
<option value="Trianco">Trianco</option>
<option value="Worcester">Worcester</option>
<option value="Unknown">Unknown</option>
<option value="Not Listed">Not Listed</option>
</select>
</td>
</tr>

to achieve this i have to hide the <tr>'s with the id's bmgas bmlpg and bmoil by first of all hiding them as the form loads

Code:

function showF1(){
	document.getElementById("form1").style.position = 'absolute';
	document.getElementById("form1").style.top = '190px';
		setOpacity("form1", 0);
		hide('bmgas', 'bmlpg', 'bmoil');        /* <<<<<<<<<<<<<<<<<<<<<---------- */
	document.getElementById("form1").style.zIndex = '1';
	document.forms[0].fName.focus();
	document.getElementById("message").style.display = 'none';
	document.getElementById("fuel").style.display = '';
	document.getElementById("sevice").style.display = '';
	document.getElementById("message1").style.display = '';
		fadeIn("form1", 100, 0.7, 0);
	
	return false
}

function hide(obj){
    obj1 = document.getElementById('bmgas');
    obj2 = document.getElementById('bmlpg');
    obj3 = document.getElementById('bmoil');
    	       obj1.style.display = 'none';
		obj2.style.display = 'none';
		obj3.style.display = 'none';
}

function showOptions(obj){
    if (obj.id == "fuel1") {
        document.getElementById("bmgas").style.display = '';
        document.getElementById("bmlpg").style.display = 'none';
        document.getElementById("bmoil").style.display = 'none';
    } else if (obj.id == "fuel2") {
        document.getElementById("bmgas").style.display = 'none';
        document.getElementById("bmlpg").style.display = '';
        document.getElementById("bmoil").style.display = 'none';
    } else if (obj.id == "fuel3") {
        document.getElementById("bmgas").style.display = 'none';
        document.getElementById("bmlpg").style.display = 'none';
        document.getElementById("bmoil").style.display = '';
    }        
}

i hope that helps

buzzlightweight · 20 Apr 2012 at 13:51

visibleman said:
Why not just use the CSS that hides the dropdown table rows you posted in the OP?
This is what i used and it worked as intended ie: on page load, dropdown rows are hidden.

because i am learning javascript atm and this the way i wanted to do, plus older browsers and older ie dont support all current css without the use of javascript

buzzlightweight · 20 Apr 2012 at 17:08

FabienO said:
I do a lot of jQuery at work, but I never learnt JavaScript; though, getting the basics down isn't a bad idea.

*Just my opinion*

this is what i am trying to achieve, get a basic understanding and go from there

buzzlightweight · 20 Apr 2012 at 17:13

visibleman said:
I'd also recommend grabbing a few of the Javascript books by O'Reilly, especially the reference book as it is always useful to have at hand.

i have quite a library and am working through them now

i have two O'Reilly books, javascript the definitive guide and php, mysql and js.

plus im studying it at college