function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Robert Davis 16Robert Davis 16 

Visualforce Page - Populate fields based on Value from another Field - JavaScript inside VF Page

Hello, I am hoping some will be able to help. I have a visualforce page that I use to select products from the pricebook. What I would like to do is when a field named Seats__c is updated on the page that it also updates the field value of a field named X2018_Q1_Seats__c. I would like to have it so that if the user would like to over write it they can but it would default to the value in Seats__c by default.

Below is what I have tried, unsuccessfully:
<apex:page standardController="Opportunity" extensions="opportunityProductEntryExtension" action="{!priceBookCheck}" >
    <apex:sectionHeader Title="Manage {!$ObjectType.Product2.LabelPlural}" subtitle="{!opportunity.Name}"/>
    <apex:messages style="color:red"/>

    <style>
        .search{
            font-size:14pt;
            margin-right: 20px;    
        }
        .fyi{
            color:red;
            font-style:italic;
        }
        .label{
            margin-right:10px;
            font-weight:bold;
        }
        
    </style>
    
    <script type='text/javascript'>
    
        // This script assists the search bar functionality
        // It will execute a search only after the user has stopped typing for more than 1 second
        // To raise the time between when the user stops typing and the search, edit the following variable:
        
        var waitTime = 1;
        
    
        var countDown = waitTime+1;
        var started = false;
        
        function resetTimer(){
        
            countDown=waitTime+1;
            
            if(started==false){
                started=true;
                runCountDown();
            }
        }
        
        function runCountDown(){
        
            countDown--;
            
            if(countDown<=0){
                fetchResults();
                started=false;
            }
            else{
                window.setTimeout(runCountDown,1000);
            }
        }
        function updateSeats() {
            var totalSeats = document.getElementById("{!$Component.pageform.mainBody.selected.pageblocktable.seatColumn.Seats}");
            document.getElementById("{!$Component.pageform.mainBody.selected.pageblocktable.yearOneColumn.pageBlockSectionYearOne.result}").value = totalSeats;
            }

               
    </script>

    <apex:form id="pageform" >
    
        <apex:outputPanel id="mainBody">
        
            <apex:outputLabel styleClass="label">PriceBook: </apex:outputLabel>
            <apex:outputText value="{!theBook.Name}"/>&nbsp;
            <apex:commandLink action="{!changePricebook}" value="change" immediate="true"/>
            <br/>
            <!-- not everyone is using multi-currency, so this section may or may not show -->
            <apex:outputPanel rendered="{!multipleCurrencies}">
                <apex:outputLabel styleClass="label">Currency: </apex:outputLabel>
                <apex:outputText value="{!chosenCurrency}"/>
                <br/>
            </apex:outputPanel>
            <br/>
            
