Question

我正在尝试使用动态商品列表，价格和数量创建订单。数量是一个输入字段，用户可以输入任何金额，根据此数量输入，总价格将在提交表格之前实时更新在表格上。

我在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需要您的专家建议如何做到这一点。请帮助我，提前谢谢。

Answer 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();
});

自定义jquery和基于php的订单表单，可自动计算总计

1 个答案: