Grabbing the Value of a Checkbox OnLoad

I have a HTML form which populates a checkbox from the database. This checkbox is either "Yes" or "No" with values 1 or 0 respectively.

I have a function which detects the value  and switches a div on and off depnding on if its yes or no. However I want to check this value onLoad  so that the div is set correctly when the page loads but it won't work. I have included the code which calls the function from the body tag. The name of the radiobutton is "IsPCTStaff"

Can anyone see where im going wrong
function showHide(elm){		
 
        if(elm.value==1)
                document.getElementById("hideablearea").style.display = 'block';
        if(elm.value == 0)
                document.getElementById("hideablearea").style.display = 'none';
 }
 
<body onload="showHide(document.getElementsByTagName('IsPCTStaff'))">
 
<fieldset><legend>About You</legend>
<div class="required"> 
<label for="note_narrow">Are you Westminster PCT Staff?</label>
    <label for="IsPCTStaff" class="labelRadio compact">
        <input type="radio" name="IsPCTStaff" id="IsPCTStaff" class="inputRadio" value="1" onClick="showHide(this)" <% If AreYouWestminsterStaff = "True" then Response.Write(" checked")  %>   /> Yes</label>
    <label for="how_contact_email" class="labelRadio compact">
        <input type="radio" name="IsPCTStaff" id="IsPCTStaff" class="inputRadio" Value="0" onClick="showHide(this)" <% If AreYouWestminsterStaff = "False" then Response.Write(" checked")  %>  /> No 
    </label>
</div>

Open in new window

LVL 1
MayoorPatelAsked:
Who is Participating?
 
Tomarse111Connect With a Mentor Commented:
You just need to change what you pass into the onclick event to be the same as the onload:
<script type="text/javascript">
function showHide(elm){
        var value=getCheckedValue(elm); 
		 
        if(value==1)
                        document.getElementById("hideablearea").style.display = 'block';
        if(value == 0)
                        document.getElementById("hideablearea").style.display = 'none';
 }
 
function getCheckedValue(radioObj) {
        for(var i = 0; i < radioObj.length; i++) {      
                if(radioObj[i].checked) {               
                        return radioObj[i].value;
                        break;                  
                }
        }
}
 
 </script>
 
<body onload="showHide(document.testForm.IsPCTStaff)">
<form name="testForm">
<fieldset><legend>About You</legend>
<div class="required"> 
<label for="note_narrow">Are you Westminster PCT Staff?</label>
    <label for="IsPCTStaff" class="labelRadio compact">
        <input type="radio" name="IsPCTStaff"  class="inputRadio" value="1" onClick="showHide(document.testForm.IsPCTStaff)" /> Yes</label>
    <label for="how_contact_email" class="labelRadio compact">
        <input type="radio" name="IsPCTStaff"  class="inputRadio" Value="0" onClick="showHide(document.testForm.IsPCTStaff)" checked="checked" /> No 
    </label>
</div>
 
<div id='hideablearea' class="required" style="display:none"> 
	<label for="note_narrow">Which directorate do you work for?</label>     
</div>
</form>
</body>

Open in new window

0
 
Tomarse111Commented:
This is because you are using tge same ID for the checkbox. You have to give everything a unique ID or in this case use the name. Ive added a second function to your code and form tag to pull the value out then pass it back into your function:
<script type="text/javascript">
function showHide(elm){
	var value=getCheckedValue(elm);  
	if(value==1)
			document.getElementById("hideablearea").style.display = 'block';
	if(value == 0)
			document.getElementById("hideablearea").style.display = 'none';
 }
 
function getCheckedValue(radioObj) {
	for(var i = 0; i < radioObj.length; i++) {	
		if(radioObj[i].checked) {		
			return radioObj[i].value;
			break;			
		}
	}
}
 
 </script>
 
<body onload="showHide(document.testForm.IsPCTStaff)">
 <form name="testForm">
<fieldset><legend>About You</legend>
<div class="required"> 
<label for="note_narrow">Are you Westminster PCT Staff?</label>
    <label for="IsPCTStaff" class="labelRadio compact">
        <input type="radio" name="IsPCTStaff"  class="inputRadio" value="1" onClick="showHide(this)" /> Yes</label>
    <label for="how_contact_email" class="labelRadio compact">
        <input type="radio" name="IsPCTStaff"  class="inputRadio" Value="0" onClick="showHide(this)" checked="checked" /> No 
    </label>
</div>
</form>
</body>

Open in new window

0
 
MayoorPatelAuthor Commented:
thats great that seems to work however that has now broken the actual toggle function of toggling the DIV on and off. here is the div
<div id='hideablearea' class="required" style="display:none"> 
<label for="note_narrow">Which directorate do you work for?</label>
     
</div>

Open in new window

0
 
MayoorPatelAuthor Commented:
Awesome thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.