function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

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

How to disable input fields when i enter a text value in another input field

Hi,

I have 6 input fields in which 4 are input text ( say IT1,IT2,IT3,IT4) field and 2 are select list field.(say SL1 ,SL2)
if i try to enter a text value in my IT1 field all the other fields (IT2,IT3,IT4,SL1,SL2) should be disabled in my vf page.

Can someone please help on this.your help will be very much appreciated.

Thanks in advance
Jason Curtis NBSFDGJason Curtis NBSFDG
Are you OK using some JavaScript?
Here is a handy resource: http://www.tehnrd.com/how-to-disable-visualforce-inputfields/
 
aaaaaaaaaaaaaaaaaaaaaa
Hi jason thanks a lot..
one more thing i wanted to ask you :
i want to disable the other fields when i start entering a text value in my text field, what actionsupport event should i use on my text field ?
Another thing when i press backspace and clear the complete text ( now no text present in my text box) the disabled field should again be enabled.How do i do this?

Thanks in advance

 
aaaaaaaaaaaaaaaaaaaaaa
Another thing i noticed the javascript is not working with apex actionsupport
for eg:
IN VF PAGE

<apex:pageBlockSectionItem >
               <apex:inputText id="searchOppName" value="{!searchOppName}" />
               <apex:actionSupport event="onkeypress" action="{!testac}" reRender="oppName"/ 
           </apex:pageBlockSectionItem>

 <apex:outputPanel id="oppName" >
               <apex:inputText id="searchAccName" value="{!searchAccName}" />
             <script>document.getElementById('{!$Component.searchrAccName}').disabled = {!testabc}; </script>
           </apex:outputPanel>

IN CLASS

public void testac(){
   
     testabc = true;
 
     }

Can you please help me on this? The searchAccName is not getting disabled.
SarfarajSarfaraj
I would suggest you to use javascript instead. Here is a working example,
  
<apex:page standardController="Account">
    <style>
        input.disabled {
    user-select : none;
    -moz-user-select : none;
    -webkit-user-select : none;
    color: gray;
    cursor: pointer;
}
    </style>
    <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
 /**
 * Readonly v1.0.0
 * by Arthur Corenzan <arthur@corenzan.com>
 * more on //github.com/haggen/readonly
 */
;(function($, undefined) {

  function readonly(element) {
    if(element.is('select')) {
      element.addClass('readonly').data('readonly', true).prop('disabled', true);
      element.after('<input type="hidden" name="' + element[0].name + '" value="' + element[0].value + '" data-select-sham>');
    } else {
      element.prop('readonly', true);
    }
  }

  function editable(element) {
    if(element.is('select')) {
      element.removeClass('readonly').removeData('readonly');
      element.prop('disabled', false).next('[data-select-sham]').remove();
    } else {
      element.prop('readonly', false);
    }
  }
  $.fn.editable = function(state) {
    return this.each(function(index, element) {
      element = $(element);

      if(state === undefined) {
        if(element.is('select')) {
          state = !element.data('readonly');
        } else {
          state = !element.prop('readonly');
        }
      }
      if(state);
      editable(element);
    });
  };

  $.fn.readonly = function(state) {
    return this.each(function(index, element) {
      element = $(element);

      if(state === undefined) {
        if(element.is('select')) {
          state = !element.data('readonly');
        } else {
          state = !element.prop('readonly');
        }
      }
      if(!state);
        readonly(element);
    });
  };
})(window.jQuery);
    </script>

    <script type="text/javascript">
        $(document).ready(function(){
            $("input").blur(function(){
                $("input").editable();
                $("select").editable();
            });
            $("input").keydown(function(){
                $("input").not(this).readonly();
                $("select").readonly();
            });
            $("select").click(function(){
                $(this).editable();
                $("input").readonly();
                $("select").not(this).readonly();
            });
            $("select").blur(function(){
                $("input").editable();
                $("select").editable();
            });
        });
    </script>
    <apex:form >
        <apex:pageBlock >
            <apex:pageBlockSection >
                <apex:inputField value="{!Account.Name}"/>
                <apex:inputField value="{!Account.AccountNumber}"/>
                <apex:inputField value="{!Account.Site}"/>
                <apex:inputField value="{!Account.AnnualRevenue}"/>
                <apex:inputField value="{!Account.Type}"/>
                <apex:inputField value="{!Account.Rating}"/>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

