[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1148
  • Last Modified:

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

0
MayoorPatel
Asked:
MayoorPatel
  • 2
  • 2
1 Solution
 
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
 
Tomarse111Commented:
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
 
MayoorPatelAuthor Commented:
Awesome thanks!
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now