jQuery - loan calculator with slider

0 votes
1,087 views
added Mar 13, 2019 in jQuery by LC Marshal Captain (25,790 points)
jQuery(document).ready(function( $ ) {
//BUY JS
$( "#buy_property-price" ).slider({
    orientation: "horizontal",
    range: "min",
    min: 200000,
    max: 5000000,
    value: 200000,
    slide: function( event, ui ) {
        // $( "#buy_prop-price" ).val( "RM " + ui.value );
        $( "#buy_prop-price" ).val( accounting.formatNumber(ui.value, 0) );
        var propPrice = accounting.unformat($('#buy_prop-price').val());
        var hvaRate = $('#buy_hva-rate').val();
        $("#calculate-buy").attr("href", "calculator?price="+propPrice+"&rate="+hvaRate);
        $("#buy_prop-price").tooltip('hide');
    }
});

$( "#buy_apprreciation-rate" ).slider({
    orientation: "horizontal",
    range: "min",
    min: -10,
    max: 10,
    value: 0,
    slide: function( event, ui ) {
        // $( "#buy_hva-rate" ).val( ui.value + "%");
        $( "#buy_hva-rate" ).val( ui.value );
        var propPrice = accounting.unformat($('#buy_prop-price').val());
        var hvaRate = $('#buy_hva-rate').val();
        $("#calculate-buy").attr("href", "calculator?price="+propPrice+"&rate="+hvaRate);
        $("#buy_hva-rate").tooltip('hide');
    }
});

$( "#buy_prop-price" ).on( "change", function() {
    $(this).tooltip({
        trigger : 'manual',
        title: "Enter a valid number between 200000 to 5000000"
    });
    field_value = parseInt(accounting.unformat(this.value));
    if(field_value >=200000 && field_value<=5000000){
    $( "#buy_property-price" ).slider( "value", field_value );
    var propPrice = field_value;
    var hvaRate = $('#buy_hva-rate').val();
    $("#calculate-buy").attr("href", "calculator?price="+propPrice+"&rate="+hvaRate);
        $(this).tooltip('hide');
    }else{
        $(this).tooltip('show');
    }
});

$( "#buy_hva-rate" ).on( "change", function() {
        $(this).tooltip({
			trigger : 'manual',
			title: "Enter a valid number between -10 to +10"
		});
    if(this.value <=10 && this.value>=-10){
        $( "#buy_apprreciation-rate" ).slider( "value", this.value );
        var propPrice = accounting.unformat($('#buy_prop-price').val());
        var hvaRate = $('#buy_hva-rate').val();
        $("#calculate-buy").attr("href", "calculator?price="+propPrice+"&rate="+hvaRate);
        $(this).tooltip('hide');
    }else{
        $(this).tooltip('show');
    }
});
// FUND JS
$( "#fund_property-price" ).slider({
    orientation: "horizontal",
    range: "min",
    min: 200000,
    max: 5000000,
    value: 200000,
    slide: function( event, ui ) {
        $("#fund_prop-price").val( accounting.formatNumber(ui.value, 0) );
        var price = accounting.unformat($('#fund_prop-price').val());
        var rate = $('#fund_annual-growth').val();
        var invest = accounting.unformat($('#fund_investment-amt').val());
        $("#calculate-fund").attr("href", "calculator?act=fund&price="+price+"&rate="+rate+"&invest="+invest);
        $("#fund_prop-price").tooltip('hide');
    }
});

$( "#fund_investment-ammount" ).slider({
    orientation: "horizontal",
    range: "min",
    min: 1000,
    max: 1000000,
    value: 200000,
    slide: function( event, ui ) {
        $( "#fund_investment-amt" ).val( accounting.formatNumber(ui.value, 0) );
        var price = accounting.unformat($('#fund_prop-price').val());
        var rate = $('#fund_annual-growth').val();
        var invest = accounting.unformat($('#fund_investment-amt').val());
        $("#calculate-fund").attr("href", "calculator?act=fund&price="+price+"&rate="+rate+"&invest="+invest);
        $("#fund_investment-amt").tooltip('hide');
    }
});

$( "#fund_annual-growth-rate" ).slider({
    orientation: "horizontal",
    range: "min",
    min: -10,
    max: 10,
    value: 0,
    slide: function( event, ui ) {
        $( "#fund_annual-growth" ).val( ui.value );
        var price = accounting.unformat($('#fund_prop-price').val());
        var rate = $('#fund_annual-growth').val();
        var invest = accounting.unformat($('#fund_investment-amt').val());
        $("#calculate-fund").attr("href", "calculator?act=fund&price="+price+"&rate="+rate+"&invest="+invest);
        $("#fund_annual-growth").tooltip('hide');
    }
});

$( "#fund_prop-price" ).on( "change", function() {
    $(this).tooltip({
        trigger : 'manual',
        title: "Enter a valid number between 200000 to 5000000"
    });
    field_value = parseInt(accounting.unformat(this.value));
    if(field_value >=200000 && field_value<=5000000){
        $( "#fund_property-price" ).slider( "value", field_value );
        var price = field_value;
        var rate = $('#fund_annual-growth').val();
        var invest = accounting.unformat($('#fund_investment-amt').val());
        $("#calculate-fund").attr("href", "calculator?act=fund&price="+price+"&rate="+rate+"&invest="+invest);
        $(this).tooltip('hide');
    }else{
        $(this).tooltip('show');
    }
});

$( "#fund_investment-amt" ).on( "change", function() {
    $(this).tooltip({
			trigger : 'manual',
			title: "Enter a valid number between 1000 to 1000000"
		});
    field_value = parseInt(accounting.unformat(this.value));
    if(field_value >=1000 && field_value<=1000000){
        $( "#fund_investment-ammount" ).slider( "value", field_value );
        var price = accounting.unformat($('#fund_prop-price').val());
        var rate = $('#fund_annual-growth').val();
        var invest = field_value;
        $("#calculate-fund").attr("href", "calculator?act=fund&price="+price+"&rate="+rate+"&invest="+invest);
        $(this).tooltip('hide');
    }else{
        $(this).tooltip('show');
    }
});

$( "#fund_annual-growth" ).on( "change", function() {
    $(this).tooltip({
			trigger : 'manual',
			title: "Enter a valid number between -10 to 10"
		});
    if(this.value <=10 && this.value>=-10){
        $( "#fund_annual-growth-rate" ).slider( "value", this.value );
        var price = accounting.unformat($('#fund_prop-price').val());
        var rate = $('#fund_annual-growth').val();
        var invest = accounting.unformat($('#fund_investment-amt').val());
        $("#calculate-fund").attr("href", "calculator?act=fund&price="+price+"&rate="+rate+"&invest="+invest);
        $(this).tooltip('hide');
    }else{
        $(this).tooltip('show');
    }
});

$("#buy_property-price").slider( "value", 200000 );
$("#buy_apprreciation-rate").slider( "value", 5 );

$("#fund_property-price").slider( "value", 200000 );
$("#fund_investment-ammount").slider( "value", 200000 );
$("#fund_annual-growth-rate").slider( "value", 5 );

});

 

lazacode.org - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.
...