Forums

vhinmanansala

Hi to all my fellow css-trickers, my client asked me to create a loan slider for his client's website. The formula to calculate the interest rate is so complicated to understand so he told me to give fixed interest rates for each month and loan cost.

Below is my jquery code to make this work and so far I've managed to make this loan slider work for 12 and 24 months duration.


$(document).ready(function() {  
          var loan_cost = $('#slider-1').val();
          $( "#slider-1" ).bind( "change", function(event, ui) { 
            loan_cost = $(this).slider().val();
            //12 months duration
            if($('#12-month').is(':checked') && (loan_cost==5000)) {
              $('#monthly-payment').val("438.36");
            }else if($('#12-month').is(':checked') && (loan_cost==10000)) {
              $('#monthly-payment').val("872.46");
            }else if($('#12-month').is(':checked') && (loan_cost==15000)) {
              $('#monthly-payment').val("1'308.69");
            }else if($('#12-month').is(':checked') && (loan_cost==20000)) {
              $('#monthly-payment').val("1'308.69");
            }else if($('#12-month').is(':checked') && (loan_cost==25000)) {
              $('#monthly-payment').val("1'744.9");
            }
            
            //24 months duration
            if($('#24-month').is(':checked') && (loan_cost==5000)) {
              $('#monthly-payment').val("229.52");
            }else if($('#24-month').is(':checked') && (loan_cost==10000)) {
              $('#monthly-payment').val("454.81");
            }else if($('#24-month').is(':checked') && (loan_cost==15000)) {
              $('#monthly-payment').val("682.22");
            }else if($('#24-month').is(':checked') && (loan_cost==20000)) {
              $('#monthly-payment').val("909.63");
            }else if($('#24-month').is(':checked') && (loan_cost==25000)) {
              $('#monthly-payment').val("1'137.04");
            }
            
          });
         });

Obviously, my jquery code would contain more lines of code if i'll include the last 3 durations left. I plan to use an array here to store the values of the loan costs for each duration but i don't know where to start as I don't usually use array. Or does using an array here adviceable? Thanks.

Also, here is the link for the project im developing. This is just a prototype so you can clearly visualize what im trying to say.

http://vhinmanansala.com/wordpress/

and here is the data needed for the loan slider http://content.screencast.com/users/vhinmanansala/folders/Default/media/19ecd282-f3f7-41e8-89ee-6976492db3a3/screenshot.jpg

the values for 12 months to 60 months are the equivalent monthly payment of the loan cost

nikuls

I didn't have time to test it, but does this make sense? I've cut down the amount of 'if's and put the data into arrays. You could simplify things down even more though.

  $(document).ready(function() {  
        var loan_cost = $('#slider-1').val();
        $( "#slider-1" ).bind( "change", function(event, ui) { 
          loan_cost = $(this).slider().val();

          //12 months duration
          var payments12month = new Array({
            '5000': '438.36',
            '10000': '872.46',
            '15000': '1,308.69',
            '20000': '1,308.69',
            '25000': '1744.9'
          });

          //24 months duration
          var payments24month = new Array({
            '5000': '229.52',
            '10000': '454.81',
            '15000': '682.22',
            '20000': '909.63',
            '25000': '1137.04'
          });

          var monthlyPoyment = null;

          if($('#12-month').is(':checked')){
            monthlyPayment = payments12month[loan_cost];
          }
          if($('#24-month').is(':checked')){
            monthlyPayment = payments24month[loan_cost];
          }

          $('#monthly-payment').val(monthlyPayment);

        });
       });

Then you can just keep adding arrays for extra repayment plans (36 month etc).

vhinmanansala

Hi nikuls, thanks for your effort in helping me. the problem with the code above is that when i try to increase the loan cost, the monthly payment don't appear as it don't get the index of the 12 and 24 month duration. So i made a few tweaks with the code you gave me and here is my code

$(document).ready(function() { 
          var loan_cost = $('#slider-1').val();
          var index = null;
          var loan_cost_arr = ["5000", "10000", "15000", "20000", "25000"];
          var months12 = ["438.36", "872.46", "1'308.69", "1'744.9", "2'181.15"];
          var months24 = ["229.52", "454.81", "682.22", "909.63", "1'137.04"];
          var months36 = ["160.11", "315.94", "473.9", "631.87", "789.84"];
          var months48 = ["125.56", "246.75", "370.12", "493.5", "616.87"];
          var months60 = ["104.95", "205.44", "308.16", "410.87", "513.59"];
          
          $( "#slider-1" ).bind( "change", function(event, ui) { 
            loan_cost = $(this).slider().val();
            index = jQuery.inArray(loan_cost, loan_cost_arr);
            
            if ($('#12-month').is(':checked')){
              $('#monthly-payment').val(months12[index]);
            }else if ($('#24-month').is(':checked')){
              $('#monthly-payment').val(months24[index]);
            }else if ($('#36-month').is(':checked')){
              $('#monthly-payment').val(months36[index]);
            }else if ($('#48-month').is(':checked')){
              $('#monthly-payment').val(months48[index]);
            }else if ($('#60-month').is(':checked')){
              $('#monthly-payment').val(months60[index]);
            }
          });
         });

Thanks for this great help, really appreciate it :) God Bless

treehouse : what would you like to learn today?

Forums

[help]is there any way to make this jquery code shorter and efficient