What's new
By:
Filters
ClioSport.net

Register a free account today to become a member!
Once signed in, you'll be able to participate on this site by adding your own topics and posts, as well as connect with other members through your own private inbox!

  • When you purchase through links on our site, we may earn an affiliate commission. Read more here.

JQuery driving me insane...



Chapster5

Chapster5

... I just dont get it im trying to make the Interest from a slider that shows in the HTML to a set value thats added onto the total money to be lent

Here the JQuery code I have

Code: 
// JavaScript Document


$(function() {
 
    $( "#amount_slider" ).slider({
        orientation: "horizontal",
        range: false,
        min: 1000,
        max: 300000,
        value: 100000,
        step: 1000,
        slide: function( event, ui ) {
                $( "#amount" ).text( ui.value );
        },
        stop: function( event, ui ) {
                calculateMorgage();
        }
    });
 
    $( "#amount" ).text($( "#amount_slider" ).slider( "value" ));
 
    $( "#interest_slider" ).slider({
        orientation: "horizontal",
        range: false,
        min: 6,
        max: 6,
        value: 6,
        step: 0.25,
        slide: function( event, ui ) {
                $( "#interest" ).text( ui.value );
        },
        stop: function( event, ui ) {
                calculateMorgage();
        }
    });
 
    $( "#interest" ).text($( "#interest_slider" ).slider( "value" ));
 
    $( "#time_slider" ).slider({
        orientation: "horizontal",
        range: false,
        min: 1,
        max: 30,
        value: 15,
        slide: function( event, ui ) {
                $( "#time" ).text( ui.value );
        },
        stop: function( event, ui ) {
                calculateMorgage();
        }
    });
 
    $( "#time" ).text($( "#time_slider" ).slider( "value" ));
 
    function calculateMorgage() {
 
        var amount   = $( "#amount_slider" ).slider( "value" );
				
		var interest = $( "#interest_slider" ).slider( "value" ) / 1200;
        
		var time     = $( "#time_slider" ).slider( "value" ) * 12;
 
        var rate     = amount * (interest * Math.pow(1+interest,time)) / (Math.pow(1+interest,time)-1);
 
        $( "#result" ).text(rate.toFixed(2));
    }
 
    calculateMorgage();
 
});

and the HTML side

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.20.custom.min.js"></script>
<script type="text/javascript" src="slider.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="jquery-ui-1.8.20.custom.css">
<style type="text/css">
#amount_slider, #interest_slider, #time_slider {
	width: 200px;
	margin-top: 20px;
	float: left;
}
#amount, #interest, #time, #result {
	margin-left: 20px;
	margin-top: 20px;
	float: left;
}
#result {
	font-weight: bold;
}
.message {
	float: left;
	margin-top: 20px;
	font-family:Arial;
	width: 100px;
}
.clear {
	clear: both;
}
.background-wrapper {
	border: #a6c9e2 solid 1px;
	width: 500px;
	text-align: center;
	margin: 0 auto;
}
</style>
</head>


<body>
<div class="background-wrapper">
  <div class="message">Amount</div>
  <div id="amount_slider"></div>
  <div id="amount"></div>
  <div class="clear"></div>
  <div class="message">Interest</div>
  <div id="interest_slider"></div>
  <div id="interest"></div>
  <div class="clear"></div>
  <div class="message">Time (years)</div>
  <div id="time_slider"></div>
  <div id="time"></div>
  <div class="clear"></div>
  <div class="message">Monthly payment</div>
  <div id="result"></div>
  <div class="clear"></div>
</div>
</body>
</html>


It displays like below... But I want the interest slider gone yet still effective to the sum but a set value like a percentage (APR which will be set later on)


example_load.png

I need the Interest to be a Variable with a set value (which will be a percentage) the percentage will come from the money and time slider values then get added to the total/result at the bottom of the form but I dont need it displayed on the form if that makes sense?

Cheers guys!

Nick
 
SharkyUK

SharkyUK

ClioSport Club Member
Right - this is what I did mate. Just a few edits to the code you posted really...

Firstly I edited the HTML to 'remove' the Interest Rate slider elements (I commented them out rather than deleted them). I also added a new ID style for #currentInterestRate. Something like this:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="./js/jquery-ui-1.8.20.custom.min.js"></script>
<script type="text/javascript" src="slider.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="./css/ui-lightness/jquery-ui-1.8.20.custom.css">
<style type="text/css">
#amount_slider, #interest_slider, #time_slider {
    width: 200px;
    margin-top: 20px;
    float: left;
}
#amount, #interest, #time, #result, #currentInterestRate {
    margin-left: 20px;
    margin-top: 20px;
    float: left;
}
#result {
    font-weight: bold;
}
.message {
    float: left;
    margin-top: 20px;
    font-family:Arial;
    width: 100px;
}
.clear {
    clear: both;
}
.background-wrapper {
    border: #a6c9e2 solid 1px;
    width: 500px;
    text-align: center;
    margin: 0 auto;
}
</style>
</head>