--Akram
aaaaaaaaaaaaaaaaaaaaaa
Hi Akram, thanks for providing me the solution,but i am not able to implement java script correctly for my scenario.Can you please help me on that?
My scenario is when i ener a text value in field IT2 (input text) all others fields should be disabled ,it should work as in the above example shared by you.

VF PAGE:
 <apex:pageBlock >
     
       <apex:pageBlockSection columns="1">
       
           <apex:pageBlockSectionItem >
               <apex:outputLabel value="IT1" for="OppName"/>
               <apex:inputText id="OppName" value="{!OppName}"/>
           </apex:pageBlockSectionItem>
           
           <apex:pageBlockSectionItem >
               <apex:outputLabel value="IT2" for="OppAccName"/>
               <apex:inputText id="OppAccName" value="{!OppAccName}"/>
           </apex:pageBlockSectionItem>   
           
           <apex:pageBlockSectionItem >
               <apex:outputLabel value="IT3" for="BookDate"/>
               <apex:inputField id="BookDate" value="{!Opp.Date}"/>
           </apex:pageBlockSectionItem>
           
           <apex:pageBlockSectionItem >
               <apex:outputLabel value="IT4" for="Bookstage"/>
               <apex:selectList id="Bookstage" value="{!BStage}" size="1" required="false">
                   <apex:selectOptions value="{!stages}"/>
               </apex:selectList>
           </apex:pageBlockSectionItem>
           
           <apex:pageBlockSectionItem rendered="{!IsProfile}">
               <apex:outputLabel value="IT5" for="BookStatus"/>
               <apex:selectList id="BookStatus" value="{!BStatus}" size="1" required="false">
                   <apex:selectOptions value="{!BStatuses}"/>
               </apex:selectList>
           </apex:pageBlockSectionItem>
           
       </apex:pageBlockSection>
    
    </apex:pageBlock>

Reply appreciate if you could help on this
Thanks
SarfarajSarfaraj
Hi

Put this code inside your page tag,
  
<style>
        input.disabled {
    user-select : none;
    -moz-user-select : none;
    -webkit-user-select : none;
    color: gray;
    cursor: pointer;
}
    </style>
    <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        /**
        https://developer.salesforce.com/forums/#!/feedtype=SINGLE_QUESTION_DETAIL&dc=Developer_Forums&criteria=UNANSWERED&id=906F0000000Ao8zIAC
 * Readonly v1.0.0
 * by Arthur Corenzan <arthur@corenzan.com>
 * more on //github.com/haggen/readonly
 */
;(function($, undefined) {

  function readonly(element) {
    if(element.is('select')) {
      element.addClass('readonly').data('readonly', true).prop('disabled', true);
      element.after('<input type="hidden" name="' + element[0].name + '" value="' + element[0].value + '" data-select-sham>');
    } else {
      element.prop('readonly', true);
    }
  }

  function editable(element) {
    if(element.is('select')) {
      element.removeClass('readonly').removeData('readonly');
      element.prop('disabled', false).next('[data-select-sham]').remove();
    } else {
      element.prop('readonly', false);
    }
  }
  $.fn.editable = function(state) {
    return this.each(function(index, element) {
      element = $(element);

      if(state === undefined) {
        if(element.is('select')) {
          state = !element.data('readonly');
        } else {
          state = !element.prop('readonly');
        }
      }
      if(state);
      editable(element);
    });
  };

  $.fn.readonly = function(state) {
    return this.each(function(index, element) {
      element = $(element);

      if(state === undefined) {
        if(element.is('select')) {
          state = !element.data('readonly');
        } else {
          state = !element.prop('readonly');
        }
      }
      if(!state);
        readonly(element);
    });
  };
})(window.jQuery);
    </script>

    <script type="text/javascript">
        $(document).ready(function(){
            $("input[id$=OppAccName]").blur(function(){
                $("input").editable();
                $("select").editable();
            });
            $("input[id$=OppAccName]").keydown(function(){
                $("input").not(this).readonly();
                $("select").readonly();
            });
            
        });
    </script>