1

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 custom fields on the Account (Field1__c, Field2__c, Field3__c) with the radio selection the user chose. These fields are checkboxes. 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 == 'Amplify'){
            document.getElementById('layoutAmp').style.display = 'block';
            document.getElementById('layoutEng').style.display = 'none';
            document.getElementById('layoutAge').style.display = 'none';
            document.getElementById('{!$Component.theForm.AmpVal}').value = 'true';
        }
        else if(choice == 'Engage'){
            document.getElementById('layoutAmp').style.display = 'none';
            document.getElementById('layoutEng').style.display = 'block';
            document.getElementById('layoutAge').style.display = 'none';
            document.getElementById('{!$Component.theForm.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.theForm.geVal}').value = 'true';
        }
    }   
</script>

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

<apex:form id="theForm">
    <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>
  • can you post your detail tag that you are rerendering. Right off I can say your choice will either "Amplify". "Engage" or "Agency" so none of your If's in the script tag will evaluvate and nothing will be hidden/renderd. – Rao Dec 7 '15 at 21:43
  • @Rao - Sorry, I posted code that I was working on some changes by mistake. I edited my code above. The detail tag is rather long, which is why I didn't post it and it works fine with the render/hide script. – J. Neilan Dec 7 '15 at 22:59
0

Look at this doc :

https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_variables_global_component.htm You cannot directly lookup by getElementById for the elements where you are setting Id through the VF page. Salesforce appends the J_id0 part and renders it as j_id0:theform:layoutAmp, you can either use jquery to locate the ID of the element or use $component reference.

<apex:page standardController="Account" tabStyle="Account">

<script>

    function TypeSelect(variable)
    {
        var choice = variable.value;

        if(choice == 'Amp'){
            document.getElementById('{!$Component.theform.layoutAmp}').style.display = 'block';
            document.getElementById('{!$Component.theform.layoutEng}').style.display = 'none';
            document.getElementById('{!$Component.theform.layoutAge}').style.display = 'none';
        }
        else if(choice == 'Eng'){
            document.getElementById('{!$Component.theform.layoutAmp}').style.display = 'none';
            document.getElementById('{!$Component.theform.layoutEng}').style.display = 'block';
            document.getElementById('{!$Component.theform.layoutAge}').style.display = 'none';
        }
        else{
            document.getElementById('{!$Component.theform.layoutAmp}').style.display = 'none';
            document.getElementById('{!$Component.theform.layoutEng}').style.display = 'none';
            document.getElementById('{!$Component.theform.layoutAge}').style.display = 'block';
        }
    }   
</script>

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


<apex:form id="theform">

            <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="Amp"></apex:selectOption>
                           <apex:selectOption itemLabel="Engage" itemValue="Eng"></apex:selectOption>
                           <apex:selectOption itemLabel="Agency" itemValue="Age"></apex:selectOption>
                        </apex:selectRadio>
                    </td>
                </tr>
            </Table>
            <apex:outputPanel id="layoutAmp" style="display:none">
            hello layoutAmp
            </apex:outputPanel>
            <apex:outputPanel id="layoutEng" style="display:none">
            hello layoutEng
            </apex:outputPanel>
            <apex:outputPanel id="layoutAge" style="display:none">
            hello layoutAge
            </apex:outputPanel>

</apex:form>
</apex:page>
  • I edited my code above to show what I am currently using. It saves fine, but when I create the record, the checkbox field on the Account does not update. Is there something I am missing? – J. Neilan Dec 8 '15 at 15:43
0

This is not salesforce specific, it's really just some javascript to manipulate the checkbox elements when the radio selection changes. This code isn't efficient or scalable but should get you started.

<apex:page id="thePage" standardController="Account">

    <apex:form id="theForm">

        <apex:selectRadio layout="lineDirection" onchange="changeHandler(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>


        field1: <apex:inputField id="field1" value="{!Account.Field1__c}" />
        field2: <apex:inputField id="field2" value="{!Account.Field2__c}" />
        field3: <apex:inputField id="field3" value="{!Account.Field3__c}" />

    </apex:form>

    <script>

        // get references to the checkbox elements in the page
        var field1Element = document.getElementById('{!$Component.thePage.theForm.field1}');
        var field2Element = document.getElementById('{!$Component.thePage.theForm.field2}');
        var field3Element = document.getElementById('{!$Component.thePage.theForm.field3}');

        // inspect the value of the radio elements and set the checkboxes accordingly
        var changeHandler = function(el) {
            if (el.value === 'Amp') {
                field1Element.checked = 'checked';
                field2Element.checked = '';
                field3Element.checked = '';
            }

            if (el.value === 'Eng') {
                field1Element.checked = '';
                field2Element.checked = 'checked';
                field3Element.checked = '';
            }

            if (el.value === 'Age') {
                field1Element.checked = '';
                field2Element.checked = '';
                field3Element.checked = 'checked';
            }

        };
    </script>
</apex:page>
  • I'm a little confused. I don't want the user to have to input Field1, Field2, or Field3. When they select the radio button, I want whatever value they selected to populate one of the 3 checkbox fields that corresponds to their selection. Your code seems to require a user input, is that correct? – J. Neilan Dec 8 '15 at 20:03
  • Your question is really vague on requirements. This is one option. You can do it the way I've got it noted if you want it to be done in a VF page. You can hide the input elements in the page if you don't want the user to see them. You can accomplish this in a trigger. You can do it with workflow rules and field updates. You can do it with visual workflow. I'm not documenting every option for ya, I just followed your lead with VF & JavaScript. – Mark Pond Dec 9 '15 at 0:36
  • Thanks Mark. Sorry for the confusion. I wanted to try to keep it all in the VF page so I didn't have to worry about coding and such. My radio button on the VF page has 3 options and I really just want the option selected to check off the custom field that corresponds to it on the Account once the user clicks save in the VF page. Seems fairly simple but is proving to be difficult. – J. Neilan Dec 9 '15 at 16:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.