geek_ji geek_ji - 7 months ago 30
HTML Question

style visibility and javascript

I would like a certain 'div' to be visible when i select a radio button and would like the same div to get hidden when i select the other radio button. How can i achieve this. Below is my attempt. Please let know what is wrong here.

<label>For State govt. Ex- Employee
<span class="small">Select if you are a state govt. ex-employee</span>
</label>
<p>
<label>Yes</label>
<input type="radio" name="stateGov" id="stategov" value="yes" class="choice" onClick="stateGovOptions()"/>
<label>No</label>
<input type="radio" name="stateGov" id="stategov" value="no" class="choice" onClick="stateGovOptions()"/>
</p>

<!-- State govt. ex- employees -->
<div id="stateOptions" style="visibility:hidden">
<label>
<span class="small">Select </span>
</label>
<p>
<select title="stateGovExEmp" name="stateGovExEmp" id="fdivision">
<option value="state_gov_lev_not_sel">--Select Level At Which Worked At State --</option>
<option value="less">Less than or equal to one year</option>
<option value="between">More then one but less than two years</option>
<option value="more">More than two years</option>
</select>
</p>
</div>


when the 'yes' radio button is selected the div with the id 'stateoptions' should be visible and when the 'no' radio button is pressed it should get hidden again. To achieve this below is my js attempt.

/* displays the contents when state gov ex-employee selected and removes it when not selected */
function stateGovOptions()
{
if(document.getElementById('stategov').value == 'yes')
document.getElementById('stateOptions').setAttribute('style','visibility:visible');
else
document.getElementById('stateOptions').setAttribute('style','visibility:hidden');
}


Pressing the yes button displays the required div, but pressing the no button also makes it visible, despite the 'else' block in the js function.

Please explain what am i missing out here.

Answer

Your html is invalid because you've used the same id on multiple elements. Which in turn means that it doesn't really make sense to try to select those elements using document.getElementById(), since that method returns a single element (or null) - so how would it know which element you mean?

A minimal change to your existing code to get it to work would be to pass the value of the clicked item to your function:

<input type="radio" name="stateGov" value="yes" class="choice"
       onClick="stateGovOptions(this.value)"/>
<label>No</label>
<input type="radio" name="stateGov" value="no" class="choice"
       onClick="stateGovOptions(this.value)"/>

...and then use it like this:

function stateGovOptions(val)
{
    if(val == 'yes')
        document.getElementById('stateOptions').setAttribute('style','visibility:visible');
    else
        document.getElementById('stateOptions').setAttribute('style','visibility:hidden');
}

Demo: http://jsfiddle.net/ryxCM/

Note that normally one wouldn't overwrite the entire style attribute to set one property, one would set just the property in question:

document.getElementById('stateOptions').style.visibility = 'visible';

Demo: http://jsfiddle.net/ryxCM/1/