<!-- this is the upper table... a.k.a. the "Shopping Cart"-->

            <!-- notice we use a lot of $ObjectType merge fields... I did that because if you have changed the labels of fields or objects it will reflect your own lingo -->
            <apex:pageBlock title="Selected {!$ObjectType.Product2.LabelPlural}" id="selected">
                       
                <apex:pageblockTable value="{!shoppingCart}" var="s" id="pageblocktable">
                
                    <apex:column >
                        <apex:commandLink value="Remove" action="{!removeFromShoppingCart}" reRender="selected,searchResults" immediate="true">
                            <!-- this param is how we send an argument to the controller, so it knows which row we clicked 'remove' on -->
                            <apex:param value="{!s.PriceBookEntryId}" assignTo="{!toUnselect}" name="toUnselect"/>
                        </apex:commandLink>
                    </apex:column>
                    <apex:column headerValue=" " title="{!$ObjectType.Product2.fields.Name.inlineHelpText}"> 
                        <apex:pageBlockSection >
                        <apex:inputField value="{!s.Program_Start_Date__c}" label="Program Start Date :"
                                                                            rendered="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"
                                                                            required="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"/>
                        </apex:pageBlockSection>
                        <apex:outputField value="{!s.PriceBookEntry.Product2.Name}"/><br/>
                        <i>Line Item Description : </i>
                        <apex:inputField value="{!s.Description}" /><br/>
                        
                        
                    </apex:column>
                    <apex:column headerValue="">
                        <br/><br/>
                        # of&nbsp;<apex:outputField value="{!s.PricebookEntry.Product2.Unit_of_Measure_Plural__c}" style="width:180px"/><br/>
                        <apex:outputText value="Svc Channel" rendered="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"></apex:outputText><br/><br/><br/><br/><br/>
                        <apex:outputText value="Qtrly Seat Ramp :" rendered="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"></apex:outputText><br/><br/><br/>
                    </apex:column>
                    <apex:column headerValue=" "
                                 title="{!$ObjectType.OpportunityLineItem.fields.Quantity.inlineHelpText}" id="yearOneColumn">
                        <br/>
                        <apex:inputField value="{!s.Quantity}" style="width:50px" />
                        <apex:inputField value="{!s.Service_Channel__c}" 
                                         rendered="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"
                                         required="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"/>
                        <apex:pageBlockSection id="pageBlockSectionYearOne">
                        
                        <apex:inputField value="{!s.X2018_Q1_Seats__c}" style="width:30px" id="result" 
                                                rendered="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"
                                                required="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"/>
                        <apex:inputField value="{!s.X2018_Q2_Seats__c}" style="width:30px"
                                                rendered="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"
                                                required="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"/>
                        <apex:inputField value="{!s.X2018_Q3_Seats__c}" style="width:30px"
                                                rendered="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"
                                                required="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"/>
                        <apex:inputField value="{!s.X2018_Q4_Seats__c}" style="width:30px"
                                                rendered="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"
                                                required="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"/>
                        </apex:pageBlockSection> 
                     </apex:column>  
                        <apex:outputText value="2018 Q3" rendered="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"></apex:outputText>                    
                    <apex:column headerValue=" "
                                 title="{!$ObjectType.OpportunityLineItem.fields.Number_of_Months__c.inlineHelpText}">
                        <center>
                        <b>Contract Length (Months)</b>
                        <apex:inputField value="{!s.Number_of_Months__c}" style="width:50px"/>
                        </center>
                    </apex:column>
                    <apex:column headerValue="">
                        price per&nbsp;<apex:outputField value="{!s.PricebookEntry.Product2.Unit_of_Measure_Singular__c}" style="width:160px"/><br/>
                        <apex:outputText value="Service Type" rendered="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"></apex:outputText><br/><br/><br/><br/><br/>
                        <apex:outputText value="Qtrly Seat Ramp :" rendered="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"></apex:outputText><br/><br/><br/>
                    </apex:column>
                    
                    <apex:column headerValue=" "
                                 title="{!$ObjectType.OpportunityLineItem.fields.UnitPrice.inlineHelpText}">
                        <apex:inputField value="{!s.Unit_Price2__c}" style="width:70px" required="true"  />
                        <apex:inputField value="{!s.Service_Type__c}"
                                         rendered="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"
                                         required="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"/>
                        <apex:pageBlockSection >
                        
                        <apex:inputField value="{!s.X2019_Q1_Seats__c}" style="width:30px" 
                                                 rendered="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"
                                                 required="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"/>
                        <apex:inputField value="{!s.X2019_Q2_Seats__c}" style="width:30px"
                                                rendered="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"
                                                required="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"/>
                        <apex:inputField value="{!s.X2019_Q3_Seats__c}" style="width:30px"
                                                rendered="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"
                                                required="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"/>
                        <apex:inputField value="{!s.X2019_Q4_Seats__c}" style="width:30px"
                                                rendered="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"
                                                required="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"/>
                        </apex:pageBlockSection>
                    </apex:column>
                    <apex:column headerValue=" " title="Enter Your Specific Margin - Pre-Populated with Avg">
                        <center>
                        <b>Adj GM%</b>
                        <apex:inputField value="{!s.Adjusted_Gross_Margin_Percentage__c}" style="width:30px" />
                        </center>
                    </apex:column>
                    <apex:column headerValue=" "
                                 title="{!$ObjectType.OpportunityLineItem.fields.One_Time_Revenue__c.inlineHelpText}">
                        <center>
                        <b>One-Time Rev</b>
                        <apex:inputCheckbox value="{!s.One_Time_Revenue__c}"  />
                        </center>
                    </apex:column>
                    <apex:column headerValue=" " title=" ">
                        <apex:outputLabel rendered="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}" style="width:50px">Total # of Seats&nbsp;</apex:outputLabel>
                        <br/><br/><br/><br/><br/><br/>
                    </apex:column>

                    <apex:column headerValue=" " title="{!$ObjectType.OpportunityLineItem.fields.Seats__c.inlineHelpText}" id="seatColumn">
                        
                        <apex:inputField value="{!s.Seats__c}"  style="width:50px"  onkeyup="refreshTotals();"  id="Seats" onclick="updateSeats()"
                                      rendered="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"
                                      required="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"/>
                        <br/><br/><br/><br/><br/><br/>
                    </apex:column>

                </apex:pageblockTable>
            
            
                <apex:pageBlockButtons >
                    <apex:commandButton action="{!onSave}" value="Save"/>
                    <apex:commandButton action="{!onCancel}" value="Cancel" immediate="true"/>
                </apex:pageBlockButtons>
            
            </apex:pageBlock>   
            <apex:pageBlock >
                <apex:outputPanel styleClass="search">
                    Search for {!$ObjectType.Product2.LabelPlural}:
                </apex:outputPanel>
                <apex:actionRegion renderRegionOnly="false" immediate="true">
                    <apex:actionFunction name="fetchResults" action="{!updateAvailableList}" reRender="searchResults" status="searchStatus"/>
                    <apex:selectList value="{!selectedProdFamily}" label="Select Product Family : " multiselect="false" size="1">
                        <apex:actionSupport event="onchange" action="{!updateAvailableList}" />
                        <apex:selectOptions value="{!ProductFamily}"  />
                    </apex:selectList>
                    &nbsp;&nbsp;                 
                    <apex:inputText value="{!searchString}" onkeydown="if(event.keyCode==13){this.blur();}else{resetTimer();}" style="width:300px"/>
                    &nbsp;&nbsp;
                                  <apex:actionStatus id="searchStatus" startText="searching..." stopText=" "/>
                    </i>    
                </apex:actionRegion>
            
                <br/>
                <br/>
            
                <apex:outputPanel id="searchResults">
                    <apex:pageBlockTable value="{!AvailableProducts}" var="a">                       
                        <apex:column headerValue="{!$ObjectType.Product2.Fields.Family.Label} / Company" value="{!a.Product2.Family}"/>
                        <apex:column headerValue="{!$ObjectType.Product2.Fields.Name.Label}" value="{!a.Product2.Name}" />                      
                        <apex:column headerValue="{!$ObjectType.Product2.Fields.Product_Gross_Margin__c.Label}" value="{!a.Product2.Product_Gross_Margin__c}"/>                    
                        <apex:column >
                            <!-- command button in a column... neato -->
                            <apex:commandButton value="Select" action="{!addToShoppingCart}" reRender="selected,searchResults" immediate="true">
                                <!-- again we use apex:param to be able to tell the controller which row we are working with -->
                                <apex:param value="{!a.Id}" assignTo="{!toSelect}" name="toSelect"/>
                            </apex:commandButton>
                        </apex:column>               
                    </apex:pageBlockTable>
                    <!-- We put up a warning if results exceed 100 rows -->
                    <apex:outputPanel styleClass="fyi" rendered="{!overLimit}">
                        <br/>
                        Your search returned over 100 results, use a more specific search string if you do not see the desired {!$ObjectType.Product2.Label}.
                        <br/>
                    </apex:outputPanel>            
                </apex:outputPanel>
            </apex:pageBlock>
        </apex:outputPanel>
    </apex:form>