<body>
<div class="background-wrapper">
  <div class="message">Amount</div>
  <div id="amount_slider"></div>
  <div id="amount"></div>
  <div class="clear"></div>
    <!--
  <div class="message">Interest</div>
  <div id="interest_slider"></div>
  <div id="interest"></div>
    -->
  <div class="clear"></div>
  <div class="message">Time (years)</div>
  <div id="time_slider"></div>
  <div id="time"></div>
  <div class="clear"></div>
  <div class="message">Monthly payment</div>
  <div id="result"></div>
  <div class="clear"></div>


  <div class="message">Interest Rate</div>
    <div id="currentInterestRate"></div>
    <div class="clear"></div>
</div>
</body>
</html>

In the slider.js file I then removed (commented out) the code related to the Interest Rate slider components. I also added a variable that holds the desired interest rate, interestRate. I then substituted this new variable in place of the slider value in the function that calculated the mortgage. I also added a quick function to show the interest rate for development purposes. Something like this:

Code: 
// JavaScript Document




$(document).ready(function() {


        var interestRate = 6.0;
 
    $( "#amount_slider" ).slider({
        orientation: "horizontal",
        range: false,
        min: 1000,
        max: 300000,
        value: 100000,
        step: 1000,
        slide: function( event, ui ) {
                $( "#amount" ).text( ui.value );
        },
        stop: function( event, ui ) {
                calculateMorgage();
        }
    });
 
    $( "#amount" ).text($( "#amount_slider" ).slider( "value" ));
 
        /*
    $( "#interest_slider" ).slider({
        orientation: "horizontal",
        range: false,
        min: 6,
        max: 6,
        value: 6,
        step: 0.25,
        slide: function( event, ui ) {
                $( "#interest" ).text( ui.value );
        },
        stop: function( event, ui ) {
                calculateMorgage();
        }
    });
 
    $( "#interest" ).text($( "#interest_slider" ).slider( "value" ));
        */
        
    $( "#time_slider" ).slider({
        orientation: "horizontal",
        range: false,
        min: 1,
        max: 30,
        value: 15,
        slide: function( event, ui ) {
                $( "#time" ).text( ui.value );
        },
        stop: function( event, ui ) {
                calculateMorgage();
        }
    });
 
    $( "#time" ).text($( "#time_slider" ).slider( "value" ));
 
    function calculateMorgage() {
 
        var amount   = $( "#amount_slider" ).slider( "value" );
                
        //var interest = $( "#interest_slider" ).slider( "value" ) / 1200;
        var interest = interestRate / 1200;
        
        var time     = $( "#time_slider" ).slider( "value" ) * 12;
 
        var rate     = amount * (interest * Math.pow(1+interest,time)) / (Math.pow(1+interest,time)-1);
 
        $( "#result" ).text(rate.toFixed(2));
    }
 
    calculateMorgage();
 
        function updateInterestRate()
        {
            $("#currentInterestRate").html(interestRate);
            $("#currentInterestRate").append("% (can be hidden...)");
        }
        
        updateInterestRate();
});

Sorry it's a bit messed up layout wise but hopefully it makes sense.

