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
Neema Gudur 8Neema Gudur 8 

Radio button group

I want to group a a bunch of input fields under one radio button similar to ASP:Radiobutton.
Please see the below screen shot.
The forst radio button selected has "city" and "state" grouped togetrher.
Is it possible to do this usng the selectRadio component?

User-added image
Best Answer chosen by Neema Gudur 8
Vasani ParthVasani Parth
Neema,

You can use some JavaScript and HTML Input tag to work around this. This is extract from my code. So what this does is have an inputHidden in your code and set the value in this field in JavaScript onclick event. Below is just a sample code
  
<apex:pageBlockTable value="{!someList}" var="con">
<apex:column value="{!con.name}" />

<apex:column>
    <input type="radio" name="chosen" id="{!con.id}" VALUE="{!con.id}" onclick="changeValue(this,'{!$Component.RadioButtonValue}');"/>
</apex:column>    

</apex:pageBlockTable>

<apex:inputHidden value="{!contactId}" id="RadioButtonValue" />

<script>
function changeValue(input, textid) {
    document.getElementById(textid).value = input.value;
}   
</script>

Please mark this as the best answer if this helps
 

All Answers

James LoghryJames Loghry
You *probably* can to an extent with some series CSS or Javascript work, but it's going to be very tricky and messy.  

Instead, why not create a separate tab for city, lat and long, and zip code?  Another option is to use a "twisty" (similar to a collapsible page block section).  

I know as a user of this system it would be frustrating to click a radio button, then click into a field to enter the location information.

Just some food for thought.
Vasani ParthVasani Parth
Neema,

You can use some JavaScript and HTML Input tag to work around this. This is extract from my code. So what this does is have an inputHidden in your code and set the value in this field in JavaScript onclick event. Below is just a sample code
  
<apex:pageBlockTable value="{!someList}" var="con">
<apex:column value="{!con.name}" />

<apex:column>
    <input type="radio" name="chosen" id="{!con.id}" VALUE="{!con.id}" onclick="changeValue(this,'{!$Component.RadioButtonValue}');"/>
</apex:column>    

</apex:pageBlockTable>

<apex:inputHidden value="{!contactId}" id="RadioButtonValue" />

<script>
function changeValue(input, textid) {
    document.getElementById(textid).value = input.value;
}   
</script>

Please mark this as the best answer if this helps
 
This was selected as the best answer
Neema Gudur 8Neema Gudur 8
Thank You
shephalishephali
@vasani ,

    Hi there. I am facing the problem with radio. i need to replace the check boxes with radio buttons. i need to use javascript so that radio button should come one by one in one row ( as  <apex:selectRadio> is showing all the option in one row only). can you help me out on this??? 
<script type="text/javascript">

    function do_this(){

        var rd = document.getElementsByTagName('input');
        var button = document.getElementById('toggle');

 var i ;
 for(i=0; i<rd.length; i++)
{
   if(rd[i].checked)
     { button.value ='select'; }
   else 
    { button.value = 'deselect';  }
}
    }    
</script>


 <apex:column >                    
  <input type="radio" value= "{!con.isSelected}" id="toggle" onClick="do_this()" name= "rd"/>                                     
   </apex:column>


            The above code is not working..