View Full Version : Point of sale style list

09-26-2012, 05:15 PM
jQuery and Javascript are rather foreign to me. PHP is my thing just cant get my head around javascript and such. So my sticking point is this:

I am looking for something like this: http://www.codemashups.com/source/jquery/jquery-autocomplete-p1/ I need the user to be able to enter a product description then they can select the right one in the drop down box. Then it fills in the rest of the form jumps to the number needed the user enters that presses enter and you can then add more items. Then it should need to return a current total cost with and with out VAT and such. Then when the user it done to enter the ID's of the products in a comma separated value list into a MySQL database along with the total cost.

I would edit that one in the link but I'm at a total loss to what to do! :(

09-26-2012, 05:38 PM
You should at least make a start and come back with specific questions when you run into trouble. The tweaks you want to make are not so complicated, but people here tend to work on specific issues rather than coding complete projects.

The example page you showed does many of the things you want. I guess you could start by adding the "with VAT" and "without VAT" values to the array of objects that gets pulled in.

Keeping a running total is just a matter of updating some variable every time a selection is made, most logically when they choose an item from the autocomplete list, and then displaying the value of that variable somewhere else on the page.

Formatting the user's selections is trivial. Sending it back to the database would I guess be a job for AJAX and php, which I assume you would be comfortable with.

09-26-2012, 06:14 PM
I would happily show something and ask for help but I dont know where to start to get something to show. I know the ideas behind what I wish to do but lack the knowledge to put them together. I will see what I can do in the mean time.

09-26-2012, 09:16 PM
I have something and it works! (Somewhat) but for the life of me get the values to multiply!

<script type="text/javascript">
$().ready(function() {

$("#itemdec").autocomplete("inc/get_item_list.php", {
width: 260,
matchContains: true,
mustMatch: true,
minChars: 2,
//multiple: true,
//highlight: false,
//multipleSeparator: ",",
selectFirst: true

$("#itemdec").result(function(event, data, formatted) {
// Give focus to the next input field to recieve input from user



var itemqt = $('#itemqt').val(); //get value of form field

var itemprice = $('#itemprice').val(); //get value of form field

var newVal = itemqt * itemprice; //multiply

$('#totalprice').val(newVal); //change the form field's value to the result of the multiplication



<form action="" id="itemsForm" >

<table id="itemsTable" class="general-table">
<th>Item Code</th>
<th>Item Description</th>
<th>Item Qty</th>
<th>Item Price</th>
<th>Total Price</th>
<tr class="item-row">
<td><input type="text" name="itemcode" id="itemcode" /></td>
<td><input type="text" name="itemdec" id="itemdec" /></td>
<td><input type="text" name="itemqt" id="itemqt" /></td>
<td><input type="text" name="itemprice" id="itemprice" /></td>
<td><input type="text" name="totalprice" id="totalprice" /></td>


<a href="#" id="addRow" class="button-clean large"><span> <img src="images/icon-plus.png" alt="Add" title="Add Row" /> Add Item</span></a>

Also working on this add new row and the possibly complications of this.

09-26-2012, 09:28 PM
one problem you are going to have is using the onkeypress event. doing that, you grab the value of the box as the key is pressed ie, before the entered value appears in the box.

I would try that function with a

which waits until the key has been released before grabbing the value

09-26-2012, 09:48 PM
Thanks that worked perfectly! :D

Now for the other sections. I will be back... :o

09-27-2012, 01:32 AM
I have most of it working now! :D I just to work out how to delete the rows.