You need to sign in to do that
Don't have an account?
Darlene Blaney
how to detect checkbox checked/unchecked on visualforce page
I have a visualforce page where I select student type of freshman and display highschool information fields (that works fine). But I want to hide the highschool country if the person checks the homeschooled checkbox. I can't seem to get that to work. I am trying to use javascript to hide the fields. Any help would be greatly appreciated.
vfp code:
<apex:page Controller="RFIForm" showHeader="false" standardStylesheets="FALSE">
<apex:includeScript value="{!$Resource.jQuery}"/>
<apex:composition template="{!$Site.Template}">
<apex:define name="body">
<script>
$(document).ready(function() {
HSReRender();
});
function HSReRender(){
var studentType = $("[id$=studentType]").val();
var HomeSchooled = $("[id$=homeSchooled]").val();
//$(".hsPanelH").hide();
alert(HomeSchooled);
if (studentType == "Freshman"){
$(".highSchoolPanelH").show();
if (HomeSchooled.checked){
$(".hsPanelH").hide();
alert('testing homeschooled checked');}
else{
$(".hsPanelH").show();
alert('testing homeschooled not checked');}
alert('testing freshman first');
} else {
$(".highSchoolPanelH").hide();
$(".hsPanelH").hide();
alert('testing freshman else first');
}
if ($(("#homeSchooled").is(":checked"))){
// if (studentType2 == "Freshman" && (HomeSchooled == null || HomeSchooled == false)){
$(".hsPanelH").hide();
alert('testing freshman and homeschooled checked');
} else if (studentType == "Freshman"){
$(".hsPanelH").show();
alert('testing just freshman');
} else {
$(".hsPanelH").hide();
alert('testing else');
}
}
</script>
<apex:pageMessages ></apex:pageMessages>
<apex:form Id="form">
<h1 id="page-title">Request for Information </h1>
<div style="width:100%">
<p>
<span class="contentText">Please enter your information in the fields below. When completed click on the <b>Submit</b> button at the bottom of page. Please allow 3 to 5 business days for processing your request for information.</span>
</p>
<p>
<span class="contentText"><strong>* Indicates a required field.</strong></span>
</p>
</div>
<table border="0" cellspacing="3" width="100%">
<tbody>
<tr>
<th colspan="2">Name and Personal Data</th>
</tr>
<tr>
<td width="37%"><apex:outputText styleclass="req" value="*Type of Student:"/></td>
<td width="63%">
<apex:selectList id="studentType" value="{!studentType}" multiselect="false" size="1" styleClass="inputRequired" onchange="HSReRender();">
<apex:selectOptions value="{!studentTypeOptions}"/>
<apex:actionSupport event="onchange" rerender="highSchoolPanel"/>
</apex:selectList>
</td>
</tr>
</tbody>
</table>
<table border="0" cellspacing="3" width="100%">
<tbody>
<tr class="highSchoolPanelH">
<th colspan="2" class="highSchoolPanelH">High School Information</th>
</tr>
<tr class="highSchoolPanelH">
<td width="37%" class="highSchoolPanelH">Home Schooled</td>
<td width="63%" class="highSchoolPanelH" onchange="HSReRender()">
<apex:inputCheckbox id="homeSchooled" value="{!interest.Home_Schooled__c}">
<apex:actionSupport event="onclick" rerender="highSchoolPanel"/>
</apex:inputCheckbox>
</td>
</tr>
</tbody>
</table>
<table border="0" cellspacing="3" width="100%" id="highSchoolPanel" rendered="{!studentType=='Freshman' && (interest.Home_Schooled__c==null || interest.Home_Schooled__c==false)}">
<tbody>
<tr class="hsPanelH" rendered="{!studentType=='Freshman' && (interest.Home_Schooled__c==null || interest.Home_Schooled__c==false)}">
<apex:outputText>
<td width="37%" class="hsPanelH" >*High School Country</td>
</apex:outputText>
<td width="63%" class="hsPanelH" rendered="{!studentType=='Freshman' && (interest.Home_Schooled__c==null || interest.Home_Schooled__c==false)}">
<apex:selectList id="hsPanelH" value="{!hscountry}" multiselect="False" size="1" styleClass="inputRequired">
<apex:selectOptions value="{!CountryOptions}"/>
<apex:actionSupport event="onchange" action="{!getHsStateRequired}" />
</apex:selectList>
</td>
</tr>
</tbody>
</table>
</apex:form>
</apex:define>
</apex:composition>
</apex:page>
vfp code:
<apex:page Controller="RFIForm" showHeader="false" standardStylesheets="FALSE">
<apex:includeScript value="{!$Resource.jQuery}"/>
<apex:composition template="{!$Site.Template}">
<apex:define name="body">
<script>
$(document).ready(function() {
HSReRender();
});
function HSReRender(){
var studentType = $("[id$=studentType]").val();
var HomeSchooled = $("[id$=homeSchooled]").val();
//$(".hsPanelH").hide();
alert(HomeSchooled);
if (studentType == "Freshman"){
$(".highSchoolPanelH").show();
if (HomeSchooled.checked){
$(".hsPanelH").hide();
alert('testing homeschooled checked');}
else{
$(".hsPanelH").show();
alert('testing homeschooled not checked');}
alert('testing freshman first');
} else {
$(".highSchoolPanelH").hide();
$(".hsPanelH").hide();
alert('testing freshman else first');
}
if ($(("#homeSchooled").is(":checked"))){
// if (studentType2 == "Freshman" && (HomeSchooled == null || HomeSchooled == false)){
$(".hsPanelH").hide();
alert('testing freshman and homeschooled checked');
} else if (studentType == "Freshman"){
$(".hsPanelH").show();
alert('testing just freshman');
} else {
$(".hsPanelH").hide();
alert('testing else');
}
}
</script>
<apex:pageMessages ></apex:pageMessages>
<apex:form Id="form">
<h1 id="page-title">Request for Information </h1>
<div style="width:100%">
<p>
<span class="contentText">Please enter your information in the fields below. When completed click on the <b>Submit</b> button at the bottom of page. Please allow 3 to 5 business days for processing your request for information.</span>
</p>
<p>
<span class="contentText"><strong>* Indicates a required field.</strong></span>
</p>
</div>
<table border="0" cellspacing="3" width="100%">
<tbody>
<tr>
<th colspan="2">Name and Personal Data</th>
</tr>
<tr>
<td width="37%"><apex:outputText styleclass="req" value="*Type of Student:"/></td>
<td width="63%">
<apex:selectList id="studentType" value="{!studentType}" multiselect="false" size="1" styleClass="inputRequired" onchange="HSReRender();">
<apex:selectOptions value="{!studentTypeOptions}"/>
<apex:actionSupport event="onchange" rerender="highSchoolPanel"/>
</apex:selectList>
</td>
</tr>
</tbody>
</table>
<table border="0" cellspacing="3" width="100%">
<tbody>
<tr class="highSchoolPanelH">
<th colspan="2" class="highSchoolPanelH">High School Information</th>
</tr>
<tr class="highSchoolPanelH">
<td width="37%" class="highSchoolPanelH">Home Schooled</td>
<td width="63%" class="highSchoolPanelH" onchange="HSReRender()">
<apex:inputCheckbox id="homeSchooled" value="{!interest.Home_Schooled__c}">
<apex:actionSupport event="onclick" rerender="highSchoolPanel"/>
</apex:inputCheckbox>
</td>
</tr>
</tbody>
</table>
<table border="0" cellspacing="3" width="100%" id="highSchoolPanel" rendered="{!studentType=='Freshman' && (interest.Home_Schooled__c==null || interest.Home_Schooled__c==false)}">
<tbody>
<tr class="hsPanelH" rendered="{!studentType=='Freshman' && (interest.Home_Schooled__c==null || interest.Home_Schooled__c==false)}">
<apex:outputText>
<td width="37%" class="hsPanelH" >*High School Country</td>
</apex:outputText>
<td width="63%" class="hsPanelH" rendered="{!studentType=='Freshman' && (interest.Home_Schooled__c==null || interest.Home_Schooled__c==false)}">
<apex:selectList id="hsPanelH" value="{!hscountry}" multiselect="False" size="1" styleClass="inputRequired">
<apex:selectOptions value="{!CountryOptions}"/>
<apex:actionSupport event="onchange" action="{!getHsStateRequired}" />
</apex:selectList>
</td>
</tr>
</tbody>
</table>
</apex:form>
</apex:define>
</apex:composition>
</apex:page>
This is what I changed my code to:
It did not solve my problem. 'homeSchooled' is showing as undefined. Is there a special way that I need to evaluate 'homeSchooled' to see that it is checked?