+ Start a Discussion
DeepVDeepV 

on button click, make the field read only

I have REL_VS_Contact_Role__c field which is read only when the page loads. But when I click on the add new button(addContactObject). I wanted it to be editable, how do i achieve this?

Visualforce :

<apex:page standardcontroller="REL_VS_Submission__c" extensions="RELVSRenewalController" sidebar="false">
    <apex:sectionheader title="VSA Renewal Submission" subtitle="Step 2 of 10" />
    <apex:messages />
    <apex:form >
        <apex:pageblock title="Contact Information">
            Video providers must submit contact information for <b>at least 3 persons</b>: 1) the person authorized to receive information regarding the VSA; 2) the person designated to receive subscriber complaints and 3) the person designated to receive information regarding the annual cable assessment. If the data listed below is correct and complete, select save and continue. If any portion of the data is incorrect or missing, make the corrections now, then select save and continue.
            <!-- This facet tag defines the "Next" button that appears
            in the footer of the pageBlock. It calls the step2()
            controller method, which returns a pageReference to
            the next step of the wizard. -->
            <!--<apex:facet name="footer">
                <apex:commandbutton action="{!step3}" value="Save and Continue"
                                    styleclass="btn" />
            </apex:facet>-->
            <apex:variable value="{!0}" var="rowContactNumber" />
            <!-- Here we will use an extra variable to define a row number -->
            <apex:outputpanel id="panelWithVar">
                <apex:variable value="{!0}" var="rowContactNumber" />
            </apex:outputpanel>
            <apex:pageblocksection title="Contact Information" columns="1">
                <apex:pageblocktable value="{!anewContact}" var="item" id="newContactitems"  columnsWidth="5%,20%,10%,10%,10%,10%,5%,5%,5%,5%,10%,3%,2%">
                    <!-- A button to remove individual entry. s
                    We must to pass the line number to define a list entry number to remove -->
                    <apex:column headervalue="Delete">
                        <apex:commandbutton immediate="true" action="{!removeContactObject}" value=" X " rerender="newContactitems,panelWithVar">
                            <apex:param name="p2" value="{!rowContactNumber}" assignto="{!numberOfContactRowToRemove}" />
                        </apex:commandbutton>
                    </apex:column>
                    <!-- Moreover here we incrementing the row number variable -->
                    <!--<apex:column headerValue="RowCount">
                        <apex:outputText value="{!rowContactNumber}"/>
                    </apex:column>-->
                  
                   <apex:column headervalue="Role">
                        <apex:inputfield value="{!item.REL_VS_Contact_Role__c}" html-disabled="true"/>
                        <apex:variable var="rowContactNumber" value="{!rowContactNumber + 1}" />
                    </apex:column>
                    <apex:column headervalue="First Name">
                        <apex:inputfield value="{!item.Firstname}" required="true" />
                    </apex:column>
                    <apex:column headervalue="Last Name">
                        <apex:inputfield value="{!item.Lastname}" required="true" />
                    </apex:column>
                    <apex:column headervalue="Phone">
                        <apex:inputfield value="{!item.Phone}" required="true" />
                    </apex:column>
                    <apex:column headervalue="Fax">
                        <apex:inputfield value="{!item.Fax}" required="true" />
                    </apex:column>                  
                    <apex:column headervalue="Personal Email">
                        <apex:inputfield value="{!item.Email}" required="true" />
                    </apex:column>
                    <apex:column headervalue="General Email" >
                        <apex:inputfield value="{!item.REL_VS_Generic_Email__c}" />
                    </apex:column>
                    <apex:column headervalue="Title">
                        <apex:inputfield value="{!item.Title}" required="true"/>
                    </apex:column>
                     <apex:column headervalue="Mailing Street">
                        <apex:inputfield value="{!item.MailingStreet}" required="true"/>
                    </apex:column>
                    <apex:column headervalue="Mailing City">
                        <apex:inputfield value="{!item.MailingCity}" required="true"/>
                    </apex:column>
                    <apex:column headervalue="Mailing State">
                        <apex:inputfield value="{!item.MailingState}" required="true" />
                    </apex:column>
                    <apex:column headervalue="Mailing Zip">
                    <apex:inputfield value="{!item.MailingPostalCode}" required="true" />
                    </apex:column>
                 </apex:pageblocktable>
            </apex:pageblocksection>
            <!-- A main button to add a new item -->
            <apex:commandbutton value="Add Contact" action="{!addContactObject}" rerender="newContactitems,panelWithVar" immediate="true"/>

        </apex:pageblock>
        <apex:pageblock >
            <apex:pageblocksection columns="4">
                <apex:commandbutton action="{!step3}" value="Save and Continue"
                                    styleclass="btn" />
                <apex:commandbutton action="{!reset}" value="Reset Page"
                                    styleclass="btn" immediate="true" />
                <apex:commandbutton action="{!exit}" value="Exit"
                                    styleclass="btn" immediate="true" />
                <apex:commandbutton action="{!Back}" value="Back"
                                    styleclass="btn" immediate="true" />
            </apex:pageblocksection>
        </apex:pageblock>
    </apex:form>
</apex:page>
mritzimritzi
Since you are rerendering PageBlcokTable containing the disabled input field.
You can disable/enable it using a variable in Apex
public Boolean isDisabled{get;set;}

//in constructor initialize it to TRUE
isDisabled = TRUE;


//in addContactObject function, change it to FALSE
isDisabled = FALSE;
In VF page, use this variable in "disabled" tag
 
<apex:inputText value="{!item.REL_VS_Contact_Role__c}" disabled="{!isDisabled}"/>
If this solves your problem, please mark this as BEST ANSWER
 
DeepVDeepV
Thanks For the response 
mritzi.
I'm still not seeing the change. Please can you help me. I have done what you have mentioned.

this is my apex code:

isdisabled = true in the constructor

 public PageReference addContactObject() {
       
        anewContact.add(new Contact(FirstName = ''));
        isDisabled = FALSE;
        return null;
    }
DeepVDeepV
Is there a way, to make it editable onclick of the button. My requirement is to have it readonly and onclick make it editable.
krishna n 24krishna n 24
This code is working fine.....check once i tested it
isdisabled = true in the constructor

 public PageReference addContactObject() {
       
        anewContact.add(new Contact(FirstName = ''));
        isDisabled = FALSE;
        return null;
    }
DeepVDeepV
Thanks 
mritzi and  Krishna .
User-added image
What I am trying to do is I need a check condition if Role is none or when the user clicks add contact then only it should be editable.

htmldisabled as fals or true. It is making all the roles readonly.
mritzimritzi
use 'disabled' attribute on visualforce tags. Check the code I provided above
html-disabled won't work the way you want.

If this helps solve your problem, please mark this as BEST ANSWER.