</apex:page>

This is the javascript function that I am trying to use (it is above but thought it would be easier to see) here:
<script>
function updateSeats() {
            var totalSeats = document.getElementById("{!$Component.pageform.mainBody.selected.pageblocktable.seatColumn.Seats}");
            document.getElementById("{!$Component.pageform.mainBody.selected.pageblocktable.yearOneColumn.pageBlockSectionYearOne.result}").value = totalSeats;
            }
</script>

Thank you in advance,

Robert
Alain CabonAlain Cabon
Hello,

If all the Ids in the paths after !$Component are correct, it lacks just ".value" for totalSeats

and you could use onkeyup instead of onclick for simultaneous updates.

 <apex:inputField value="{!s.Seats__c}" style="width:50px"  onkeyup="refreshTotals();updateSeats() " id="Seats"
 
<script>
function updateSeats() {
            var totalSeats = document.getElementById("{!$Component.pageform.mainBody.selected.pageblocktable.seatColumn.Seats}").value;
            document.getElementById("{!$Component.pageform.mainBody.selected.pageblocktable.yearOneColumn.pageBlockSectionYearOne.result}").value = totalSeats;
            }
</script>

Alain
Robert Davis 16Robert Davis 16
Alain,

Thanks for the help. I am still working to get it to work but I appreciate the help.

Robert
Alain CabonAlain Cabon
Robert,

I have made a simpler test and if your paths seem correct (I have just checked them quickly now).

1) Did you see these alert popups?
 
<script>
function updateSeats() {
       alert('1-updateSeats');
            var totalSeats = document.getElementById("{!$Component.pageform.mainBody.selected.pageblocktable.seatColumn.Seats}").value;
         alert('2-totalSeats:'+ totalSeats);
            document.getElementById("{!$Component.pageform.mainBody.selected.pageblocktable.yearOneColumn.pageBlockSectionYearOne.result}").value = totalSeats;
            }
</script>

2) In fact, if there is just a little bug (uppcase instead of lowercase) in the javascript code, nothing works (silently).

With Chrome, you should open the DevTools panel.  Press Command+Option+I (Mac) or Control+Shift+I (Windows, Linux).

https://developers.google.com/web/tools/chrome-devtools/

The Dev Tools is absolutely mandatory especially with javascript as soon as that doesn't work.
Robert Davis 16Robert Davis 16
Alain,

Thanks. Still trying to figure it all out. I never get to the second alert. I will definitely give the URL a look.

Robert
Robert Davis 16Robert Davis 16
Alain,

Thank you for your patience. I am new to JavaScript. I did as you suggested, but nothing happened. When I looked at the Chrome Developer tool I get the following:

User-added image
I am not sure what this tells me.

Robert
Alain CabonAlain Cabon
You can click on the link "opportunityProductEn.......AA3:75"

And "updateSeats" is not defined => click on the link "opportunityProductEn.......AA3:137"

What do you see?
Robert Davis 16Robert Davis 16
When I click the first link I get a blank screen with the following when I hover over the yellow triangle:

The certificate used to load https://sitel--full--c.cs79.visual.force.com/apex/opportunityProductEntry?id=0061h0000027e2UAAQ uses an SSL certificate that will be distrusted in an upcoming release of Chrome. Once distrusted, users will be prevented from loading this resource. See https://g.co/chrome/symantecpkicerts for more information.

User-added image

Robert
Alain CabonAlain Cabon

<script>
function updateSeats() {  
alert('1-updateSeats'); 
alert("2-[{!$Component.pageform}]");
alert("3-[{!$Component.pageform.mainBody}]");
alert("4-[{!$Component.pageform.mainBody.selected}]");
alert("5-[{!$Component.pageform.mainBody.selected.pageblocktable}]");
alert("6-[{!$Component.pageform.mainBody.selected.pageblocktable.seatColumn}]");
alert("7-[{!$Component.pageform.mainBody.selected.pageblocktable.seatColumn.Seats}]");
var totalSeats = document.getElementById("{!$Component.pageform.mainBody.selected.pageblocktable.seatColumn.Seats}").value;  
alert('2-totalSeats:'+ totalSeats);
document.getElementById("{!$Component.pageform.mainBody.selected.pageblocktable.yearOneColumn.pageBlockSectionYearOne.result}").value = totalSeats; }
</script>

Chrome:   Control+Shift+C  (inspector)