Take the 2-minute tour ×
Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It's 100% free, no registration required.

I have 3 radio buttons in my visaulforce page, and 2 text fields. When I click the first radio button, at that time the first text field should be displayed. When I click the second radio button, the second field should be displayed. When I click the third radio button, again, the second field should be displayed. I am using javascript to hide/show the text fields but it's not working. Can anyone please give me a suggestion?

<script type="text/javascript">

function show(t)
{
    if ( t.value == 0 ){
        document.getElementById("defaultcost").style.display = 'block';
        document.getElementById("differcost").style.display = 'none';
    }
    else{
      document.getElementById("defaultcost").style.display = 'none';
      document.getElementById("differcost").style.display = 'block';
    }     
}
</script>

VF Page

<apex:pageBlockSection>
    <apex:selectRadio value="{!Quote__c.shipping_type__c}" onChange="show(this);">
        <apex:selectOption itemLabel="Use Store Settings" itemValue="0" />
        <apex:selectOption itemLabel="Per Item" itemValue="1" />
        <apex:selectOption itemLabel="Fixed Price Per Order" itemValue="2" />   
    </apex:selectRadio>

    <apex:inputField value="{!Quote__c.storeprice__c}" id="defaultcost" style="display:block;"/><br/>
    <apex:inputField value="{!Quote__c.price__c}" id="differcost" style="display:none;"/><br/>         
</apex:pageBlockSection>
share|improve this question

1 Answer 1

I think that you have there 2 errors in javascript:

  1. You can't access a select.value element directly in javascript (only by using jquery or other framework). So you should change the t.value and get selected value using other code. google knows
  2. You can't reference directly in javascript using getElementById a field input id that has been set in visualfore (defaultcost), that is because SF create the input html element adding a "special" id. for instance: id_j7.ju77_3.defaultcost

My suggestion is to include jquery in your page an replace your javascript show method by this:

function show(t)
{
    if ( $(t).val() == 0 ){

        $('[id$="defaultcost"]').show();
        $('[id$="differcost"]').hide();
    }
    else{
       $('[id$="defaultcost"]').hide();
       $('[id$="differcost"]').show();

    }     
}
share|improve this answer
    
I used your code but it is not working may i know what is the problem –  Sathya Apr 2 at 10:56
    
I used your code but when i click on 2nd radio button at that time 2field will not displaying.what is the problem. –  Sathya Apr 2 at 11:10
    
Have you added the jQuery? What error you see? –  Martin Borthiry Apr 2 at 11:49
    
Now it's get saved but when i click 2nd radion button at that time 2 field is not displaying. –  Sathya Apr 2 at 11:53
    
The sample code had a typo. Pls, check it again. –  Martin Borthiry Apr 2 at 15:44

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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