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

GravyMonster · 19 Apr 2012 at 14:12

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.

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

GravyMonster · 19 Apr 2012 at 14:33

jQ is javascript

buzzlightweight · 19 Apr 2012 at 14:36

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

GravyMonster · 19 Apr 2012 at 14:44

No problem - was just being facetious.

I've put all your code into a fiddle so it's easier for people to amend and test: http://jsfiddle.net/JBY3L/

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";
		}
}

visibleman · 19 Apr 2012 at 16:23

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 = 'block';
        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 = 'block';
        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 = 'block';
    }        
}

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

visibleman · 19 Apr 2012 at 21:29

buzzlightweight said:
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

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.

Limenote · 19 Apr 2012 at 22:23

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.

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

visibleman · 20 Apr 2012 at 14:25

I'm assuming that you're calling showF1() when the document loads? Unless you need to call the function again, then there isn't any real need to be using JS for initialising CSS. Instead you'd use plain-old CSS -

Code:

#bmgas, #bmlpg, #bmoil, #message {
	display: none;
}

#fuel, #sevice, #message1 {
	display: block;
}

#form1 {
        position: absolute;
        top: 190px;
        zIndex: 1;
}

Otherwise if you wanted to keep what you've got then the only thing that stands out is the hide() function. Firstly you don't need to parse parameters (you're also attempting to feed the function three different variables when the function is only set up for one) to the function as you're not making use of them, instead you'd call it using 'hide();' only; secondly it's a little inefficient as you're setting up object variables when you don't need to as you're not reusing them, instead -

Code:

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

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.

Edit -

buzzlightweight said:
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

Granted but you need to be efficient rather than using JS for the heck of it. It'd be like using Flash for a simple animated image when a GIF would be the better solution.

FabienO · 20 Apr 2012 at 14:34

IMO there's no real reason to learn Javascript these days. Head straight for the framework Jquery or MooTools. They're used pretty much everywhere.

Obviously there's a distinct difference between frameworks in the sense of PHP/Zend Vs JavaScript/jQuery

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*

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