javascript - 複数の商品に書かれた数量に応じた合計金額

Question

こんにちは、私はショッピング カート システムを作成していますが、ユーザーがドロップ ダウンから価格を選択し、数量を入力すると、合計インスタントが更新され、他の数量も同じように更新されます。アイテム。構造のjsフィドルを作成しました。単純なjavascriptを介してこれを達成するのを手伝ってくれる人はいますか?

http://jsfiddle.net/nVCY4/25/

ドロップダウン構造は次のようになります

<select id="TIPR1" class="table-select" title="Please select">
   <option value="31">Field Box $31</option>
   <option value="29">Lodge Box $29</option>
   <option value="19">Bleachers $19</option>
</select>


function CalculateTotal(frm) {
    var order_total = 0

    // Run through all the form fields
    for (var i=0; i < frm.elements.length; ++i) {

        // Get the current field
        form_field = frm.elements[i]

        // Get the field's name
        form_name = form_field.name

        // Is it a "product" field?
        if (form_name.substring(0,4) == "TIQT") {

            // If so, extract the price from the name
            //item_price = parseFloat(form_name.substring(form_name.lastIndexOf("_") + 1))
            var test = "TIPR1,TIPR2";
            //test = test + i;
            var e = document.getElementById(test);
            item_price = e.options[e.selectedIndex].value;

            // Get the quantity
            item_quantity = parseInt(form_field.value)

            // Update the order total
            if (item_quantity >= 0) {
                order_total += item_quantity * item_price
            }
        }
    }

    // Display the total rounded to two decimal places
    document.getElementById("order_total").firstChild.data = "$" + 
}

Answer 1

自分で何かを試すことをお勧めします。学ぶための絶対的な最良の方法は、実際にやってみることです。

jQuery などのライブラリを含めれば、非常に簡単です。

例を次に示します: http://jsfiddle.net/nVCY4/26/

var selects = $('select');
var inputs = $('input');
selects.change(calculate);
inputs.keyup(calculate);

function calculate(){
    var runningTotal = 0;
    selects.each(function(i){
        var val = parseInt($(this).val());
        var qty = inputs.eq(i).val();
        runningTotal += (val*qty);
    });
    $('#grandtotal').html("Grand-total: "+runningTotal);
}​

Answer 2

これが可能な解決策です..実際には、いくつかの可能な解決策があります。フォーム全体のコンテキストでこれらのフィールドがどのように表示されるかはわかりません。したがって、以下に示す方法の1つは、他の方法よりもうまく機能する可能性があります。

HTMLコードを少しだけ更新しました。JSから簡単に呼び出せるように、SELECT要素のIDを一意にしました。

JSコードでは、フィールドを呼び出して値を取得する3つの異なる方法があります。実行を許可する必要があるのは1つだけです。その他は削除またはコメントアウトする必要があります。

これは、合計の値を設定する下部にも当てはまります。注文の合計がどのように見えるかを示すHTMLを提供しませんでした。そこで、いくつかの異なる方法でサンプルを提供しました。

このコードはテストされておらず、この問題の可能な解決策を示す方法として提供されています。頭のてっぺんから考えることができるものは少なくとも10個ありますが、これらは（私が思うに）あなたが提供したHTMLコードサンプルに最もよく一致します。

