Question

I made a form which I make calculation. If I make this PHP it’s not that hard. But I’m planning to make it Jquery or JavaScript so people whoever puts number into this it can calculate right away they don`t have to click any button. Is there anybody can help me with this ?

http://jsfiddle.net/gXYg5/

Answer 1

OK, I wrote this and you can see it in action here: http://jsfiddle.net/jfriend00/b9dUn/

Here’s what the code looks like. The code could have been a lot more compact, but since you don’t have meaningful field names, I used lots of intermediate local variables to make the code a lot more readable.

$("#calc").click(function() {
    var salesPrice = getNum("textfield");
    var tradeIn = getNum("textfield2");
    var subTotal1 = salesPrice - tradeIn;
    setNum("textfield3", subTotal1, "dollar");

    var docFee = getNum("textfield4");
    var subTotal2 = docFee + subTotal1;
    setNum("textfield5", subTotal2, "dollar");

    var salesTax = getNum("textfield6", "percent");
    var license = getNum("textfield7");
    var subTotal3 = (subTotal2 * (1 + salesTax)) + license;
    setNum("textfield8", subTotal3, "dollar");

    var cashDown = getNum("textfield9");
    var rebate = getNum("textfield10");
    var amountFinanced = subTotal3 - cashDown - rebate;
    setNum("textfield11", amountFinanced, "dollar");

    var interestRate = getNum("textfield12", "percent");
    var term = getNum("textfield13");

    var payment = (amountFinanced * interestRate) / (1 - Math.pow(1 + interestRate, -term));
    setNum("textfield14", payment, "dollar");

});

function addCommas(nStr)
{
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
}

function getNum(id, type) {
    try {
        var raw = document.getElementById(id).value;
        raw = raw.replace(/\$|\s|%|,/g, "");
        raw = Number(raw);
        if (isNaN(raw)) {
            raw = 0;
        }
        if (type === "percent") {
            raw = raw / 100;
        }
        return(raw);
    } catch(e) {
        return(0);
    }
}

function setNum(id, val, type) {
    if (type === "dollar") {
        val = val.toFixed(2);
        val = "$" + addCommas(val);
    } else if (type === "percent") {
        val = (val * 100).toFixed(2) + "%";
    }
    document.getElementById(id).value = val;
}

// fill in some default values for testing:
setNum("textfield", 20000, "dollar");  // sales price
setNum("textfield2", 5000, "dollar");  // tradein
setNum("textfield4", 12, "dollar");  // doc fee
setNum("textfield6", 0.075, "percent");  // sales tax
setNum("textfield7", 75, "dollar");  // license
setNum("textfield9", 20, "dollar");  // cash down
setNum("textfield10", 40, "dollar");  // rebate
setNum("textfield12", 0.035, "percent");  // interest rate
setNum("textfield13", 72);  // month term

The coding would be lot less errorprone if you gave the fields meaningful names like id="cashDown" instead of id="textfield9". I obtained the loan payment formula from here. You should verify that it seems correct to you. I made the calculated fields readonly so they cannot be manipulated by typing and I gave them a different color so you can more easily see them after hitting the calculate button.

I have not checked this in detail to make sure every part of the calculation is proper and all the input error handling is as desired. You should do that to your satisfaction. This should give you the general idea how to do this.