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}">
<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>