Order Pad - Get all items with a quantity with 1 or more

Hi

I am trying to create an order pad (similar to a typical shopping cart). Each item row has a quantity which is a text field. Can you please show an example of how I do the below using jQuery...

1) First I want validate all the quantity text boxes to check that at least one has a number of 1 or more. Can we also make sure only a number is added to the quantity text field. i.e. Make sure they are all not empty.
2) If 1 is successful get all the item codes and item quantities.
petewinterAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

MlandaTCommented:
A sample of your HTML table/data would help a great deal.
petewinterAuthor Commented:
See below. Do you need to know anything else. There will obviously be lots of rows of content.

<table width="100%" class="pricetables" id="list-roll">
  <tbody><tr>
    <td bgcolor="#424856" class="whitebold">Code</td>
    <td bgcolor="#424856" class="whitebold">Price</td>
    <td bgcolor="#424856" class="whitebold">Quantity</td>
  </tr>
  <tr class="list-item-roll">
    <td bgcolor="#DDDDDD" class="code">CMY-12031692</td>
    <td bgcolor="#DDDDDD">£82.26</td>
    <td bgcolor="#DDDDDD">
    <input type="text" name="quantity">
    </td>
  </tr>
  </tbody></table>

Open in new window

MlandaTCommented:
Are all your quantity INPUTs called "quantity"?
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attributeContains demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

Quantity 1: <input name="txtQty1" value="1"/><br/>
Quantity 2: <input name="txtQty2" value="2"/><br/>
Quantity 3: <input name="txtQty3" value="0"/><br/>
Quantity 4: <input name="txtQty4" value="0"/><br/>
Quantity 5: <input name="txtQty4" value="sdfds"/><br/>

<br/><br/>
Total<input id="txtTotalQuantity">

<script>
var total = 0;
$( "input[name*='txtQty']" ).each( function(index) {
	var value = $(this).val();
	if(!isNaN(parseInt(value)))
		total += parseInt(value);
});
$( "#txtTotalQuantity" ).val( total );
</script>

</body>
</html>

Open in new window

Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

MlandaTCommented:
Would your item codes and prices just be in <td> without a span or other element with an attribute that could be used to identify them?
petewinterAuthor Commented:
Thanks for the first code I will try soon.

I was planning to put a rel attribute on the quantity input so it would be something like...

<input name="txtQty1" rel="CMY-12031692" value="1"/>

Open in new window


Is that the easiest way?
petewinterAuthor Commented:
A span is probably best for the price as I wouldn't want the £ symbol.

Many thanks for your help.
MlandaTCommented:
The attribute will help. Otherwise, you can pull the data from the TD as you process each Quantity input (not the best of ways).. but the best approach given your sample HTML structure
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attributeContains demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<table>
<tr><td>CODE1</td><td>1.00</td><td><input class="quantity" value="1"></input></td></tr>
<tr><td>CODE2</td><td>2.00</td><td><input class="quantity" value="2"></input></td></tr>
<tr><td>CODE3</td><td>3.00</td><td><input class="quantity" value="0"></input></td></tr>
<tr><td>CODE4</td><td>4.00</td><td><input class="quantity" value="0"></input></td></tr>
<tr><td>CODE5</td><td>5.00</td><td><input class="quantity" value="sdfds"></input></td></tr>
</table>

<br/><br/>
Total<input id="txtTotalQuantity">
<button onclick="addThingsUp();">add</button>
<br/>
<br/>
<br/>
<textarea id="txtOutput" rows="20" cols="100"></textarea>
<script>
var products = [];
var total = 0;

function addThingsUp() {

	products = [];

	$( "input.quantity" ).each( function(index) {
		var value = $(this).val();
		if(!isNaN(parseInt(value))) {
			var quantity = parseInt(value);
			if(quantity > 0) {
				total += quantity;
				var tr = $(this).closest('tr');
				var td = $(tr).find('td');
				var p = {};
				products.push({
					code: $(td[0]).html(),
					price: $(td[1]).html(),
					quantity: quantity
				});
			}
		}
	});

	$( "#txtTotalQuantity" ).val( total );
	$( "#txtOutput" ).val(JSON.stringify(products, null, 2));
}
</script>

