Question

I’ve created a simple shopping cart total calculator with JS (super simple order form) but I can’t get the JS code to work in a live browser however it works in my editor (Coda 2). the code is:

function CalcTotal()
{

var quantity = eval(document.bookorderform.bookqty.value);
if (quantity == undefined) {quantity = 0}
var orderTotal = eval(quantity * 14.99) + (3.99);
document.bookorderform.total.value=orderTotal;

}

the test live environment is at:
http://leapingbutterfly.org/bookorder.php

*I do not have the styling or the php code in there finished yet, however this should not be interfering with the js code.

I’ve double and tripple checked to make sure the code is the same as the one in my dev environment, also my form variables math their respective js variables. Only thing I can think of is if I’m not calling the document correctly, but i’ve called docs like this before with no problem. any help is greatly appreciated!

Answer 1

Your input element has an invalid attribute:

<td>$<input form="bookorderform" type="text" name="total" id="total" size="5" /></td>

If you remove form="bookorderform", it should work fine.

Also, you shouldn’t be using eval in your code like this. Just use parseInt:

function CalcTotal() {
    var quantity = parseInt(document.bookorderform.bookqty.value, 10);

    if (isNaN(quantity)) {
        quantity = 0;
    }

    var orderTotal = quantity * 14.99 + 3.99;
    document.bookorderform.total.value = orderTotal.toFixed(2);
}