+ Start a Discussion
guru87guru87 

Having issues with copying text over from inputField to inputText via Javascript

Dear Salesforce experts,

I was having issues with copying text over from an inputfield to a textfield upon clicking on a checkbox.

The current visualforce page contains an inputfield (Id=companyId in the code below) that consists of a lookup to a company. This field is rendered if the "Create New" checkbox is not checked.

Upon clicking on the checkbox, the inputfield is replaced by a textfield for the user to enter the company name. At this very moment, the textfield that is rendered needs to be auto-populated with the text that was entered in the inputfield. I have attempted to use javascript to accomplish this, but so far have had no luck.

  

Visualforce page below:

 

<apex:page controller="CompanyUpdate" deferLastCommandUntilReady="true" >
    <script>
    function setObjectValues(input, companyId, companyText) {
 
        if(input.checked) {
            document.getElementById(companyText).value = document.getElementById(companyId).value; //copy the inputfield value over to the text field
            document.getElementById(companyId).value = ''; //set company lookup field to blank, to avoid the lookup validation
        }
    }
    </script>
   
    <apex:form >
        <apex:pageBlock >
            <apex:outputPanel id="entryPanel">
                <apex:pageBlockSection columns="1" collapsible="false"> 
                    <apex:pageBlockTable value="{!newUpdates}" var="n" width="100%" cellpadding="2" cellspacing="0" columnsWidth="30%,70%" styleClass="summaryTable">
                        <apex:column headerValue="Company">
                            <apex:inputField id="companyId" value="{!n.entry.Company__c}" rendered="{!NOT(n.create)}" />
                            <apex:inputText id="companyText" value="{!n.company}" rendered="{!(n.create)}"/>
                            <apex:outputLabel value="Create New" for="create"/>
                            <apex:inputCheckbox value="{!n.create}" id="create"  onchange="setObjectValues(this,'{!$Component.companyId}','{!$Component.companyText}');">
                                <apex:actionSupport event="onclick" rerender="entryPanel"/>
                            </apex:inputCheckbox>
                        </apex:column>
                    </apex:pageBlockTable>
                 </apex:pageBlockSection>
            </apex:outputPanel>
        </apex:pageBlock>
    </apex:form>
</apex:page>

 

  If anyone could provide some advice, it will be much appreciated! Thanks in advance!

 

Best Answer chosen by Admin (Salesforce Developers) 
Puja_mfsiPuja_mfsi

Hi,

You have used "rendered" in your text box and input field.

So when page is load then the below line is not rendered:

 

 <apex:inputText id="companyText" value="{!n.company}" rendered="{!(n.create)}"/>

 

So when u want to access "document.getElementById(companyText)"  it gives NULL and if u trying to get "value" from the Null it gives error ,u can see error in console with inspect element in chrome.

 

Instead rendered u can use the style attribute like: 

 

<apex:inputField id="companyId"  value="{!n.entry.Company__c}"  style="display:{!IF(NOT(n.create),'','None')}" />
<apex:inputText id="companyText" value="{!n.company}"  style="display:{!IF(n.create,'','None')}" />

 

And uor java script code is correct.

 

 

Please let me know if u have any problem on same and if this post helps u please throw KUDOS by click on star at left.

All Answers

Puja_mfsiPuja_mfsi

Hi,

You have used "rendered" in your text box and input field.

So when page is load then the below line is not rendered:

 

 <apex:inputText id="companyText" value="{!n.company}" rendered="{!(n.create)}"/>

 

So when u want to access "document.getElementById(companyText)"  it gives NULL and if u trying to get "value" from the Null it gives error ,u can see error in console with inspect element in chrome.

 

Instead rendered u can use the style attribute like: 

 

<apex:inputField id="companyId"  value="{!n.entry.Company__c}"  style="display:{!IF(NOT(n.create),'','None')}" />
<apex:inputText id="companyText" value="{!n.company}"  style="display:{!IF(n.create,'','None')}" />

 

And uor java script code is correct.

 

 

Please let me know if u have any problem on same and if this post helps u please throw KUDOS by click on star at left.

This was selected as the best answer
guru87guru87

Thank you Puja! Your solution worked! =)