jQuery: Number not updating, changing to 0

Question

I am trying to calculate tax on items using jQuery. The CRM I use has something called tags that take the form of {tag_something} to dynamically read information onto the webpage. I want to update the price of a product using jQuery. (later to be implemented for state specific tax). The code I have is changing the original price, but instead of changing it to what it needs to be, it instead defaults to "0" on the page. Any ideas or suggestions would be greatly appreciated. The product I have set up for this is: http://www.bemidjisportsonline.com/accessories/backpacks/klim-nac-pak

<!-- taxable items -->
jQuery(document).ready(function() {
    initUpdateTax();
}   
);
function initUpdateTax() {
var taxable = '{tag_taxcode}';
var saleprice = '{tag_saleprice}';
if  (taxable == "Accessories"){
    $('#taxable').text(function(saleprice) {
        return Math.round(parseInt(saleprice + (saleprice * 0.06875));  
    });
}
}

Now it is not changing the number at all. I know it is targeting the right element. Not sure why the number isn't updating properly. — Phorden, Jul 08 '13 at 19:14

Sushanth -- · Answer 1 · 2013-07-08T19:30:54.313

Call the method again in the change event of the textbox..

$('.productTextInput').on('change', function() {
     initUpdateTax();
});

You seem to be calling the method only when the page loads for the first time. You need to call it again whenever the input box changes..

Better

jQuery(document).ready(function () {
    // Change event
    $('.productTextInput').on('change', initUpdateTax)
        .change(); // Trigger the change on DOM ready
});

function initUpdateTax() {
    var saleprice = '{tag_saleprice}';
    // Find the corresponding element wherein the 
    // total price has to be shown
    var $total = $(this).closest('li')
        .prevAll('.price').first().find('strong');

    $total.text(function (saleprice) {
        return Math.round(parseInt(saleprice + (saleprice * 0.06875)));
    });

}

juan.facorro · Answer 2 · 2013-07-08T19:50:46.257

Following the link you posted, the code that's being executed is:

function initUpdateTax() {
    var taxable = 'Accessories';
    var saleprice = '$95.99';
    if  (taxable == "Accessories"){
        $('#taxable').text(function(saleprice) {
            return Math.round(parseInt(saleprice + (saleprice * 0.06875));  
        });
    }
    else {
    }
}

The value for salesprice is not a valid number, so the multiplication saleprice * 0.06875 results in NaN. There's also a missing parentheses in the line with the return expression.

Additionally, the usage of parseInt and Math.round operations don't make much sense, since the return value from the first one is an integer which when rounded is itself. The application of tax on the value can be expressed in the following more succint (and IMHO clear) way saleprice * 1.06875.

This is a version of the function that does what you expect:

function initUpdateTax() {
    var taxable = '{tag_taxcode}';
    if  (taxable == "Accessories"){
       var saleprice = $('#taxable').text();
       var price = parseFloat(saleprice.replace('$', '')) * 1.06875;
       $('#taxable').text('$' + price.toFixed(2));
    }
    else {
    }
}

jQuery: Number not updating, changing to 0

2 Answers2