<div id="content">
    <table border="1">
        <tr>
            <th>Book Cover</th>
            <th>Title & Author</th>
            <th>Price</th>
            <th>Quantity</th>
        </tr>
        <tr>
            <td class="image">
                <a href="cover2.html" onClick="return openNewWindow(this.href, 475, 725);"><img alt="Book Cover" src="images/covers/2artfielding.png" /></a>
            </td>
            <td class="title">
                <p class="table"><b>The Art of Fielding</b></p>
                <p class="table"><i>by Chad Harbach</i></p>
            </td>
            <td class="price">
               <select id="TIPR1" class="table-select" title="Please select">
                    <option value="31">Field Box $31</option>
                    <option value="29">Lodge Box $29</option>
                    <option value="19">Bleachers $19</option>
                </select>
            </td>
            <td class="quantity">
                <input type="text" id="artquantity" value="1" /><br />
            </td>
        </tr>
        <tr>
            <td class="image"><a href="cover5.html" onClick="return openNewWindow(this.href,475, 725);"><img alt="Book Cover" src="images/covers/18thelovers.png" /></a></td>

            <td class="title">
                <p class="table"><b>The Lover's Dictionary</b></p>
                <p class="table"><i>by David Levithan</i></p>
            </td>
            <td class="price">
               <select id="TIPR2" class="table-select" title="Please select">
                    <option value="31">Field Box $31</option>
                    <option value="29">Lodge Box $29</option>
                    <option value="19">Bleachers $19</option>
                </select>
            </td>

            <td class="quantity">
                <input type="text" id="loverquantity" value="1" /><br />
            </td>
        </tr>

        <tr>
            <td class="image"><a href="cover4.html)" onClick="return openNewWindow(this.href,475, 725);"><img alt="Book Cover" src="images/covers/11nightcircus.png" /></a></td>
            <td class="title">
                <p class="table"><b>The Night Circus</b></p>

                <p class="table"><i>by Erin Morgenstern</i></p>
            </td>
            <td class="price">
               <select id="TIPR3" class="table-select" title="Please select">
                    <option value="31">Field Box $31</option>
                    <option value="29">Lodge Box $29</option>
                    <option value="19">Bleachers $19</option>
                </select>
            </td>
            <td class="quantity">
                <input type="text" id="nightquantity" value="1" /><br />
            </td>

        </tr>
        </table>
        <br />
        <p class="totals" id="grandtotal">Grand-total:</p>
</div>

<script type="text/javascript">
function CalculateTotal(frm) {
    var order_total = 0.00;
    var form_select, form_input;

    //*****************************************************************
    //Option 1: Call the fields directly
    //*****************************************************************
    form_select = document.getElementById("TIPR1");
    form_input = document.getElementById("artquantity");
    order_total += (parseFloat(form_select.options[form_select.selectedIndex].value) * parseFloat(form_input.value));

    form_select = document.getElementById("TIPR2");
    form_input = document.getElementById("loverquantity");
    order_total += (parseFloat(form_select.options[form_select.selectedIndex].value) * parseFloat(form_input.value));

    form_select = document.getElementById("TIPR3");
    form_input = document.getElementById("nightquantity");
    order_total += (parseFloat(form_select.options[form_select.selectedIndex].value) * parseFloat(form_input.value));
    //*****************************************************************


    //*****************************************************************
    //Option 2: Create an array and loop through them
    //*****************************************************************
    var selectIDs = ["TIPR1", "TIPR2", "TIPR3"];
    var inputIDs  = ["artquantity", "loverquantity", "nightquantity"];

    foreach(var i in selectIDs) {
        form_select = document.getElementById(selectIDs[i]);
        form_input = document.getElementById(inputIDs[i]);
        order_total += (parseFloat(form_select.options[form_select.selectedIndex].value) * parseFloat(form_input.value));
    }
    //*****************************************************************


    //*****************************************************************
    //Option 3: Assuming there are the same number of SELECTs as INPUTs
    //*****************************************************************
    var selects = document.getElementById("content").getElementsByTagName("select");
    var inputs  = document.getElementById("content").getElementsByTagName("input");

    foreach(var i in selects) {
        form_select = selects[i];
        form_input = inputs[i];
        order_total += (parseFloat(form_select.options[form_select.selectedIndex].value) * parseFloat(form_input.value));
    }
    //*****************************************************************


    //*****************************************************************
    //Display the total rounded to two decimal places
    //*****************************************************************
    tot_val = "$" + parseFloat(order_total).toFixed(2);

    //I don't know what "order_total" is here since you didn't show it in an example...
    // - Here is the code to set it if it's an input
    document.getElementById("order_total").value = tot_val;

    // - ...if it's a block level element like a DIV or P
    document.getElementById("order_total").innerHTML = tot_val;

    // - ...or if it's a block level child of the element
    document.getElementById("order_total").firstChild.innerHTML = tot_val;
    //*****************************************************************
}
</script>

Answer 3

次のように、必要なロジックを onchange イベントに追加します。

<select id="TIPR1" onchange="f()" class="table-select" title="Please select">

f は、何かが選択されたときに呼び出す関数です。