Question

I have a script that calls to a Database to get Autocomplete data.

Once the specific Autocomplete data (Item Name) has been chosen a few other fields are populated, namely: Item Code, Price & Quantity.

When the quantity is changed the Lines Total field changes to "Quantity * Price" total.

There is the option to carry on adding rows Dynamically and autocomplete each in the same fashion ... there is a Grand Total that adds each line total together.

My issues are that the grand total only changes when the Quantity is changed, it should load on the focus of Price in each line - also, removing a line does not remove that spcific Line Totals ammount from the Grand Total and if you change the very first lines quantity (only the first line is affected) it re-sets the Grand total to anything that line has now added up to ... Please can someone look at my code.

The live version is at http://cardoso.co.za/form/

You can also get the files there too if you browse to http://cardoso.co.za/form/form.zip

Any and all help is greatly appreciated!!!

Edit here's some code from the entire script:

    var $itemsTable = $('#itemsTable');
var rowTemp = [
'<tr class="item-row">',
'<td><a id="deleteRow"><img src="images/icon-minus.png" alt="Remove Item" title="Remove Item"></a></td>',
'<td><input name="itemType" class="itemType" id="itemType" tabindex="1" style="width:350px;"/></td>',
'<td align="center"><input name="itemCode" class="itemCode" id="itemCode" readonly="readonly" style="width:60px;" tabindex="-1"/></td>',
'<td align="center"><input name="itemQty" class="itemQty" id="itemQty" tabindex="2" style="width:40px;" maxlength="4" value=""/></td>',
'<td width="14%" align="center"><input name="itemPrice" class="itemPrice" id="itemPrice" readonly tabindex="-1"/></td>',
'<td width="17%" align="right"><input name="itemTotal" class="itemTotal" id="itemTotal" readonly tabindex="-1"/></td>',
'</tr>'
].join('');
$('#addRow').bind('click',function(){
var $row = $(rowTemp);
var $itemType = $row.find('#itemType');
var $itemCode = $row.find('.itemCode');
var $itemPrice = $row.find('.itemPrice');
var $itemQty = $row.find('.itemQty');
var $itemTotal = $row.find('.itemTotal');
if ( $('#itemType:last').val() !== '' ) {
$row.find('#itemType').autocomplete({
source: 'item-data.php',
minLength: 1,
select: function(event, ui) {
$itemType.val(ui.item.itemType);
$itemCode.val(ui.item.itemCode);
$itemPrice.val(ui.item.itemPrice);
$itemTotal.focus().val(ui.item.itemPrice); 
$itemQty.focus().val(1);
$itemQty.keyup(function() {
var Quantity = $itemQty.val();
var Prices = $itemPrice.val();
var ItemsTotal = Quantity * Prices;
$itemTotal.val(ItemsTotal.toFixed(2));
var Tsum = 0;
$('.itemTotal').each(function() {
if(!isNaN(this.value) && this.value.length!=0) {
Tsum += parseFloat(this.value);
$('#toTally').val(Tsum.toFixed(2))
}
}); 
});
return false;
}
}).data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.itemType + "</a>" )
.appendTo( ul );
};
$('.item-row:last', $itemsTable).after($row); 
$('#minusRow').show();
$('#resetTable').show();
$($itemType).focus();
}
return false;
});

I have implemented the Array, Will post this instead soon, once I get it to work with ID's and Classes without jamming.

Was it helpful?

Solution

I solved the issue by doing the following :

            ( function($) {
        var pounter = 1;
        $(document).ready(function(){
            var qounter = 1;
            var trounter = 1;

                //Count each instance and add number to Name
                $row.find('._ext_price_total_html').each(function() {
                $(this).attr({
                'name': function(_, name) {
                    return name + pounter },
                    });
                pounter++;
                })
            $row.find('.quantitys').each(function() {
                $(this).attr({
                'name': function(_, name) {
                    return name + qounter },
                    });
                qounter++;
                })  
            $('#quantity', function(){
                var Tsum = 0;
                $('[id^="_ext_price_total_html"]').each(function() {
                    if(!isNaN(this.value) && this.value.length!=0) {
                    Tsum += parseFloat(this.value);
                    }
                        $('.toTally').val(Tsum.toFixed(2))                                                          
                })
                })
                $('#quantity').change(function(){
                var Tsum = 0;
                $('[id^="_ext_price_total_html"]').each(function() {
                    if(!isNaN(this.value) && this.value.length!=0) {
                    Tsum += parseFloat(this.value);
                    }
                        $('.toTally').val(Tsum.toFixed(2))                              
                    })
                })
                $('#quantity').keyup(function(){
                var Tsum = 0;
                $('[id^="_ext_price_total_html"]').each(function() {
                    if(!isNaN(this.value) && this.value.length!=0) {
                    Tsum += parseFloat(this.value);
                    }
                        $('.toTally').val(Tsum.toFixed(2))
                })
                })
        //adjust/subtract from total when removeing row 

        $('#deleteRow').live('click',function(){
var delAsk = confirm('Remove this item?');
        if (delAsk)
        {
        $(this).parents('.jshop_prod_cart').remove();
            var Tsum = 0;
                $('[id^="_ext_price_total_html"]').each(function() {
                    if(!isNaN(this.value) && this.value.length!=0) {
                    Tsum += parseFloat(this.value);
                    }
                        $('.toTally').val(Tsum.toFixed(2))

                })
        }
        else
        {
            ('cancel');
            }
                });
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top