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
John Neilan 2John Neilan 2 

Visualforce Radio Button Value to Object

Hello,

I have a VF page on the Account. I have set up 3 radio selections using apex:selectRadio and a Script. I would now like to populate a custom field (Type__c) with the radio selection the user chose. Does anyone know how I can do this? Thanks,
  
<apex:page standardController="Account" tabStyle="Account">

<script>

    function TypeSelect(variable)
    {
        var choice = variable.value;
        if(choice == 'Amp'){
            document.getElementById('layoutAmp').style.display = 'block';
            document.getElementById('layoutEng').style.display = 'none';
            document.getElementById('layoutAge').style.display = 'none';
        }
        else if(choice == 'Eng'){
            document.getElementById('layoutAmp').style.display = 'none';
            document.getElementById('layoutEng').style.display = 'block';
            document.getElementById('layoutAge').style.display = 'none';
        }
        else{
            document.getElementById('layoutAmp').style.display = 'none';
            document.getElementById('layoutEng').style.display = 'none';
            document.getElementById('layoutAge').style.display = 'block';
        }
    }   
</script>

<style>
    input[type=radio] {margin-left: 100px;}
    .radioClass {margin-left: 25%;}
</style>


<apex:form >

    <apex:actionRegion >

            <Table width="90%" border="0" cellpadding="0" cellspacing="0" columns="5">
                <tr>
                    <td colspan="5" class="fieldLabel">
                        <apex:selectRadio layout="lineDirection" styleClass="radioClass" onclick="TypeSelect(this);">
                           <apex:selectOption itemLabel="Amplify" itemValue="Amplify"></apex:selectOption>
                           <apex:selectOption itemLabel="Engage" itemValue="Engage"></apex:selectOption>
                           <apex:selectOption itemLabel="Agency" itemValue="Agency"></apex:selectOption>
                        </apex:selectRadio>
                        <apex:actionSupport event="onchange" reRender="Detail"/>
                    </td>
                </tr>
            </Table>

 
James LoghryJames Loghry
Typically do this type of functionality in an extension controller.  For instance, the selectOption calls a method in the extension that sets Type__c.  You can also then use the rendered attribute on your selectOption elements to render them appropriately.

If you're doing this all client side, it's a bit more tricky.  You'll want to create a hidden input field, and then set that via javascript.  I've taken a shot at it below.  Keep in mind that you'll likely have to play around with $Component.Type__c to return the correct id.
  
<apex:page standardController="Account" tabStyle="Account">

<script>

    function TypeSelect(variable)
    {
        var choice = variable.value;
        if(choice == 'Amp'){
            document.getElementById('layoutAmp').style.display = 'block';
            document.getElementById('layoutEng').style.display = 'none';
            document.getElementById('layoutAge').style.display = 'none';
            document.getElementById('{!Component.Type__c}').value = 'SOME TYPE';
        }
        else if(choice == 'Eng'){
            document.getElementById('layoutAmp').style.display = 'none';
            document.getElementById('layoutEng').style.display = 'block';
            document.getElementById('layoutAge').style.display = 'none';
            document.getElementById('{!Component.Type__c}').value = 'SOME TYPE';
        }
        else{
            document.getElementById('layoutAmp').style.display = 'none';
            document.getElementById('layoutEng').style.display = 'none';
            document.getElementById('layoutAge').style.display = 'block';
            document.getElementById('{!Component.Type__c}').value = 'SOME TYPE';
        }
    }   
</script>

<style>
    input[type=radio] {margin-left: 100px;}
    .radioClass {margin-left: 25%;}
</style>


<apex:form >

    <apex:actionRegion >

            <Table width="90%" border="0" cellpadding="0" cellspacing="0" columns="5">
                <tr>
                    <td colspan="5" class="fieldLabel">
                        <apex:selectRadio layout="lineDirection" styleClass="radioClass" onclick="TypeSelect(this);">
                           <apex:selectOption itemLabel="Amplify" itemValue="Amplify"></apex:selectOption>
                           <apex:selectOption itemLabel="Engage" itemValue="Engage"></apex:selectOption>
                           <apex:selectOption itemLabel="Agency" itemValue="Agency"></apex:selectOption>
                        </apex:selectRadio>
                        <apex:inputHidden id="Type__c" value="{!Account.Type__c}" />
                        <apex:actionSupport event="onchange" reRender="Detail"/>
                    </td>
                </tr>
            </Table>

 
William TranWilliam Tran
Change this:
<apex:selectRadio layout="lineDirection" styleClass="radioClass"onclick="TypeSelect(this);">

To this:
<apex:selectRadio value="{!Type__c}" layout="lineDirection" styleClass="radioClass"onclick="TypeSelect(this);">

Type__c must be a field on Account object.

As a common practice, if your question is answered, please choose 1 best answer.
But you can give every answer a thumb up if that answer is helpful to you.

Thanks
John Neilan 2John Neilan 2
@William,

Thanks.  I actually misspoke, there are 3 checkbox fields I want to update depending upon the values selected in the selectRadio.  

@James,

I tried inserting: 
document.getElementById('{!Account.Type1__c}').value="true";
but nothing populated when I saved the record.  Do I have the format correct?
 
James LoghryJames Loghry
John, no that's not the correct syntax.  You should be referencing the Id of the hidden input field.  Again, that syntax should look like the following:
  
document.getElementById('{!Component.IdOfType1HiddenField__c}').value = 'SOME TYPE';

If you post what you have so far, that would help.
John Neilan 2John Neilan 2
Thanks @James.  My code is below, but it still does not update the Account upon creation.  I also tried the Component reference without the "$".
  
<script>
    function TypeSelect(variable)
    {
        var choice = variable.value;
        if(choice == 'Amp'){
            document.getElementById('layoutAmp').style.display = 'block';
            document.getElementById('layoutEng').style.display = 'none';
            document.getElementById('layoutAge').style.display = 'none';
            document.getElementById('{!$Component.AmpVal}').value = "true";
        }
        else if(choice == 'Eng'){
            document.getElementById('layoutAmp').style.display = 'none';
            document.getElementById('layoutEng').style.display = 'block';
            document.getElementById('layoutAge').style.display = 'none';
            document.getElementById('{!$Component.EngVal}').value = "true";
        }
        else{
            document.getElementById('layoutAmp').style.display = 'none';
            document.getElementById('layoutEng').style.display = 'none';
            document.getElementById('layoutAge').style.display = 'block';
            document.getElementById('{!$Component.AgeVal}').value = "true";
        }
    }   
</script>

<style>
    input[type=radio] {margin-left: 100px;}
    .radioClass {margin-left: 25%;}
</style>

<apex:form >

    <apex:actionRegion >

    <Table width="90%" border="0" cellpadding="0" cellspacing="0" columns="5">
        <tr>
            <td colspan="5" class="fieldLabel">
            <apex:selectRadio layout="lineDirection" styleClass="radioClass" onclick="TypeSelect(this);">
               <apex:selectOption itemLabel="Amp" itemValue="Amp"></apex:selectOption>
               <apex:selectOption itemLabel="Eng" itemValue="Eng"></apex:selectOption>
               <apex:selectOption itemLabel="Age" itemValue="Age"></apex:selectOption>
            </apex:selectRadio>
            <apex:inputHidden id="AmpVal" value="{!Account.Amp_Account__c}" />
            <apex:inputHidden id="EngVal" value="{!Account.Eng_Account__c}" />
            <apex:inputHidden id="AgeVal" value="{!Account.Age_Account__c}" />
            <apex:actionSupport event="onchange" reRender="Detail"/>
            </td>
        </tr>
    </Table>