0

I've looked around on the web for an answer to my question. Found lots of scripts that I've copied and messed around with but can't get it working properly.

When I run it, my script below initially works but then displays 'NaN'.

I'm trying to create a simple order form that uses JavaScript to dynamically update and display the order total.

Each item for sale has an input (type=number) tag that contains the item's price in a 'data-price' attribute.

What I'm trying to do is grab the price out of the data-price attribute and use it in a JS script to display a total.

Users can enter a quantity into text field and the TOTAL text field should automatically update with correct 'running total'.

Would appreciate any advice as to where I'm going wrong. I've used JavaScript (as opposed to jQuery) because I'm more familiar with the syntax.

<script>

function calculateTotal(frm) {
var order_total = 0

for (var i=0; i < frm.elements.length; ++i) {

    form_field = frm.elements[i];

    item_price = form_field.dataset.pric);

    item_quantity = form_field.value;

        if (item_quantity >= 0) {
            order_total += item_quantity * item_price;
        }
}

frm.total.value = round_decimals(order_total, 2);
}

function round_decimals(original_number, decimals) {
var result1 = original_number * Math.pow(10, decimals);
var result2 = Math.round(result1);
var result3 = result2 / Math.pow(10, decimals);
return result3.toFixed(2);

}

</script>

</head>

<body>


<form id="order-form">

<table cellpadding="8" align="center">

<tr>
    <td align="left" width="150">Image</td>
    <td align="left">Description</td>
    <td align="left">Price</td>
    <td align="left">Quantity</td>
</tr>

<tr>
    <td align="left"><img src="http://placehold.it/150x200"></td>
    <td align="left">Poster</td>
    <td align="left">$24.00</td>
    <td align="left"><input type="number" data-price="24" min="0" max="50" step="1"   value="0" onChange="calculateTotal(this.form)"></td>
</tr>

<tr>
    <td align="left"><img src="http://placehold.it/150x200"></td>
    <td align="left"> T-shirt</td>
    <td align="left">$66.00</td>
    <td align="left"><input type="number" data-price="65" min="0" max="50" step="1" value="0" onChange="calculateTotal(this.form)"></td>
</tr>

<tr>
    <td align="left"><img src="http://placehold.it/150x200"></td>
    <td align="left"> Bag</td>
    <td align="left">$120.00</td>
    <td align="left"><input type="number" data-price="120" min="0" max="50" step="1" value="0" onChange="calculateTotal(this.form)"></td>
</tr>

<tr>
    <td></td>
    <td></td>
    <td>TOTAL:</td>
    <td align="right"><input type="text" name="total" size="6" onFocus="this.form.elements[0].focus()"></td>
</tr>

</table>

</form>

</div>
Improve this question

1 Answer 1

Reset to default
2

You have a typo in the sample code. 

item_price = form_field.dataset.pric);

should probably be

item_price = form_field.dataset.price;

Apart from that, NaN is caused by the fact that you're also taking into account the value of the 'total' field when you run the function calculateTotal(). But that field does not have a data-price attribute so you're multiplying undefined with a number, resulting in NaN.

You need to add an extra check if there is a 'data-price' attribute:

function calculateTotal(frm) {
    var order_total = 0;
    for (var i=0; i < frm.elements.length; ++i) {
        form_field = frm.elements[i];

        if(typeof(form_field.dataset.price) != 'undefined') {
            item_price = form_field.dataset.price;
            item_quantity = form_field.value;
            if (item_quantity >= 0) {
                order_total += item_quantity * item_price;
            }
        }
    }
    frm.total.value = round_decimals(order_total, 2);
}
Improve this answer
1
  • Thanks Mr.White. Typo wasn't in original code. I made it when typing out question (but point taken). Appreciate your explanation. I understand where I went wrong now.
    – Mekong
    Commented Aug 28, 2014 at 11:21

Not the answer you're looking for? Browse other questions tagged or ask your own question.