I have two sliders one for amount and one for days. I want to calculate on change an interest rate,
How do I do this .
Can any one help.
Tks
Here is your approach:
window.dhx_globalImgPath = "../dhtmlxSlider/codebase/imgs/";
dhtmlx.skin="dhx_skyblue";
slider1 = new dhtmlxSlider("div1", {
min: 1,
max: 10,
step: 1,
size: 350,
value: 0,
vertical: false
});
slider1.attachEvent("onSlideEnd", doOnChange);
slider1.init();
slider2 = new dhtmlxSlider("div2", {
min: 1,
max: 10,
step: 1,
size: 350,
value: 0,
vertical: false
});
slider2.attachEvent("onSlideEnd", doOnChange);
slider2.init();
function doOnChange(){
v1 = slider1.getValue();
v2 = slider2.getValue();
document.getElementById("inp").value = v1 + v2
}
Hi Darya,
Thank you for trying to help, but I still cant get it to work. have tried over and over.
So I thought if I give you the code that I have and that is working you might be able to help.
Basically I want the two sliders below to calculate a interset and fee (fee 5.50 and interest 340%) add this to amount and also give a total.
a Due date would also be nice to display.
All this has to change as one moves the slider.
Then on top of all this, I would like to insert the value in the hidden form fields as shown below. (this I also dont know how to do)
Sorry for my ignorance but I am learning.
Thank you in advance.
John
<div id="slider"></div>
Amount required = £ 0Loan period = 0 daysInterest & fees = £ 0Total to repay = £ 0 |
font-weight: bold; |
Try the next:
[code]
Tristan's DHTMLX Slider Practice<div id="slider_1"></div> <br/>
<div id="slider_2"></div>
<script>
var slider1 = new dhtmlxSlider("slider_1", {
size:500,
skin: "ball",
vertical:false,
step:1,
min:1,
max:500,
value:0
});
slider1.init();
var slider2 = new dhtmlxSlider("slider_2", {
size:500,
skin: "ball",
vertical:false,
step:1,
min:1,
max:31,
value:0
});
slider1.attachEvent("onSlideEnd", handler);
slider2.attachEvent("onSlideEnd", handler);
slider2.init();
function handler() {
pos1 = slider1.getValue();
pos2 = slider2.getValue();
document.getElementById("a2").innerHTML = "<h5>Loan period = " + pos2 + " days</h5>";
document.getElementById("a1").innerHTML = '<h5>Amount required = £ ' + pos1 + '</h5>' ;
}
</script>
<table width="90%" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="50%" valign="left">
<div align="left" id="a1"><h5>Amount required = £ 0</h5></div>
<div align="left" id="a2"><h5>Loan period = 0 days</h5></div>
<div align="left" id="inp"><h5>Interest & fees = £ 0 </h5></div>
<div align="left" id="totalinp"><h5>Total to repay = £ 0 </h5></div>
</td>
<td width="50%" valign="left" valig="middle">
<form action="#" method="post" name="formFinish" id="formFinish">
<input type="hidden" name="amount" id="amount" value="" />
<input type="hidden" name="period" id="period" value="" />
<input type="hidden" name="interest" id="interest" value="" />
<input type="hidden" name="total" id="total" value="" />
<input type="submit" id="submit" name="submit" value="Submit Now" style="background-color: #9d071a; color: #ffffff; font-size: 28px;
font-weight: bold;
font-family: Times New Roman, Times, serif; border : 1px solid #000;" />
Hi Darya,
Thank you. Was not exactly what I wanted but it gave me the correct foundation and I could
see where I went wrong. Herewith the complete code giving due date , interest rate and Total to repay also link to input on a form.
<div id="slider_2"></div>
<input type="hidden" name="period" id="input2" value="input2" />
<script>
var slider1 = new dhtmlxSlider("slider_1", {
size:500,
skin: "ball",
vertical:false,
step:1,
min:1,
max:500,
value:0
});
slider1.linkTo('input1');
slider1.init();
var slider2 = new dhtmlxSlider("slider_2", {
size:500,
skin: "ball",
vertical:false,
step:1,
min:1,
max:30,
value:0
});
slider1.attachEvent("onChange", handler);
slider2.attachEvent("onChange", handler);
slider2.linkTo('input2');
slider2.init();
function handler() {
var pos1 = slider1.getValue();
var pos2 = slider2.getValue();
var days = pos2 ;
var amount = pos1 ;
var percent = .83333333;
var interest = Math.round((days * amount * percent)/100);
var total = parseInt(amount, 10) + parseInt(interest, 10);
var days = pos2 ;
var mths = new Array('Jan', 'Feb', 'Mar',
'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep',
'Oct', 'Nov', 'Dec');
var d = new Date();
d.setHours(d.getHours() + (24 * days));
var currD = d.getDate();
var currM = d.getMonth();
var currY = d.getFullYear();
var repaydate = mths[currM] + ' ' + currD + ', ' + currY;
document.getElementById("a1").innerHTML = '<h5>Amount required = £ ' + pos1 + '</h5>' ;
document.getElementById("a2").innerHTML = "<h5>Loan period = " + pos2 + " days</h5>";
document.getElementById("rep").innerHTML = '<h5>Repayment Date = ' + repaydate + '</h5>' ;
document.getElementById("int").innerHTML = '<h5>Interest & fees = £ ' + interest + '</h5>' ;
document.getElementById("tot").innerHTML = '<h5>Total to repay = £ ' + total + '</h5>' ;
}
</script>
<table width="90%" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="50%" valign="left">
Amount required = £ 0
Loan period = 0 days
Repayment Date = 0
Interest & fees = £ 0
Total to repay = £ 0
Have you solve the issue?