Jquery is not Working

Question

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>

no... actually i have tried with alert but it is also not working... — Shantanu Mahajan, Jul 31 '15 at 6:11

Ruslan Vekua · Accepted Answer · 2015-07-31 07:46:29Z

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.

edited Jul 31 '15 at 7:46

answered Jul 31 '15 at 6:24

Ruslan Vekua

8705 silver badges13 bronze badges

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

Add a comment |

Caspar Harmer · Accepted Answer · 2015-07-31 09:01:11Z

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

answered Jul 31 '15 at 9:01

Caspar Harmer

17.2k3 gold badges28 silver badges61 bronze badges

Add a comment |

Stack Exchange Network

current community

your communities

more stack exchange communities

Jquery is not Working

2 Answers 2

Your Answer

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

Hot Network Questions

Jquery is not Working

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

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

Related

Hot Network Questions