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

Convert 15 character IDs to 18 character IDs in formula field

Hi , We have new method " CASESAFEID() "in formula field now to make 15 character Id to 18 character. Classic 1. Go to  Se...