Oh, I also changed the jQuery and used the $(document).ready(... selector. This way you are guaranteed the complete DOM has loaded before attempting to work on any of it's components! :D

I hope that makes sense. :D
 
SharkyUK

SharkyUK

ClioSport Club Member
Chapster5 said:
Your a star mate! How easy would it be to incorporate that into a form element that gets POST through a payment processor only need the total payable value really
Click to expand...
No problem, mate.

So... you would be looking to use the sliders, etc. to calculate the monthly repayment value and it's this monthly repayment value that you want to POST to the payment processor?
 
Chapster5

Chapster5

Correct my friend

Basically the site will work exactly like wonga a friend of mine owns a wonga type company and has asked to make him a site so I agreed thinking the challenge wouldn't be so hard boy was I wrong.

I will use a payment processor called Skrill which has a very extensive range of API functions which will be handy for this site
 
SharkyUK

SharkyUK

ClioSport Club Member
Chapster5 said:
Correct my friend

Basically the site will work exactly like wonga a friend of mine owns a wonga type company and has asked to make him a site so I agreed thinking the challenge wouldn't be so hard boy was I wrong.

I will use a payment processor called Skrill which has a very extensive range of API functions which will be handy for this site
Click to expand...

Sadly I don't have any experience with Skrill but it's easy enough to POST the monthly repayment value to some script on the server.

A quick and easy way to get something like this up and running would be to add a simple form to the bottom of your HTML page. This will contain a hidden field (which takes the value of the monthly repayment value - hence is updated everytime the mortgage calculation function is called) and a 'submit' button. When the submit button is clicked, the value of the hidden field is 'POST'ed to some designated server-side script. Have you done much with form processing?
 
SharkyUK

SharkyUK

ClioSport Club Member
The example (linked below) now posts the monthly repayment value to a server-side script (the data you post and where you post it will depend on how your payment processor works). This example simply posts the value and the server-side script reads it and echoes is back to the client.

http://fullyfuelled.com/tmp01/

p.s. This demo will be disappearing after a day or two...
 
Chapster5

Chapster5

That's awesome mate! I went to sleep last night hence the late reply but I will look at the code today in work

Just thinking I need to send the amount wanting to be borrowed the amount of time (which will be changed to days) and the amount with interest.

Now the way I think it's going to work is the amounts mentioned above will be a hidden form value that is called product description on Skrill (don't worry I'll deal with all that) and there is basically a small deposit of £10 which actually gets put through the payment processor which my friend will refund back once approved.

You've done a great job I must say :)
 
C

Chip-mk1

  182/RS2/ Turbo/Mk1
By the way, for it to be legal I believe you have to include 2 interest rate values, and one of them must be a respresentative APR.
The APR isnt just the interest rate, it includes the fees as well, both any initial fee, and also any fee at the time of the loan being paid back.

There isnt a trivial function for calculating this, it has to be an interative procedure that homes in on the value. Although you will of course find "rate" functions already written for you if you look about so im not saying you'll have to write one from scratch.
 
Chapster5

Chapster5

Chip-mk1 said:
By the way, for it to be legal I believe you have to include 2 interest rate values, and one of them must be a respresentative APR.
The APR isnt just the interest rate, it includes the fees as well, both any initial fee, and also any fee at the time of the loan being paid back.

There isnt a trivial function for calculating this, it has to be an interative procedure that homes in on the value. Although you will of course find "rate" functions already written for you if you look about so im not saying you'll have to write one from scratch.
Click to expand...

Cheers mate

I'm not quite sure what all that means :eek: I never did understand APR and all that I am waiting for my friend to pass onto me the formula in which it's all being calculated and see where to go from there
 
C

Chip-mk1

  182/RS2/ Turbo/Mk1
Im no good at jquery so not really the one to advise on that specifically, but im sure a google search will find a jquery api function you can use.

Basically though to calculate APR what any process needs to do is:
1) make a guess at what the APR might be as a start point
2) calculate interest at that rate and see how it compares
3) adjust guess up or down depending on how much its out by
4) goto 2

It sounds daft, but there isnt just a straight formula that can work APR out in a simple equation.


And like I said, you need to look into the law of what constitutes a legal finance example, I believe that currently you just have to show 2 interest rates, with one being representative APR, and the other being something like flat rate.
It used to be the case that APR had to be 1.4 times the size of anything else on the page, but that one is now gone, Im not a lawyer though and my clients had people who were so they fed that sort of info into the project at the time.
 
Chapster5

Chapster5

Thanks for the info Chip,

So what's a representative APR compared to a flat rate? I tell you what we can discuss it through the PM's :) Keep this thread a little cleaner. If you can both help me with this beer tokens both coming your ways!
 
C

Chip-mk1

  182/RS2/ Turbo/Mk1
If you look in the example of the calculator I sent you that I wrote for a car manufacturer, you can see the flat rate and APR in there.

Basically though the flat rate is an amount added on per year (or month or whatever) and the APR is how much this would equate to a rate of per year including fees etc.

So for example if you borrow 100 quid, with a flat interest rate of 0%, and a fee of 10 quid, that is NOT 10% APR, in fact if it was a very short term loan it could run into many 100s of percent APR
 
Chapster5

Chapster5

I think I'm understanding it better :) :approve: I shall get my google on this afternoon and research more into it... Saying that the Accountant at work would be able to help! Of course didn't think about that! :eek:
 
SharkyUK

SharkyUK

ClioSport Club Member
Excellent points raised by Chip. As I don't / haven't worked in the financial domain I'm not sure what the regulations are but there will definitely be 'things' that you absolutely must adhere to. It can potentially save a lot of headaches and re-working later on!

Chip-mk1 said:
PS

Fair play Sharky, you're clearly pretty good at what you do :)
Click to expand...
Thanks fella. There are times when it helps to be an older, er, "more mature" member! I have to admit that jQuery and web development isn't my main area but I do have slightly more than a passing interest in it.
 
Chapster5

Chapster5

Sharky am I ok to PM you with a query about what I would like to do with a page and you could possibly inform me of how to go about it?

Beer money involved for you :)

Spoke with my friend he has a few lawyers on the case reviewing it all and making sure it will all be passed off and providing all the info we need a long the way :)

Cheers guys :D
 
SharkyUK

SharkyUK

ClioSport Club Member
Chapster5 said:
Sharky am I ok to PM you with a query about what I would like to do with a page and you could possibly inform me of how to go about it?

Beer money involved for you :)

Spoke with my friend he has a few lawyers on the case reviewing it all and making sure it will all be passed off and providing all the info we need a long the way :)

Cheers guys :D
Click to expand...
Yeah, PM away mate.
 
You must log in or register to reply here.

Similar threads

Andy_con
Java Script Help
2
Replies
46
Views
1K
Andy_con
Andy_con
N
Css Problemo
Replies
37
Views
977
Daz
Daz
bigmaddaz
Another CSS Question
Replies
11
Views
749
donofkarma
donofkarma


Top