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
doudou 

Javascript : show/hide some div associated with radio buttons in a visualforce page

Hello,

I have a probleme with javascript and a visualforce page so I need your help ;)

I have some radio buttons, and each have an id, I want that when I click on one button, a div appears in my visualforce page (I have 3 button and 3 div, corresponding to each button)

Here is my code, but obviosly it did not work :  
<apex:form >
<apex:selectRadio value="{!livraison}" layout="pageDirection" id="radios">
<apex:selectOption id="a" itemLabel="{!$Label.EXT_LIVRAISON_TRANSPORTEUR}" itemValue="{!$Label.EXT_LIVRAISON_TRANSPORTEUR}"/>
<apex:selectOption id="b" itemLabel="{!$Label.EXT_ENLEVEMENT_LABO}" itemValue="{!$Label.EXT_ENLEVEMENT_LABO}"/>
<apex:selectOption id="c" itemLabel="{!$Label.EXT_CMD_JOINDRE_CONSEILLERE}" itemValue="{!$Label.EXT_CMD_JOINDRE_CONSEILLERE}"/>
</apex:selectRadio>
                                   
 </apex:form>
 </div>

<script type="text/javascript">
        $(document).ready(function() { //hide the 3 div
            $('#diva').hide();
            $('#divb').hide();
            $('#divc').hide();
        });
        $('[id$=a]').change(function() {
            if(this.checked) {
                $('#diva').show();
                $('#divb').hide();
                $('#divc').hide();
            }
        });
        $('[id$=b]').change(function() {
            if(this.checked) {
                $('#divb').show();
                $('#diva').hide();
                $('#divc').hide();
            }
        });
        $('[id$=c]').change(function() {
            if(this.checked) {
                $('#divc').show();
                $('#diva').hide();
                $('#divb').hide();
            }
        });
My 3 radio button are working (i can check them), but not the divs.
I would like that my 3 div are hiden by default, and when i click a radio button the div associated are display...

Thank you !
 
Rahul SharmaRahul Sharma
It does not work because you are using jQuery but have not added any jQuery library.
Check the answer in this (https://developer.salesforce.com/forums/ForumsMain?id=906F0000000BQ3jIAG)post for an example.
doudou
Sorry of course I added the jquery library but I don't have posted my full code here (it is too long) and I have also not posted the 3 div by error but they are in it ;)
Rahul SharmaRahul Sharma
Try adding the change functions inside the document.ready: 
<script type="text/javascript">
    $(document).ready(function() { //hide the 3 div
        $('#diva').hide();
        $('#divb').hide();
        $('#divc').hide();

        $('[id$=a]').change(function() {
            if(this.checked) {
                $('#diva').show();
                $('#divb').hide();
                $('#divc').hide();
            }
        });
        $('[id$=b]').change(function() {
            if(this.checked) {
                $('#divb').show();
                $('#diva').hide();
                $('#divc').hide();
            }
        });
        $('[id$=c]').change(function() {
            if(this.checked) {
                $('#divc').show();
                $('#diva').hide();
                $('#divb').hide();
            }
        });
    });
</script>
They don't work otherwise, you should try adding some alerts inside the functions to debug common problems ;)
 
doudou
I tried this but that change nothing... I think my error comes from the ids but I don't see how to fix it....
Thank you