在Javascript中计算订单总和与价格变化值

I am trying to use Javascript to calculate sum of order in one big form. Each product has its own price, however, there are more prices tied with some products. Each product has it's own price, but if a customer orders bigger quantity of this product, the price will drop to a value that is specified in a database table.

To simplify, the shopping form for one item looks something like this.

<input name="id" value="'.$id.'" type="hidden">
<input name="price_'.$id.'" value="'.$price.'" type="hidden">
<input name="quantity_'.$id.'" type="text" onchange="calculateTotal()">

I have a table with the discounts: itemId, minimumQuantity, priceAfterDiscount. There can be more than one discounts connected with one item. The MySQL query works with LEFT JOIN of Items and Discounts tables.

calculateTotal() calculates the total of order after every input change.

What I would like to do, is to check if the quantity of certain product is greater than the value needed for the discounts and if so, I would like to change the value of the input with price from item's regular price to the discounted one. Then, calculateTotal() will use that price and update the total.

To do so, I think I can do something like adding more hidden inputs with values of all discounts. The function would check if there is a discount linked to every item and if so, it will check if the quantity is greater than requiredQuantity and if this condition is met, it will update the value of price hidden input. Please keep in mind that there can be multiple discounts connected to one item - the function should find the lowest price that meets requiredQuantity.

I am trying to do this - create the hidden inputs and somehow parse them in javascript, but I am just not able to figure this out. I tried my best to explain the problem, however, if my explanation is not sufficient, I will try to answer your questions regarding my issue.

I hope you are able and willing to help me. Thanks for help in advance.

Perhaps something like this example.

CSS

.itemLabel, .currentPrice, .subTotal {
    display: inline-block;
    width: 40px;
}
#myTotal {
    border:2px solid red;
}

HTML

<fieldset id="myInputs"></fieldset>
<div id="myTotal"></div>

Javascript

var myInputs = document.getElementById('myInputs'),
    myTotal = document.getElementById('myTotal'),
    order = {
        total: 0
    },
    items = {
        foo: {
            1: 0.5,
            100: 0.25
        },
        bar: {
            1: 1,
            100: 0.5
        }
    },
    totalNode;

function calculateTotal() {
    var newTotalNode;

    Object.keys(order).filter(function (key) {
        return key !== 'total';
    }).reduce(function (acc, key) {
        order.total = acc + order[key].subTotal;

        return order.total;
    }, 0);

    newTotalNode = document.createTextNode(order.total.toFixed(2));
    if (totalNode) {
        myTotal.replaceChild(newTotalNode, totalNode);
        totalNode = newTotalNode;
    } else {
        totalNode = myTotal.appendChild(newTotalNode);
    }

    console.log(JSON.stringify(order));
}

calculateTotal();
Object.keys(items).forEach(function (key) {
    var div = document.createElement('div'),
        label = document.createElement('label'),
        price = document.createElement('span'),
        input = document.createElement('input'),
        subtotal = document.createElement('span'),
        priceNode,
        subTotalNode;

    order[key] = {
        quantity: 0,
        subTotal: 0,
        price: items[key]['1']
    };

    priceNode = document.createTextNode(order[key].price.toFixed(2));
    subTotalNode = document.createTextNode(order[key].subTotal.toFixed(2));
    label.className = 'itemLabel';
    label.setAttribute("for", key);
    label.appendChild(document.createTextNode(key));

    price.className = 'currentPrice';
    price.id = key + 'CurrentPrice';
    price.appendChild(priceNode);

    input.id = key;
    input.name = 'myFormGroup';
    input.type = 'text';
    input.addEventListener('change', (function (key, order, priceNode, subTotalNode) {
        return function () {
            var value = +(this.value),
                newPriceNode,
                newSubTotalNode;

            Object.keys(items[key]).sort(function (a, b) {
                return b - a;
            }).some(function (quantity) {
                if (value >= quantity) {
                    order.price = items[key][quantity];
                    newPriceNode = document.createTextNode(order.price.toFixed(2));
                    priceNode.parentNode.replaceChild(newPriceNode, priceNode);
                    priceNode = newPriceNode;

                    return true;
                }

                return false;
            });

            order.subTotal = order.price * value;
            newSubTotalNode = document.createTextNode(order.subTotal.toFixed(2));
            subTotalNode.parentNode.replaceChild(newSubTotalNode, subTotalNode);
            subTotalNode = newSubTotalNode;
            calculateTotal();
        };
    }(key, order[key], priceNode, subTotalNode)), false);

    subtotal.className = 'subTotal';
    subtotal.id = key + 'SubTotal';
    subtotal.appendChild(subTotalNode);

    div.appendChild(label);
    div.appendChild(price);
    div.appendChild(input);
    div.appendChild(subtotal);
    myInputs.appendChild(div);
});

On jsFiddle