Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
ikamsfikamsf 

jquery selector for radio button

I have a form with a radio button and based on the selection of the button I would like to toggle divs. The id of the radio buttons are ending with :0 and :1, so I cannot use partial selector. What is the work around for this and what is the best way in general? I am a jquery user but very new to SF. Thanks.

<script type="text/javascript">
        var j$ = jQuery.noConflict();
        j$(document).ready(function(){
            j$('input[id$=contactMethod:0]').change(function(){
                   //do something
            });
        });
        
     </script>
<apex:form>
        <apex:selectRadio layout="pageDirection"  id="contactMethod" >
            <apex:selectOption itemLabel="Address" itemValue="a"/>
            <apex:selectOption itemLabel="Phone Number" itemValue="f"/>           
        </apex:selectRadio>  
        <div id="phone">
            Phone: <input type="text"/>
        </div>
        <div id="address">
            Address: <input type="text"/>
        </div>
    </apex:form>
Best Answer chosen by ikamsf
Pramodh KumarPramodh Kumar
Hi, 
A small code for your scenario. 
<apex:page > 
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script>
  <script type="text/javascript">
     
        $(document).ready(function(){          
           $("input[id$='contactMethod\\:0']").change(function(){
                  $("input[id$='AddressId']").focus();                 
            });               
        });        
     </script>
<apex:form id="form">
<apex:outputPanel id="value1">
        <apex:selectRadio layout="pageDirection"  id="contactMethod">
            <apex:selectOption itemLabel="Address" itemValue="a"/>
            <apex:selectOption itemLabel="Phone Number" itemValue="f"/>
            <apex:actionSupport event="onchange" reRender=""/>       
        </apex:selectRadio>  </apex:outputPanel>
        
        <div id="phone">
            Phone: <input type="text" id="PhoneId"/>
        </div>
        <div id="address">
            Address: <input type="text" id="AddressId"/>
        </div>
        
    </apex:form>
</apex:page>

Thanks,
pRAMODH.

All Answers

3 Creeks3 Creeks
Salesforce is assigning the 0 and the 1 as the id because you are not assigning id's to the selectOptions in your code.   I would explicitly give the selectOptions Ids to reduce confusion.

The selector you are using should work if you format it this way: j$("input[id$='contactMethod\\:0']")  You probably just need to escape the : with the \\



 
Pramodh KumarPramodh Kumar
Hi, 
A small code for your scenario. 
<apex:page > 
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script>
  <script type="text/javascript">
     
        $(document).ready(function(){          
           $("input[id$='contactMethod\\:0']").change(function(){
                  $("input[id$='AddressId']").focus();                 
            });               
        });        
     </script>
<apex:form id="form">
<apex:outputPanel id="value1">
        <apex:selectRadio layout="pageDirection"  id="contactMethod">
            <apex:selectOption itemLabel="Address" itemValue="a"/>
            <apex:selectOption itemLabel="Phone Number" itemValue="f"/>
            <apex:actionSupport event="onchange" reRender=""/>       
        </apex:selectRadio>  </apex:outputPanel>
        
        <div id="phone">
            Phone: <input type="text" id="PhoneId"/>
        </div>
        <div id="address">
            Address: <input type="text" id="AddressId"/>
        </div>
        
    </apex:form>
</apex:page>

Thanks,
pRAMODH.
This was selected as the best answer
ikamsfikamsf
3 Creeks, I changed it to and I am still getting the zeros. pRAMODH's solution worked. 
<apex:selectRadio layout="pageDirection"  id="contactMethod" >
	        <apex:selectOption id="phone" itemLabel="phone" itemValue="p"/>
	        <apex:selectOption id="address" itemLabel="address" itemValue="a"/>           
</apex:selectRadio>