JavaScript Development
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me

The Shed is going Social! Join us on FaceBook and Twitter and chime in on the conversation.

Go Back   Dev Shed ForumsWeb DesignJavaScript Development

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old September 27th, 2012, 02:16 PM
jiggles92 jiggles92 is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Sep 2012
Posts: 1 jiggles92 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 22 m 8 sec
Reputation Power: 0
JQuery autocomplete fills all fields

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


HTML:

Code:
<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!

Reply With Quote
Reply

Viewing: Dev Shed ForumsWeb DesignJavaScript Development > JQuery autocomplete fills all fields

Developer Shed Advertisers and Affiliates



Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump

Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 


Powered by: vBulletin Version 3.0.5
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.

© 2003-2013 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap