0

動的な商品リスト、価格、数量を含む注文フォームを作成しようとしています。ここで、数量は、ユーザーが任意の金額を入力できる入力フィールドです。この数量入力に従って、フォームを送信する前に合計価格がフォーム上でリアルタイムに更新されます。

whileループ内でmysqlデータベースのテーブル名「PRODUCTS」から商品一覧と価格を表示しています。while ループ内で使用した行は次のとおりです。

<tr>
<td style="width:200px;"><span class="tdlist"><?php echo $item?></span></td>
<td style="width:120px; text-align:center;"><span class="tdlist"><?php echo $price?></span></td>
<td style="width:150px;"><input type='text'  maxlength=9 name='item<?php echo $id?>' value=''  id='item<?php echo $id?>' style="width:60px;"/><select name='quantity<?php echo $id?>' id='quantity<?php echo $id?>' ><option value='Kg' >Kg.</option><option value='gms' >gms</option></select></td>
</tr>

これは、次のような単純な html です。

<tr>
<td style="width:200px;"><span class="tdlist">Sugar</span></td>
<td style="width:120px; text-align:center;"><span class="tdlist">57</span></td>
<td style="width:150px;"><input type='text'  maxlength=9 name='item1' value='1'  id='item1' style="width:60px;"/><select name='quantity1' id='quantity1' ><option value='Kg' >Kg.</option><option value='gms' >gms</option></select></td>
</tr>

<tr>
<td style="width:200px;"><span class="tdlist">Rice</span></td>
<td style="width:120px; text-align:center;"><span class="tdlist">98</span></td>
<td style="width:150px;"><input type='text'  maxlength=9 name='item2' value='1'  id='item2' style="width:60px;"/><select name='quantity2' id='quantity2' ><option value='Kg' >Kg.</option><option value='gms' >gms</option></select></td>
</tr>

次のように、ユーザーがフォームに入力した数量に基づいて合計値を表示する div があります。

<div><span class="thlist">Approx Total:</span> <span id="total" class="total">0</span></div>

私はこれを試しました：

<script type="text/javascript">
    $(document).ready(function(){

var tot = $('#total').html();

$('#item<?php echo $id?>').keyup(function(){

var itemValue = $('#item<?php echo $id?>').val() * <?php echo $price?>;

if($(this).val())
{
var tot = $('#total').html();
var totalVal = itemValue + parseInt(tot);
}
else
{
var totalVal = parseInt(tot) - itemValue;
}

    $('#total').text(totalVal);

}); 


});

しかし、これは正しく機能しませんでした。Jquery を使用してこれを行うには、専門家のアドバイスが必要です。助けてください、事前に感謝します。

4

1 に答える 1

1

http://jsfiddle.net/eNFAY/

まず、価格を保持するスパンのクラスを から に変更しますtdlist。price

<span class="price">57</span>

次に、数量の入力class="item_input"と選択にクラスを追加しますclass="measure"

<input type='text' maxlength=9 name='item2' value='1' id='item2' style="width:60px;" class="item_input" />

<select name='quantity1' id='quantity1' class="measure">

そこから、js を記述できます。単価は 1 kg あたりであるという仮定に注意してください。価格を gm あたりにしたい場合は、item_cost計算を変更する必要があります。

$(document).ready(function () {
    $('.item_input, .measure').bind('keyup, change', function () {
        var total = 0;
        var item_qty = 0;
        var item_cost = 0;
        var measure = 'kg';
        $('.item_input').each(function () {
            item_qty = $(this).val();
            if (item_qty == '') {
                item_qty = 0;
            }
            parseFloat(item_qty);
            item_cost = parseFloat($(this).parent().prev().find('.price').html());
            measure = $(this).next('select').val();
            if (measure == 'gms') {
                item_cost = item_cost / 1000;
            }
            total = total + (item_cost * item_qty);
            // log to console for debugging
            console.log("item_qty=" + item_qty + ' item_cost=' + item_cost + ' measure=' + measure);
        });
        // log to console for debugging
        console.log(total);
        $('#total').html(total);
    })
    // call change event on ready to populate total on page load
    $('.item_input').change();
});
于 2013-01-31T14:45:47.260 に答える