[SalesForce] Select only one radio button in a Visualforce page

I have a visualforce page where I search for an address, a list of addresses are displayed in table and when I select a row, the appropriate fields are filled to inputfields. My problem is that I cannot select only one radiobutton.

<apex:pageBlockSection title="Search Address">
    <apex:inputText value="{!searchStreet}" label="Street" />
    <apex:inputText value="{!searchCity}" label="City" />
    <apex:inputText value="{!searchPostalCode}" label="Postal Code" />
    <apex:inputText value="{!searchState}" label="State" />
    <apex:commandButton value="Search" action="{!searchAddress}"></apex:commandButton>
    <apex:commandButton value="Clear" action="{!clearResults}"></apex:commandButton>

    <apex:pageblockTable value="{!result}" var="res">
        <apex:column>
            <apex:actionsupport action="{!selectAdd}" event="onclick" rerender="selection">
                <input type="radio" />
                <apex:param name="addid" value="{!res.Id}"></apex:param>
            </apex:actionsupport>
        </apex:column>
        <apex:column value="{!res.name}" />
        <apex:column value="{!res.Street}" />
        <apex:column value="{!res.City}" />
        <apex:column value="{!res.State_Province}" />
        <apex:column value="{!res.Zip_Postal_Code}" />
        <apex:column value="{!res.Country}" />
    </apex:pageblockTable>
</apex:pageBlockSection>

<apex:pageBlockSection id="selection" title="Address Information">
    <apex:inputField value="{!selectadd.Street}" html-disabled="true" rendered="{!sel == true}"/>
    <apex:inputField value="{!selectadd.City}" html-disabled="true" rendered="{!sel == true}"/>
    <apex:inputField value="{!selectadd.State_Province}" html-disabled="true" rendered="{!sel == true}"/>
    <apex:inputField value="{!selectadd.Zip_Postal_Code}" html-disabled="true" rendered="{!sel == true}"/>
    <apex:inputField value="{!selectadd.Country}" html-disabled="true" rendered="{!sel == true}"/>
</apex:pageBlockSection>

and my controller

public void searchAddress(){
        ..........
        result = database.query(searchQuery);
        sel = false;
    }

    // This function is called when a radio button is clicked
    public void selectAdd(){
        String selectaddid = System.currentPagereference().getParameters().get('addid'); //Get the ID of the selected address
        if(selectaddid != null){
            selectadd = [SELECT id, name, Street, City, State_Province, Zip_Postal_Code, country FROM Address WHERE id =: selectaddid];
            sel = true;
        }else{
            sel = false;
        }
    }

    //this function is called to display results
    public Address getSelectedAdd(){
        return selectadd;
    }

    //this function is called to clear results
    public void clearResults(){
        if(result.size()>0){
            result.clear();
        }
        if(selectadd != null){
            selectadd.clear();
        }        
        sel = false;
     }

Best Answer

Your radio button needs a name. All radio buttons with the same name behave as a group, of which only one can be selected.

<input type="radio" name="checkboxGroup" value="{!res.Id}" />

Note that apex:actionSupport won't work correctly as you've written it, because it only works on apex namespaced elements.

Instead, you need an ordinary handler with a call to an action function:

<apex:actionFunction name="selectValue" action="{!selectAdd}" reRender="selection">
  <apex:actionParam name="addid" value="" />
</apex:actionFunction>

...

<input type="radio" name="checkboxGroup" value="{!res.Id}" onselect="selectValue(this.value)" />
Related Topic