On button click make a field editable, how is it possible?

Question

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?

Apex code :

 public Boolean editMode {get; set;}
  //constructor
  editMode = true;

   public PageReference addContactObject() {
    anewContact.add(new Contact(FirstName = ''));
    editMode = !editMode;
    return null;
}

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:outputPanel id="renderTarget">
                    <apex:inputfield value="{!item.REL_VS_Contact_Role__c}" rendered="{!editMode}"/>
                    <apex:outputField value="{!item.REL_VS_Contact_Role__c" rendered="{!NOT(editMode)}"/>
                    <apex:variable var="rowContactNumber" value="{!rowContactNumber + 1}" />
                  </apex:outputPanel>
                </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,renderTarget,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>

Answer 1

You could do this in a couple ways:

Javascript

Add an input and output field to the page, set the display for the input field to none. When your button is clicked, set display for the input field to inline and the display for the output to be none.

For javascript specific help visit StackOverflow.com

Visualforce

Basically the same as javascript except you'll need to use re-render and a server sided variable:

APEX:

public Boolean editMode {get; set;}

public void toggleEditMode() {
    editMode = !editMode;
}

VF:

<apex:commandButton value="Edit" action="{!toggleEditMode}" reRender="renderTarget"/>

<apex:outputPanel id="renderTarget">
    <apex:inputField value="{!record.field__c}" rendered="{!editMode}"/>
    <apex:outputField value="{!record.field__c}" rendered="{!NOT(editMOde)}"/>
</apex:outputPanel>

Update based on comments

This is a VERY simple example of a table that allows the user to add several contacts before preceding to the next step of a wizard:

Component:

<apex:component controller="AddMultipleRecordsController">
    <apex:form>
        <apex:pageBlock>
            <apex:pageBlockButtons>
                <apex:commandButton value="Add Contact" action="{!addRecord}" reRender="contactTable" />
                <apex:commandButton value="Save and Continue" action="{!step3}" />
            </apex:pageBlockButtons>
            <apex:pageBlockTable value="{!records}" var="record" id="contactTable">
                <apex:column>
                    <apex:inputField value="{!record.firstName}"/>
                </apex:column>
            </apex:pageBlockTable>
        </apex:pageBlock>
    </apex:form>
</apex:component>

Controller:

public class AddMultipleRecordsController {
    public List<Contact> records {get; set;}
    public Integer step {get; set;}

    public AddMultipleRecordsController() {
        records = new List<Contact>();
    }

    public void addRecord() {
        records.add(new Contact());
    }

    public void step3() {
        insert records;
        step = 3;
    }
}

Page:

<apex:page>
    <c:addmultiplerecordscomponent/>
</apex:page>