multiplying values

Question

Im using the following method to add up text boxes. I have tried changing multiple things and cant seem to multiply two text box values! essential I want 2 text box that values are multiplied and displayed in a third text box. I want this value to be fluid aka change when the number changes! I was using this code because i may be multiplying more then one thing but if this is too much of a hassle i will live with just multiplying two at a time

The code im using to add is

 <!--adding script #-->    
 <script>

$(document).ready(function(){
    calculateSum();

    //iterate through each textboxes and add keyup
    //handler to trigger sum event

    $(".txt").each(function() {

        $(this).keyup(function(){
            calculateSum();
        });
    });

});

function calculateSum() {

    var sum = 0;


    $("#sum").val(sum.toFixed(2));
    //iterate through each textboxes and add the values
    $(".txt").each(function() {


        //add only if the value is number
        if(!isNaN(this.value) && this.value.length!=0) {

            sum += parseFloat(this.value);
        }

    });
    //.toFixed() method will roundoff the final sum to 2 decimal places
    $("#sum").html(sum.toFixed(2));

      var total = document.getElementById("subtotal").value == "";
     var total = document.getElementById("subtotal").value = sum;
             }
    <!--END adding script #-->   

I tried setting the last line to

      var times1 = document.getElementById(subtotal);
      var times2 = document.getElementById(tax);
  var equal = times1.value * times2.value;

and then changing var total1 = document.getElementById("total1").value = sum9; to var total1 = document.getElementById("total1").value = equal;

The text boxes id are subtotal and tax the box im trying to update is total1.

Thanks alot!

Answer 1

I found your question very confusing, but I think what you're trying to say is you want to add up all the .txt fields to get a sub-total, then multiply that sub-total by a tax rate to get a total. If so, then you already know the sub-total is a valid number due to the way you calculate it, so then:

var tax = +$("#tax").val(),          // get tax and convert to a number
    total = tax ? sum * tax : sum;   // if tax is a non-zero number multiply
                                     // otherwise just take the sum as is       

If your tax field is not an input then use .text() instead of .val().

Your existing code is rather more complicated than it needs to be. You can do this:

$(document).ready(function(){
    calculateSum();
    // you don't need an .each() loop, you can bind a keyup handler
    // to all elements in the jQuery object in one step, and you don't
    // need the anonymous function since it does nothing but call calculateSum:
    $(".txt").keyup(calculateSum);
});

function calculateSum() {
    var sum = 0,
        val;

    //iterate through each textboxes and add the values
    $(".txt").each(function() {
        // you don't need to test for NaN: just attempt to convert this.value
        // to a number with the unary plus operator and if the result is not
        // a number the expression val = +this.value will be falsy
        if(val = +this.value)
            sum += val;
    });

    $("#sum").html(sum.toFixed(2));

    var tax = +$("#tax").val();
    $("#total1").html((tax ? sum * tax : sum).toFixed(2));
}

For some reason the unary plus operator used throughout my answer is not widely known, but I prefer it to parseFloat().

Answer 2

On every keyup, instead of getting all values and adding them explicitly, it is better to deduct the previous value of the corresponding input and add the current updated value to sum..

Also, if subtotal is correctly calculated, then the multipication operation what ever you have done should work correctly..

Please find the following jsfiddle where the sum is calculated as explained above along with multiplying the tax..

http://jsfiddle.net/tgvrs_santhosh/77uxK/1/

Let me know if you still face the issue..

Answer 3

Instead of this

if(!isNaN(this.value) && this.value.length!=0) {

I think a regular expression may work better because you are using string values

if (/^([-]?((\d+)|(\d+\.\d+)|(\.\d+)))$/.test(this.value)) {

I haven't tested this regex, but you should be able to find a good regex to test for valid numbers if this one doesn't work for some reason. Also I noticed you have a == after that getElementById.

I'm not totally certain it matters, but you can do sum += (this.value * 1) instead of parseFloat.

update

Try this var equal = ($("#subtotal").val() * 1) * ($("#tax").val() * 1);