Question

I am trying to create an Order Form with dynamic item list, price and quantity. Here quantity is an input field where user can enter any amount and as per this quantity input, total price will be update on the form in real time before submitting the form.

I am displaying the item list and price from mysql database table name “PRODUCTS” within while loop. Here is the row which I have used within while loop:

<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>

Here is plain html look like this:

<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>

I have a div which displays total value based on the quantity entered by the user on the form like this:

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

I have tried this:

<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);

}); 


});

but this did not work properly, please need your expert advice how to do this using Jquery. Please help me, thanks in advance.

Answer 1

http://jsfiddle.net/eNFAY/

First off, I would change the class of the span that holds the price from tdlist to price

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

Next, add a class to your quantity inputs class="item_input" and selects 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">

From there, we can write our js. Notice the assumption is that the unit price is per kg. If you want the price to be per gm, you will need to change the item_cost calculation.

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