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';
      document.getElementById("defaultcost").style.display = 'none';
      document.getElementById("differcost").style.display = 'block';

VF Page

    <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: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/>         

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 ){


  • I used your code but it is not working may i know what is the problem
    – Sathya
    Apr 2, 2014 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, 2014 at 11:10
  • Have you added the jQuery? What error you see? Apr 2, 2014 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, 2014 at 11:53
  • The sample code had a typo. Pls, check it again. Apr 2, 2014 at 15:44

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .