0

I want to change a value of one inputfield dynamically based on another inputfield,if i enter some value it should reflect it into another field. I added my jquey but it is not working.

<apex:page standardController="Opportunity" extensions="PricingOptionCalculatorCtrl" sidebar="false" >
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>



    <apex:stylesheet value="{!$Resource.extendedcss}"/>
    <apex:stylesheet value="{!$Resource.Main}" />

      <script>
                 $(function(){
          $("#box1").keypress(function()
          {
        $("#box2").val($(this).val());
          }    
            });

        </script>
<apex:form >
<style>

    body .bPageBlock .pbBody .labelCol{
    white-space:nowrap;
    }
    body .mainTitle{
    white-space:nowrap;
    }
    #minHandle, #maxHandle{
                width: 50px;
                text-align: center;
            }
    #minHandle1, #maxHandle1{
                width: 50px;
                text-align: center;
            }
    #minHandle2, #maxHandle2{
                width: 50px;
                text-align: center;
            }

    #slider-range-term
        {
        width: 80%;
        margin-left: 1em;
        }

   .OuterTable
        {
        width:100%;
        background-color: rgb(248, 248, 248);
        border-collapse: collapse;
        border-spacing: 0;
        border: 1px solid silver;
        }
</style>



<apex:sectionHeader title="PRICING OPTIONS CALCULATOR"/>

    <table class="OuterTable customCssClass">    
    <tr>
       <td style="width:30%" valign="top">
           <!-- --------- MERCHANT DETAILS section start----------------- -->
           <apex:pageBlock title="MERCHANT DETAILS">
               <apex:pageblocksection columns="1">
                     <apex:outputField value="{!Opportunity.Name}" label="Legal Name" style="float:left" />
                     <apex:outputField value="{!Opportunity.Business_DBA_Name__c}" label="DBA"/>
                     <apex:outputField value="{!Opportunity.Fico_Requirement__c}" label="Credit Score"/>
                     <apex:outputField value="{!Opportunity.Time_In_Business__c}" label="Years in Business"/>
                     <apex:outputField value="{!Opportunity.Daily_Payment__c}" label="Avg. Daily Bank Balance" />
               </apex:pageblocksection>
       </apex:pageBlock>
          <!-- --------- MERCHANT DETAILS section ends----------------- -->
      </td>
       <td style="width:70%" valign="top">
         <!-- --------- OFFER USER INPUT section start----------------- -->
            <apex:pageBlock title="OFFER USER INPUT">
            <apex:pageBlockSection columns="2" >

                <apex:inputfield value="{!objOpportunity .Program_Type__c}" />
                <apex:inputfield value="{!objOpportunity .ForecastCategoryName}"/>
                <apex:outputlabel />
                <apex:inputField value="{!objOpportunity .Monthly_Gross_Sales__c}"/>
                <apex:inputField value="{!objOpportunity .Credit_Card_Processing_Volume_LM__c}"/>
                <apex:inputField value="{!objOpportunity .Max_Monthly_Payment__c}"/>
                <apex:inputField value="{!objOpportunity .Adjusted_Monthly_Gross_Sale__c}"/>
                <apex:inputField value="{!objOpportunity .Adjusted_Monthly_CC_Sale__c}"/>
                <apex:inputField value="{!objOpportunity .Holdback__c}"/>
                <apex:inputField value="{!objOpportunity .Factor_Rate__c}"/>
                <apex:inputField value="{!objOpportunity .Hybrid_Holdback__c}"/>
                <apex:inputField value="{!objOpportunity .Hybrid_Amount_Payment__c}"/>
                <apex:inputField value="{!objOpportunity .Amount_Requested__c}" id="box1"/>
                <br/>
                <br/>
                <br/><br/>
            </apex:pageBlockSection>
            </apex:pageBlock>
            <!-- --------- OFFER USER INPUT section ends----------------- -->
       </td>    
     </tr>
     </table>
     <br/>
     <br/>

    <table style="width:100%"  class="customListTableCss">
    <!-- <tr>
    <th>  </th>
    <th> OFFERS</th>
    </tr>-->
    <tr >
       <td style="width:40%" valign="top">
       <!-- --------- PRICE CALCULATOR section start----------------- -->
           <apex:pageBlock title="PRICE CALCULATOR" > 
           <apex:pageblockSection columns="1">



           <apex:inputField value="{!objOpportunity.Amount_Requested__c}"  id="box2"/>



           <!-- <div id="slider"></div>



            <script>
               $var = "{!objOpportunity.Amount_Requested__c}";
               //alert({!objOpportunity.Monthly_Gross_Sales__c});

                $("#slider").rangeSlider({bounds:{min: 10000, max: 50000}},{defaultValues:{min:$var,max:$var }});

            </script>-->

          <apex:inputField value="{!objOpportunity.Factor_Rate__c}"/>
          <!--<div id="slider1"></div>
          <script>
           $var = "{!objOpportunity.Factor_Rate__c}";
            $("#slider1").rangeSlider({bounds:{min: 1, max: 9}},{defaultValues:{min: $var, max: $var}});
            </script>-->  

           <apex:inputField value="{!objOpportunity.Daily_Payment__c}"/>
           <!-- <div id="slider2"></div>
          <script>
               $var = "{!objOpportunity.Term__c}";
                $("#slider2").rangeSlider({bounds:{min: 1, max: 12}},{defaultValues:{min: $var, max: $var}});
          </script>    -->


     </apex:pageblockSection>
     </apex:pageBlock>
     <!-- --------- PRICE CALCULATOR section ends----------------- -->
  </td>
  <td style="width:60%" valign="top" > 
     <!-- --------- OFFERS section starts----------------- -->
     <apex:pageBlock title="OFFERS">
           <apex:pageblocktable value="{!wrap}" var="w" id="offtbl">
                <apex:column headerValue="Offer Name" >
                    <apex:outputField value="{!w.offerwrap.Name}" rendered="{!!w.editble}" />
                    <apex:inputField value="{!w.offerwrap.Name}" rendered="{!w.editble}"/>
                </apex:column>
                <apex:column headerValue="Type" >
                    <apex:outputField value="{!w.offerwrap.Offer_Type__c}" rendered="{!!w.editble}"/>
                    <apex:inputField value="{!w.offerwrap.Offer_Type__c}" rendered="{!w.editble}"/>
                </apex:column>
                <apex:column headerValue="Term(Months)">
                     <!-- <apex:outputField value="{!w.offerwrap.Opportunity__r.Term__c}" rendered="{!!w.editble}"/>
                    <apex:inputField value="{!w.offerwrap.Opportunity__r.Term__c}" rendered="{!w.editble}"/>-->
                </apex:column>
                <apex:column headerValue="Funded" >
                     <!--    <apex:outputField value="{!w.offerwrap.Cash_Wanted__c}" rendered="{!!w.editble}"/>
                     <apex:inputField value="{!w.offerwrap.Cash_Wanted__c}" rendered="{!w.editble}"/>-->
                </apex:column>
                <apex:column headerValue="Payback" >
                    <!--    <apex:outputField value="{!w.offerwrap.Payback__c}" rendered="{!!w.editble}"/>
                    <apex:inputField value="{!w.offerwrap.Payback__c}" rendered="{!w.editble}"/>-->
                </apex:column>
                <apex:column headerValue="Rate" >
                     <!--   <apex:outputField value="{!w.offerwrap.Opportunity__r.Factor_Rate__c}" rendered="{!!w.editble}"/>
                     <apex:inputField value="{!w.offerwrap.Opportunity__r.Factor_Rate__c}" rendered="{!w.editble}"/>-->
                </apex:column>
                <apex:column headerValue="HoldBack%" >
                       <!-- <apex:outputField value="{!w.offerwrap.WH_Withhold__c }" rendered="{!!w.editble}"/>
                       <apex:inputField value="{!w.offerwrap.WH_Withhold__c }" rendered="{!w.editble}"/>-->
                </apex:column>
                <apex:column headerValue="Daily PB Amount" >
                       <!--  <apex:outputField value="{!w.offerwrap.Reduced_UW_V_MC__c}" rendered="{!!w.editble}"/>
                       <apex:inputField value="{!w.offerwrap.Reduced_UW_V_MC__c}" rendered="{!w.editble}"/>-->
                </apex:column>
                <apex:column headerValue="Monthly PB Amount" >
                       <!-- <apex:outputField value="{!w.offerwrap.AVG_Monthly_VMC__c}" rendered="{!!w.editble}"/>
                       <apex:inputField value="{!w.offerwrap.AVG_Monthly_VMC__c}" rendered="{!w.editble}"/>-->
                </apex:column>
                <apex:column headerValue="Deal Length(Days)">
                      <!--  <apex:outputField value="{!w.offerwrap.Deal_Length_Days__c}" rendered="{!!w.editble}"/>
                      <apex:inputField value="{!w.offerwrap.Deal_Length_Days__c}" rendered="{!w.editble}"/>-->
                </apex:column>
                <apex:column headerValue="Factor per Month" >
                      <!--   <apex:outputField value="{!w.offerwrap.Factor_per_Month__c}" rendered="{!!w.editble}"/>
                      <apex:inputField value="{!w.offerwrap.Factor_per_Month__c}" rendered="{!w.editble}"/>-->
                </apex:column>
                <apex:column headerValue="%of Gross">
                       <!--  <apex:outputField value="{!w.offerwrap.Percentage_of_Gross__c}" rendered="{!!w.editble}"/>
                       <apex:inputField value="{!w.offerwrap.Percentage_of_Gross__c}" rendered="{!w.editble}"/>-->
                </apex:column>
                <apex:column headerValue="Action">
                        <apex:commandLink value="Edit"  action="{!editoffer}" reRender="offtbl" rendered="{!!w.selected}">
                            <apex:param assignTo="{!opget}" value="{!w.index}" name="editid"/>
                        </apex:commandLink>
                  <apex:commandButton value="Save" action="{!saveoffer}" reRender="offtbl"  rendered="{!w.selected}">&nbsp;
                         <apex:param name="saveid" value="{!w.index}" assignTo="{!opget}"/>
                  </apex:commandButton>
                   <apex:commandButton value="Cancel" action="{!canceloffer}" reRender="offtbl" immediate="true"  rendered="{!w.selected}">
                         <apex:param assignTo="{!opget}" name="cancelid" value="{!w.index}"/>
                   </apex:commandButton>
                </apex:column>

            <br/><br/><br/>
            </apex:pageblocktable>
           <!--     <apex:pageBlock title="OFFERS">
            <apex:pageblocktable value="{!lstoffer}" var="o">
            <apex:column headerValue="Offer Name" value="{!o.Name}"/>
            <apex:column headerValue="Type" value="{!o.Offer_Type__c}"/>
            <apex:column headerValue="Term(Months)"/>
            <apex:column headerValue="Funded" value="{!o.Cash_Wanted__c}"/>
            <apex:column headerValue="Payback" />
            <apex:column headerValue="Rate" />
            <apex:column headerValue="HoldBack%" value="{!o.WH_Withhold__c }"/>
            <apex:column headerValue="Daily PB Amount" value="{!o.Reduced_UW_V_MC__c}"/>
            <apex:column headerValue="Monthly PB Amount" value="{!o.AVG_Monthly_VMC__c}"/>
            <apex:column headerValue="Deal Length(Days)" />
            <apex:column headerValue="Factor per Month"  />
            <apex:column headerValue="%of Gross" />

            <br/><br/><br/>
            </apex:pageblocktable>-->

            <!-- -------------Add button in Offer table------------------- -->
            <apex:pageBlockButtons location="bottom" >
                <apex:commandButton value="Add" action="{!addoffer}" immediate="true" />
            </apex:pageBlockButtons>
            <br/>
       </apex:pageBlock>     
        </td>
    </tr>
    </table>


  </apex:form>
