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。请注意，假设单价是每公斤。如果您希望价格为每克，则需要更改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 回答