+ Start a Discussion
csbaacsbaa 

Inputfield. Disable

Hell Helpers

I have a visual force page where i dispay an apex:inputfield component referencing a picklist member of a custom object

At a certain point I want to make this inputfield disabled

looking into the specification the component has no disabled attribute (like the custombutton for ex)

what option I have?

css style maybe?
i am not familiar with this so any example is appreciated


thanks in advance
csbaa
Best Answer chosen by csbaa
levon levonlevon levon
If you are using Browser: Chrome 
You can right click on the inputfield you want to check Id for and then select option 'inspect element'. It will return you the Id which you can use in your script. 

Also can you please check below link to retrieve the Id's of components in VF page.
https://www.salesforce.com/us/developer/docs/pages/Content/pages_variables_global_component.htm 


All Answers

levon levonlevon levon
Hi csbaa,

Yes You can disable this inputfield on Javascript event through CSS. for example in below example Case status is being disabled after entering some value into subject

<apex:page standardController="case" id="thePage">
    <script>
        function disablePicklistValueField()
        {
            document.getElementById("thePage:theForm:thePgBlck:thePBs:csStatus").disabled = true;  
        }
    </script>
    <apex:form id="theForm">
     <apex:pageblock id="thePgBlck">   
         <apex:pageBlockSection id="thePBs">
              <apex:inputField value="{!case.subject}" id="csNum" onchange="disablePicklistValueField();"/>  
            <apex:inputField value="{!case.status}" id="csStatus"/>
         </apex:pageBlockSection>
     </apex:pageblock>
    </apex:form>
</apex:page>

Thanks ! :)
csbaacsbaa
Thanks Levon

I tried  and the document.getelementById(....)   is returning null

I  tried to debug  and I found something

My  InputFfield   component is inside  a html  table  and this seems to be the problem

I have the following hierarchy

apex:page
apex:form
apex:pageBlock
table

in the table  one of the cell  is  the apex:inputField




I wrote a simpe  javascipt  function to see what happen
 
alert('theID='+ document.getElementById("pagele").id);
alert('theID='+ document.getElementById("pagele:formu").id);
alert('theID='+ document.getElementById("pagele:formu:pageblockid").id);
alert('theID='+ document.getElementById("pagele:formu:pageblockid:tablele").id);


The first  3  alert()  fucntion works

the 4-th  throw  an exception

"can not get property id  for null"


do you have idea  how to overcame this?


see how  my page looks  like  maybe it help  to  see what  is wrong with my page


<apex:page standardController="Coaching_Report_vod__c" extensions="VEEVA_CR_helper" id="pagele" >
<apex:form id="formu">

<apex:pageBlock id="pageblockid" title="Set qualification" rendered="{!IF(nrOfexistingItems==0,false,true)}">
<apex:pageBlockButtons location="top">
    <apex:commandButton value="Save"  action="{!UpdateCRIs}" oncomplete="window.top.location='/{!CR.id}'; return false" disabled="{!CR_status}" />
    <apex:commandButton value="Check"   oncomplete="check();"  />
</apex:pageBlockButtons>

<table border="1" id="tablele" > 
<tr>
<th align="center" >Category </th>
<th align="center" >Competency</th>
<th align="center" >Qualification</th>
</tr>
     <apex:repeat value="{!CRIs}" var="item">
    
     <tr>
     <td colspan = "3" >{!item.Description__c}</td>
     </tr>
     <tr>
         <td align="center">{!item.Category__c}</td>    
         <td align="center">{!item.Competency__c}</td>  
         <td style="{!IF(item.Calification__c=="","background-color:lightgreen;","background-color:lightblue;")}" align="center"><apex:inputField value="{!item.Calification__c}"  id="qualifu"/></td>                          
     </tr>
  </apex:repeat>
</table>
</apex:pageBlock>
</apex:form>

<script>
     
  function check()
  {
   try  
   {
   if({!Closed})
      alert('Closed');
   else
      alert('Open');
         
   alert('Name='+ document.getElementById("pagele").id);
   alert('Name='+ document.getElementById("pagele:formu").id);
   alert('Name='+ document.getElementById("pagele:formu:pageblockid").id);
   alert('Name='+ document.getElementById("pagele:formu:pageblockid:tablele").id);
   }
   catch(err)
   {
   alert('exception: ' + err.message);
   }
 
  }
  window.onload = check;

    </script>  
  
</apex:page>

Regards
csaba
levon levonlevon levon
If you are using Browser: Chrome 
You can right click on the inputfield you want to check Id for and then select option 'inspect element'. It will return you the Id which you can use in your script. 

Also can you please check below link to retrieve the Id's of components in VF page.
https://www.salesforce.com/us/developer/docs/pages/Content/pages_variables_global_component.htm 


This was selected as the best answer