</apex:page>
|improve this question
  • Do you see any errors in the browser console? – Ruslan Vekua Jul 31 '15 at 6:08
  • no... actually i have tried with alert but it is also not working... – Shantanu Mahajan Jul 31 '15 at 6:11
1

Use jQuery/JS selector by css classes instead of IDs since this line 

<apex:inputField value="{!objOpportunity .Amount_Requested__c}" id="box1"/>

generates something like this

<input type="text" value="..." id="jjjs_nnd_box1...." />

due to apex form so that's why your jQuery selectors don't work.

For example, for your elements you need to do something like this

BOX1:

<apex:inputField value="{!objOpportunity .Amount_Requested__c}" styleClass="box1"/>

BOX2:

 <apex:inputField value="{!objOpportunity.Amount_Requested__c}"  styleClass="box2"/>

Note, I used styleClass attibute instead of id also your JS should be looks like:

       $(function(){
          $("input.box1").keypress(function()
          {
        $("input.box2").val($(this).val());
          }    
       });

Hope this helps you.

|improve this answer
  • It is not working . I have a js code <script> function copy_data(val){ var a = document.getElementById(val.id).value alert("var"+a); document.getElementById("ptest").value=a } </script> And it is giving me error on web console"Uncaught TypeError: Cannot set property 'value' of null". – Shantanu Mahajan Jul 31 '15 at 6:56
  • What kind of JS code you are posting now? Is it related to your post? I suggested you to find an element by css classes instead of ids. We cannot write JS code for you. – Ruslan Vekua Jul 31 '15 at 7:15
  • Yes it is related to my post.. – Shantanu Mahajan Jul 31 '15 at 7:34
  • Ah. Better to ask for specifically what you want! Here's a link to the instructions on best practices on asking questions: salesforce.stackexchange.com/help/how-to-ask . I will amend my answer. – Ruslan Vekua Jul 31 '15 at 7:42
0

You also need to use noConflict to prevent the $ from clashing with internal Salesforce variables used on the page.

Try this:

var j$ = jQuery.noConflict();
j$(function(){
    j$("#box1").keypress(function(){
        j$("#box2").val($(this).val());
    } 
    ....etc
|improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.