Friday, 1 May 2015

Enable and disable inputFields in visualforce page using jQuery

Hi,

A simple visualfoce page which contains enable and disable functionality for input fields using jquery.

Code:
====
<apex:page  sidebar="false" standardController="Account">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <apex:form>
        <apex:pageBlock>
            <apex:pageBlockSection columns="1">
                <apex:inputField value="{!Account.Name}"/>
                <apex:inputField value="{!Account.Type}" id="type"/>
                <apex:inputField value="{!Account.Phone}" id="Phone"/>
                <apex:inputField value="{!Account.AccountNumber}" id="actNumber"/>
                <apex:inputField value="{!Account.Industry}" id="industry"/>
                <apex:inputField value="{!Account.AnnualRevenue}" id="anualReven"/>
                <apex:inputField value="{!Account.SLAExpirationDate__c}" id="slaexpdate"/>
            </apex:pageBlockSection>  
            <apex:pageBlockButtons location="bottom">
                <apex:commandButton value="Save" action="{!save}"/>
            </apex:pageBlockButtons>  
        </apex:pageBlock>  
    </apex:form>
    <script>
        $(document).ready(function(){
            $("[id$=type]").change(function(){
                if(this.value=="Other"){
                        $("[id$=Phone]").val("");
                        $("[id$=actNumber]").val("");
                        $("[id$=industry]").val("");
                        $("[id$=anualReven]").val("");
                        $("[id$=slaexpdate]").val("");
                        $("input[id$=Phone]").prop("disabled",true);                      
                       $("[id$=Phone]").prop("disabled",true);
                        $("[id$=actNumber]").prop("disabled",true);
                        $("[id$=industry]").prop("disabled",true);
                        $("[id$=anualReven]").prop("disabled",true);
                        $("[id$=slaexpdate]").prop("disabled",true);
                }
                else{
                      $("[id$=Phone]").prop("disabled",false);
                        $("[id$=actNumber]").prop("disabled",false);
                        $("[id$=industry]").prop("disabled",false);
                        $("[id$=anualReven]").prop("disabled",false);
                        $("[id$=slaexpdate]").prop("disabled",false);
                }              
            });
        });
    </script>
</apex:page>

Output:
---------
When Account Type "Other" we are disabling the fields as shown below.


 When Account Type is not "Other" we are enabling the fields as shown below.








1 comment:

  1. what about lookup relation if am selecting one record and i want to access one field from that lookup if its true then field which is present on vf page get enable disable according to situations.

    ReplyDelete

Best Practices for Building Prompt Templates

 Hi, The following best practices should be considered when building prompt templates: Make sure that your prompt templates are concise and ...