Hi people,
I have a problem where ig you click on the reslit that comes up with the Autocomplete it fills in ALL the fields related to that part of the data. Im clueless to how to stop it happening and to only fill in the one row. Demo is here: http://www.clockworkhire.co.uk/jstest.html Words to use: SM58, Mackie SRM 450, Martin Mac 250, Clay Paky Sharpie.
Code:
JS:
[code]$(document).ready(function() {
$(".quantity").keydown(function(event) {
// Allow: backspace, delete, tab, escape, and enter
if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
// Allow: Ctrl+A
(event.keyCode == 65 && event.ctrlKey === true) ||
// Allow: home, end, left, right
(event.keyCode >= 35 && event.keyCode <= 39)) {
// let it happen, don't do anything
return;
}
else {
// Ensure that it is a number and stop the keypress
if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
event.preventDefault();
}
}
});
$counter = 1;
$('#buttonadd').click(function() {
$counter++;
$('#invoiceitems > tbody:last').append('<tr><td><input type="button" class="deleteitem" value="Delete"/></td><td><input type="text" name="item[' + $counter + '][code]" id="id' + $counter + '-1" class="code" value="" disabled="disabled"/></td><td><input type="text" name="item[' + $counter + '][desc]" id="id' + $counter + '" class="regular-text" value="" /></td><td>£<input type="text" name="item[' + $counter + '][price]" id="id' + $counter + '-3"class="price" value="0.00" disabled="disabled"/></td><td><input type="text" name="item[' + $counter + '][quantity]" id="id' + $counter + '-4" class="quantity" value="0" /></td><td>£<label class="subtotal">0.00</label></td></tr>');
$('.quantity , .price , .code').unbind().on('change', function() {
UpdateTotals(this);
});
// Use the .autocomplete() method to compile the list based on input from user
$(".regular-text").autocomplete(“client/inc/get_item_list.php”, {
width: 260,
matchContains: true,
mustMatch: true,
minChars: 2,
//multiple: true,
//highlight: false,
//multipleSeparator: “,”,
selectFirst: true
});
$('.regular-text').focus(function() {
$('.regular-text').removeClass('onFocus'); /* remove focus state from all input elements */
$(this).addClass('onFocus'); /* add focus state to currently clicked element */
var currentId = $(this).attr('id');
});
$(".regular-text").result(function(event, data, formatted) {
$(".code").val(data[1]);
$(".price").val(data[2]);
// Give focus to the next input field to recieve input from user
$("input[class='quantity']").focus();
});
});
// Use the .autocomplete() method to compile the list based on input from user
$(".regular-text").autocomplete(“client/inc/get_item_list.php”, {
width: 260,
matchContains: true,
mustMatch: true,
minChars: 2,
//multiple: true,
//highlight: false,
//multipleSeparator: “,”,
selectFirst: true
});
$(".regular-text").result(function(event, data, formatted) {
$(".code").val(data[1]);
$(".price").val(data[2]);
// Give focus to the next input field to recieve input from user
$("input[class='quantity']").focus();
});
});
$(function() {
CalculateSubTotals();
CalculateTotal();
// Adding the change events for the Price and
// quantity fields only..
// Changing the total should not affect anything
$('.quantity , .price').on('change', function() {
UpdateTotals(this);
});
});
function UpdateTotals(elem) {
// This will give the tr of the Element Which was changed
var $container = $(elem).parent().parent();
var quantity = $container.find('.quantity').val();
var price = $container.find('.price').val();
var subtotal = parseInt(quantity) * parseFloat(price);
$container.find('.subtotal').text(subtotal.toFixed(2));
CalculateTotal();
}
function CalculateSubTotals() {
// Calculate the Subtotals when page loads for the
// first time
var lineTotals = $('.subtotal');
var quantity = $('.quantity');
var price= $('.price');
$.each(lineTotals, function(i){
var tot = parseInt($(quantity[i]).val()) * parseFloat($(price[i]).val());
$(lineTotals[i]).text(tot.toFixed(2));
});
}
function CalculateTotal() {
// This will Itearate thru the subtotals and
// claculate the grandTotal and Quantity here
var lineTotals = $('.subtotal');
var quantityTotal = $('.quantity');
var grandTotal = 0.0;
var totalQuantity = 0;
$.each(lineTotals, function(i) {
grandTotal += parseFloat($(lineTotals[i]).text());
totalQuantity += parseInt($(quantityTotal[i]).val())
});
$('.totalquantity').text(totalQuantity);
$('.grandtotal').text(parseFloat(grandTotal).toFixed(2));
};
[/code]
HTML:
<table border="0" id="invoiceitems">
<thead>
<tr>
<td></td>
<td><strong>Item ID</strong></td>
<td><strong>Description</strong></td>
<td><strong>Unit Cost</strong></td>
<td><strong>Quantity</strong></td>
<td><strong>Total</strong></td>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td><strong>Total:</strong></td>
<td>£<label class="grandtotal"></label></td>
</tr>
</tfoot>
<tbody>
<tr>
<td><input type="button" class="deleteitem" value="Delete"/></td>
<td><input type="text" name="item[1][code]" id="id1-1" class="code" value="" disabled="disabled"/></td>
<td><input type="text" name="item[1][desc]" id="id1" class="regular-text" value="" /></td>
<td>£<input type="text" name="item[1][price]" id="id1-3" class="price" value="0.00" disabled="disabled"/></td>
<td><input type="text" name="item[1][quantity]" id="id1-4" class="quantity" value="0" /></td>
<td>£<label class="subtotal"></label></td>
</tr>
</tbody>
</table>
<p><input type="button" id="buttonadd" value="Add Line"/></p>Also I cant get the delete part to work no matter what I tried so thats why there is no code for it just now.
Any help would be great!
Thanks for all the help and putting up with me!