</body>
</html>

Open in new window

(I hope you see why posting your HTML layout helps here... the community can help, but you've got to provide a framework to work with).

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
petewinterAuthor Commented:
Many thanks MlandaT, but how do I send the information using ajax like the below?

$.post("result.php", {
									items: products,
									cust_id: 32,
									adding_codes: "true"
        						}, function(data) {  
									$('#Results').html(data);
                            	});

Open in new window

petewinterAuthor Commented:
Also could you please explain...

JSON.stringify(products, null, 2)

Open in new window


What does the "null" and "2" do?
MlandaTCommented:
Those are just for formatting :) 2 character indent :) and between you and me... I don't know what the null is for :) (You can look here for details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify)

You can change that line to just: JSON.stringify(products) You will see that it writes "horrible" JSON to the textarea.... well... it's valid JSON, and best for sending to other programs/webservices... but it's not easy to read with a pair of human eyes.
petewinterAuthor Commented:
Thanks. Did you see my previous question!
petewinterAuthor Commented:
I basically want to add each item into a MySQL database table using php. A separate table row for each item. Table field for each item field. Hope that makes sense.
MlandaTCommented:
What you have looks like it will work. What do you see? Does you submit work? Do you have something to show you what network requests you page is doing (Firebug on FF, or press F12 on Edge/Chrome and go to the Network tab)
MlandaTCommented:
Here is a quick sample. I'm not familiar with the PHP processing syntax. But this will set you in a direction.
jq.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attributeContains demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<table>
<tr><td>CODE1</td><td>1.00</td><td><input class="quantity" value="1"></input></td></tr>
<tr><td>CODE2</td><td>2.00</td><td><input class="quantity" value="2"></input></td></tr>
<tr><td>CODE3</td><td>3.00</td><td><input class="quantity" value="0"></input></td></tr>
<tr><td>CODE4</td><td>4.00</td><td><input class="quantity" value="0"></input></td></tr>
<tr><td>CODE5</td><td>5.00</td><td><input class="quantity" value="sdfds"></input></td></tr>
</table>

<br/><br/>
Total<input id="txtTotalQuantity">
<button onclick="addThingsUp();">add</button>
<br/>
<br/>
<button onclick="return sendData();">send</button>
<br/>
<textarea id="txtOutput" rows="20" cols="100"></textarea>
<script>
var products = [];
var total = 0;

function addThingsUp() {

	products = [];

	$( "input.quantity" ).each( function(index) {
		var value = $(this).val();
		if(!isNaN(parseInt(value))) {
			var quantity = parseInt(value);
			if(quantity > 0) {
				total += quantity;
				var tr = $(this).closest('tr');
				var td = $(tr).find('td');
				var p = {};
				products.push({
					code: $(td[0]).html(),
					price: $(td[1]).html(),
					quantity: quantity
				});
			}
		}
	});

	$( "#txtTotalQuantity" ).val( total );
	$( "#txtOutput" ).val(JSON.stringify(products, null, 2));
}

function sendData() {

	var data = {
		items: products,
		cust_id: 32,
		adding_codes: "true"
	};

	$.post("jq.php", data, function(data) {
		$('#Results').html(data);
	}, "json");

	return false;

}
</script>

</body>
</html>

Open in new window

jq.php
<?php

parse_str(file_get_contents("php://input"), $data);
$data= (object)$data;
var_dump($data);

?>

Open in new window

YELLOW: that is from the PHP script where I'm doing a VAR_DUMP
petewinterAuthor Commented:
Many thanks for all your help :)
MlandaTCommented:
Glad to have helped :) All the best with your app.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.