Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
shinerajbshinerajb 

Issue with javascript for inputText

Hai,

I am trying to hide and display  a inputText field ,on change of a radio button,using javascript,but the issue is that,this is affecting only to the label of that text field,and no efffect on the text field.Please suggest me a solution

 

 

<script type="text/javascript">

function showVisibility(radio_value,id)
{ 
if(radio_value==1)
document.getElementById("average_sales").style.display="block";
if(radio_value==0)
document.getElementById("average_sales").style.display="none";
}
</script>

 

*********VF page **********

<label for="typical">4.Is this typical?</label>
<apex:selectRadio id="typical" onchange="showVisibility(this.value)" >
<apex:selectOption itemValue="0" itemLabel="Yes" />
<apex:selectOption itemValue="1" itemLabel="No" />
</apex:selectRadio>

<div id="average_sales">
<label for="average_sales_price">4.1.what is the average sales price?</label>
<apex:inputText id="average_sales_price" label="4.1.what is the average sales price?"/>
</div>

 

 

Shine

JitendraJitendra

Hi Shine,

 

The ElementId you are searching for will not work. Whatever ID you provide to element, salesforce changes it.

So if you want the elementId of the inputText field, use below sytax:

{!$Component.fieldId}

 You can read below few posts, which will throw light on this scenario:

 

http://shivasoft.in/blog/salesforce/get-dom-elementid-of-the-visualforce-components/

http://shivasoft.in/blog/others/tips/handling-colon-in-element-id-in-jquery-visualforce-problem/
Dipa87Dipa87

Try to put that input text inside an outputpanel.

 

Rerender the outputpanel on click of the radio button.

 

On click of the radio button call an action function which in turns calls an apex method to show or hide the outputpanel.

 

Something like this:

In Page

on click of radio button call this action function-->

 <apex:actionFunction action="{!callMethod}" name="acFunct" reRender="testPanel"/>

 

 

 <apex:outputPanel id="testPanel" rendered="{!showInput}">
                         //input text
 </apex:outputPanel>

 

In controller


//to hide /show the input
    public boolean showInput{get;set;}

    public callMethod(){

        showInput =  false;

    }