function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Gayathri Adoni04Gayathri Adoni04 

Checkbox Example Using Javascript in visualforcepage

Hi All,

I am first time using javascript and i am new to salesforce too.So please help me to know where i am going wrong.

My Requirement is Onclick of checkbox a textfield should appear that too using only javascript not the controller class.I will be sharing my code here.Please helpme out with solutions.If you have some examples of javascript vfpage please do share it.It would be very beneficial to learn the things.Thanks in advance. 
<apex:page standardController="contact" >
  <apex:form >
    <apex:pageBlock title="Javascript Example">
     <apex:pageBlockSection title="Checkbox Example"> 
      <apex:inputCheckbox id="cc" value="{!contact.Check_Me__c}" label="Do not call" onclick="tt(this,'{!$Component.ii}'})"/>
      <apex:inputField id="ii" value="{!contact.Languages__c}" />
     </apex:pageBlockSection>
   </apex:pageBlock>
  </apex:form>
   <script>
     function tt(input,txt)
     {
      if(input.checked)
      document.getElementById(txt).checked=true;
      else
      document.getElementById(txt).checked=false;
     }
   </script>
</apex:page>



 
Best Answer chosen by Gayathri Adoni04
Shashikant SharmaShashikant Sharma
<apex:page standardController="contact" id="pg">
      <apex:form id="frm">
            <apex:pageBlock title="Javascript Example" id="pgBlock" >
                 <apex:pageBlockSection title="Checkbox Example" id="pbSec"> 
                      <apex:inputCheckbox id="cc" value="{!contact.Check_Me__c}" label="Do not call" onchange="tt(this);"/>
                      <apex:pageBlockSectionItem id="pbsi">
                          <apex:outputLabel value="Languages" id="lblLang" ></apex:outputLabel>
                          <apex:inputField id="languageCtrl" value="{!contact.Languages__c}" />
                      </apex:pageBlockSectionItem>
                 </apex:pageBlockSection>
            </apex:pageBlock>
      
      </apex:form>
      
      <script>
         function tt(chkboxCtrl) {
         
             try {
                      // hide if checked
                      if( chkboxCtrl.checked ) {
                          document.getElementById('{!$Component.frm.pgBlock.pbSec.pbsi.languageCtrl}').style.display = 'inline';
                          document.getElementById('{!$Component.frm.pgBlock.pbSec.pbsi.lblLang}').style.display = 'inline';
                      }
                      else {
                          document.getElementById('{!$Component.frm.pgBlock.pbSec.pbsi.languageCtrl}').style.display = 'none';
                          document.getElementById('{!$Component.frm.pgBlock.pbSec.pbsi.lblLang}').style.display = 'none';
                      }
                      
                      
              }
              catch(e) {
                  alert(e);
              }
         }
         
         document.getElementById('{!$Component.frm.pgBlock.pbSec.pbsi.languageCtrl}').style.display = 'none';
         document.getElementById('{!$Component.frm.pgBlock.pbSec.pbsi.lblLang}').style.display = 'none';
         
   </script>   
</apex:page>
This will work for your case.

All Answers

Shashikant SharmaShashikant Sharma
Is this the text field that you want to show and hide based on check box
  
<apex:inputField id="ii" value="{!contact.Languages__c}" />

Thanks
Shashikant
Gayathri Adoni04Gayathri Adoni04
yes..
Shashikant SharmaShashikant Sharma
Use this code, it will work fine:
  
<apex:page standardController="contact" id="pg">
      <apex:form id="frm">
            <apex:pageBlock title="Javascript Example" id="pgBlock" >
                 <apex:pageBlockSection title="Checkbox Example" id="pbSec"> 
                      <apex:inputCheckbox id="cc" value="{!contact.Check_Me__c}" label="Do not call" onchange="tt(this);"/>
                      <apex:inputField id="languageCtrl" value="{!contact.Languages__c}" />
                 </apex:pageBlockSection>
            </apex:pageBlock>
      
      </apex:form>
      
      <script>
         function tt(chkboxCtrl) {
         
             try {
                      // hide if checked
                      if( chkboxCtrl.checked ) {
                          document.getElementById('{!$Component.frm.pgBlock.pbSec.languageCtrl}').style.display = 'none';
                      }
                      else {
                          document.getElementById('{!$Component.frm.pgBlock.pbSec.languageCtrl}').style.display = 'inline';
                      }
                      
                      
              }
              catch(e) {
                  alert(e);
              }
         }
   </script>   
</apex:page>

 
Gayathri Adoni04Gayathri Adoni04
Your code is working like onclick of checkbox the textfield is hiding.But my Requirement is on pageload only checkbox should appear,onclick of checkbox the textfield should appear.Can you help me by modifying in your code?
 
Shashikant SharmaShashikant Sharma
<apex:page standardController="contact" id="pg">
      <apex:form id="frm">
            <apex:pageBlock title="Javascript Example" id="pgBlock" >
                 <apex:pageBlockSection title="Checkbox Example" id="pbSec"> 
                      <apex:inputCheckbox id="cc" value="{!contact.Check_Me__c}" label="Do not call" onchange="tt(this);"/>
                      <apex:pageBlockSectionItem id="pbsi">
                          <apex:outputLabel value="Languages" id="lblLang" ></apex:outputLabel>
                          <apex:inputField id="languageCtrl" value="{!contact.Languages__c}" />
                      </apex:pageBlockSectionItem>
                 </apex:pageBlockSection>
            </apex:pageBlock>
      
      </apex:form>
      
      <script>
         function tt(chkboxCtrl) {
         
             try {
                      // hide if checked
                      if( chkboxCtrl.checked ) {
                          document.getElementById('{!$Component.frm.pgBlock.pbSec.pbsi.languageCtrl}').style.display = 'inline';
                          document.getElementById('{!$Component.frm.pgBlock.pbSec.pbsi.lblLang}').style.display = 'inline';
                      }
                      else {
                          document.getElementById('{!$Component.frm.pgBlock.pbSec.pbsi.languageCtrl}').style.display = 'none';
                          document.getElementById('{!$Component.frm.pgBlock.pbSec.pbsi.lblLang}').style.display = 'none';
                      }
                      
                      
              }
              catch(e) {
                  alert(e);
              }
         }
         
         document.getElementById('{!$Component.frm.pgBlock.pbSec.pbsi.languageCtrl}').style.display = 'none';
         document.getElementById('{!$Component.frm.pgBlock.pbSec.pbsi.lblLang}').style.display = 'none';
         
   </script>   
</apex:page>
This will work for your case.
This was selected as the best answer
Gayathri Adoni04Gayathri Adoni04
Thank you so much for your assistance.
Gayathri Adoni04Gayathri Adoni04
If you have few javascript examples which are used in visualforce page please do send it to me,so that it wud be benefecial for my learning..@
Shashikant Sharma