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
shreekanthshreekanth 

how to pass a radio button value to javascript

Hi,

 

The following is my code...which has a problem.

 

<apex:page>

    <apex:form id="theForm">

         <apex:selectRadio id="theRadio" onchange="test()">

               <apex:selectOption itemValue="india" itemLabel="India" />
               <apex:selectOption itemValue="ap" itemLabel="AP" />

         </apex:selectRadio>

         <script>

                  function test()

                  {

                          alert('you selected :'+'document.getElementById('{!$component.theForm.theRadio}').value);

                  }

         </script>

   </apex:form>

</apex:page>

 

 

   my doubt is why it was not trigger means the alert is not working..................

  please can any one tell me the reason and solution also.

 

Thanks

Srikanth

        

Best Answer chosen by Admin (Salesforce Developers) 
Saurabh DhobleSaurabh Dhoble

Okay, got everything to work now. You need to iterate over all the elements in the radio button set to figure out which one is checked :-

 

<apex:page>
    <apex:form id="theForm">
         <script>
             function test()
             {
             	var theRadioButtonSet = document.getElementsByName('{!$component.theForm.theRadio}');
             	for (var x = 0; x < theRadioButtonSet.length; x++) 
             	{
             		if (theRadioButtonSet[x].checked) {
             			alert('You checked : ' + theRadioButtonSet[x].value);
             		}
             	}
             }
         </script>
        <apex:selectRadio id="theRadio" onchange="test();">
               <apex:selectOption itemValue="india" itemLabel="India" />
               <apex:selectOption itemValue="ap" itemLabel="AP" />
         </apex:selectRadio>
   </apex:form>
</apex:page>

 

Try it out. If it works, please mark it as answer.

 

All Answers

Mohith Kumar ShrivastavaMohith Kumar Shrivastava

Why are you trying through Javascript you may use action function for ajax call and Pass back to the controller and perform action in page refrence ?
shreekanthshreekanth

thanks for ur reply........i already used actionFunction ,i got it but i want the solution of  above requirement.......
Saurabh DhobleSaurabh Dhoble
<apex:page>
    <apex:form id="theForm">
         <apex:selectRadio id="theRadio" onchange="test()" value="{!selectedValue}">
               <apex:selectOption itemValue="india" itemLabel="India" />
               <apex:selectOption itemValue="ap" itemLabel="AP" />
         </apex:selectRadio>
         <script>
                  function test()
                  {
                          alert('you selected :'+'document.getElementById('{!$component.theForm.theRadio}').value);
                  }
         </script>
   </apex:form>
</apex:page>

 

And in your controller or extension, have a property :-

 

public String selectedValue
{
    get;
    set;
}

 

Whatever value is selected in the radiobutton will be available in your property.
shreekanthshreekanth

Hi Saurabh ,

 

     the value of radio button will available  to the property of controller...but it was not triggerd.......

 

  please help me on my query......

 

 
Saurabh DhobleSaurabh Dhoble

Put the script block before the radio button :-

 

<apex:page>
    <apex:form id="theForm">
         <script>
             function test()
             {
             	alert('you selected :'+document.getElementById('{!$component.theForm.theRadio}').value);
             }
         </script>
        <apex:selectRadio id="theRadio" onchange="test();">
               <apex:selectOption itemValue="india" itemLabel="India" />
               <apex:selectOption itemValue="ap" itemLabel="AP" />
         </apex:selectRadio>
   </apex:form>
</apex:page>

 

I do see that the selectedValue shows as "undefined", definitely a way in javascript to figure that out.
Saurabh DhobleSaurabh Dhoble

Okay, got everything to work now. You need to iterate over all the elements in the radio button set to figure out which one is checked :-

 

<apex:page>
    <apex:form id="theForm">
         <script>
             function test()
             {
             	var theRadioButtonSet = document.getElementsByName('{!$component.theForm.theRadio}');
             	for (var x = 0; x < theRadioButtonSet.length; x++) 
             	{
             		if (theRadioButtonSet[x].checked) {
             			alert('You checked : ' + theRadioButtonSet[x].value);
             		}
             	}
             }
         </script>
        <apex:selectRadio id="theRadio" onchange="test();">
               <apex:selectOption itemValue="india" itemLabel="India" />
               <apex:selectOption itemValue="ap" itemLabel="AP" />
         </apex:selectRadio>
   </apex:form>
</apex:page>

 

Try it out. If it works, please mark it as answer.

 

This was selected as the best answer
shreekanthshreekanth

thank you saurabh..it worked