Auto populate price based on selected product

[I-AM-OBODO]

Hi all,

How can i auto populate the price of an item based on a chosen product and then auto calculate the price and quantity before hitting the ADD button.
I think it should be a javascript/ajax/jquery stuff but dont know how to go about it.

The Unit price should be auto populated based on valu from the database. The amount is the Unit Price times the Quantity of the Product Selected.

Thanks

My form

	<form action="" method="post" data-toggle="validator">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label>Item Name</label>
<select id="username" name="item_name" class="form-control inputs" data-error="Select Item" required>
<option value="">Chose Item</option>
<?php
$stmt = $pdo->query("
SELECT item_name FROM stocks
ORDER BY item_name ASC
");
while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
$item_name = $row['item_name'];
echo "<option value=\"$item_name\">
$item_name
</option>";
}
?>
</select>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Unit Price</label>
<input type="number" class="form-control" name="item_price">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Item Quantity</label>
<input type="number" class="form-control" name="item_qty" required data-error="Stock Quantity is missing">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Amount</label>
<input type="number" class="form-control" name="amount" >
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<br>
<span class="input-group-btn">
<input name="send" type="submit" class="btn btn-danger btn-form display-4 rounded" value="ADD">
</span>
</form>
	

Edited May 4, 2019 by I-AM-OBODO

[chhorn]

If you want do do the calculation you need to store all involved values within the DOM, e.g. in input-elements with a unique ID. Then you can get these values with document.getElementById(<yourID>), just have a look at the manual

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

[I-AM-OBODO]

7 minutes ago, chhorn said:

If you want do do the calculation you need to store all involved values within the DOM, e.g. in input-elements with a unique ID. Then you can get these values with document.getElementById(<yourID>), just have a look at the manual

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

How do I get the price based on the selected product firstly?

[chhorn]

Just like you stored it. You made the database.

[ginerjm]

YOu have to think about this.  If you want to do some kind of calculations without going back to the server (ie, PHP) you will have to be able to download all of the necessary data to your web page, ie, the client.  And then you will have to use some JS to capture the new value that is entered and do the work.   

Another way would be to write an ajax call which could be triggered as in my previous sentence and that would then send the call to a php script on the server that could do all of the work and return the result(s) to the client where some JS would show it to the user.

Either way - some JS is involved.

[I-AM-OBODO]

Am not saying I cannot retrieve the value for the prices. What I want is for the price to auto populate once the product is selected and that can't be done with php alone I guess

[I-AM-OBODO]

The calculation is not the problem for now as I can do it either later on as the products are populated. The main issue I have now is to retrieve prices based on selection 

[mac_gyver]

IMO using a select/option menu to pick a product to add to a cart is not a good user interface. there's a limited amount of information that can be displayed about each product, so picking between similar products will be difficult and once you get to 20-30 items no one is going to want to use a select menu. you should list out each matching  (using a category/name selection/search) product with the name, description, price, thumbnail image, quantity field, and an add button.

if you do have a use for a select/option menu to pick something, you would attach an onchange event handler to the select element, the option value should be the item id not the item name, the javascript would get the value of the selected option choice, use ajax to retrieve the data matching the selected item id, then populate any elements on the web page with the retrieved data. these are all very common tasks that you can research on the web to find example of. while you can display the price and calculate and display the total from the entered/selected quantity and the price, the only values that should be used on the server from the submitted data are the item id and the quantity.

[ginerjm]

I totally agree with Mac_gyver.  If you have a large inventory then having a huge dropdown would be burdensome for the user.  YOu could write your process to show a brief inventory listing that allowed for users to click on an item and go back to the server and get all of the info that you want to show the user.  Yes it means a check back with your server, but is that a problem?

[I-AM-OBODO]

2 hours ago, mac_gyver said:

IMO using a select/option menu to pick a product to add to a cart is not a good user interface. there's a limited amount of information that can be displayed about each product, so picking between similar products will be difficult and once you get to 20-30 items no one is going to want to use a select menu. you should list out each matching  (using a category/name selection/search) product with the name, description, price, thumbnail image, quantity field, and an add button.

if you do have a use for a select/option menu to pick something, you would attach an onchange event handler to the select element, the option value should be the item id not the item name, the javascript would get the value of the selected option choice, use ajax to retrieve the data matching the selected item id, then populate any elements on the web page with the retrieved data. these are all very common tasks that you can research on the web to find example of. while you can display the price and calculate and display the total from the entered/selected quantity and the price, the only values that should be used on the server from the submitted data are the item id and the quantity.

I quite agree with you. But this is to be used for small scale sales shop that sells confectioneries basically and few other stuffs. It's just to add glamour to the shop and also keep records of sales/profits. Using thumbnail/image will it not be tedious for the sales rep. Cos basically it's the sales rep only that does the shopping and the customer is issued receipt. Now I really should change/abandon my initial perception. What do u think? Any idea is highly welcomed.

[ginerjm]

I"m not sure what you are saying.   We have given you advice.  Time now for you to make the decision.  If it is a large inventory that would make the dropdown selection tedious, a client might not like the site.  But - since your user is an employee, that may not be an issue for you.   

You have to decide what you want to do.  The easy way in my mind is to generate a page that gives the user just enough info to choose an item with and then submit that selection to the server and create a more detailed web page for that single item.  Unless you have a terribly slow or over-worked server this should not be a concern for the app.

[I-AM-OBODO]

17 minutes ago, ginerjm said:

I"m not sure what you are saying.   We have given you advice.  Time now for you to make the decision.  If it is a large inventory that would make the dropdown selection tedious, a client might not like the site.  But - since your user is an employee, that may not be an issue for you.   

You have to decide what you want to do.  The easy way in my mind is to generate a page that gives the user just enough info to choose an item with and then submit that selection to the server and create a more detailed web page for that single item.  Unless you have a terribly slow or over-worked server this should not be a concern for the app.

Ok. The app is gonna run on WAMP. So the issue of slow server is to a great extent eliminated. The system will have a good CPU and RAM for speed.  Will have to think of something and if nothing comes handy, will make do with the dropdown/select option. Thanks guys.

Edited May 4, 2019 by I-AM-OBODO

[mac_gyver]

if the point of retrieving the price is to calculate the total before you add the item to the cart, there's no real need to do this, assuming that after each item is added to the cart you are displaying the contents of cart. you would retrieve the item name, description, price, and would calculate the total when displaying the contents of the cart. You can just display the price next to the item name in the option list if the sales rep needs access to the unit price.

[I-AM-OBODO]

19 minutes ago, mac_gyver said:

if the point of retrieving the price is to calculate the total before you add the item to the cart, there's no real need to do this, assuming that after each item is added to the cart you are displaying the contents of cart. you would retrieve the item name, description, price, and would calculate the total when displaying the contents of the cart. You can just display the price next to the item name in the option list if the sales rep needs access to the unit price.

Am not really after the calculation, what I'm concerned about is retrieving the value of price based on selected products so that the price shows up on the price input area for further processing. If I get this, my job is halve done (assuming I'm sticking with dropdown option)

Edited May 4, 2019 by I-AM-OBODO

[mac_gyver]

do not pass the price through the form.

you should get a minimum of data from the form, because all form data must be validated before using it. if all you are submitting is the item id and the quantity, you only have two pieces of form data that you must validate.

the work-flow should be -

1) user selects an item, modifies the quantity (the initial quantity field value should be 1), and submits the form.

2) the server side processing code detects that a post method form has been submitted, validates the input data, and adds the item id (as the array index) and quantity to a cart session array variable.

3) to display the cart, get the item id's (see array_keys()), query the database to get all the item ids, names, descriptions, and prices for the items in the cart. loop over the retrieved data to display the cart, getting the corresponding quantity from the cart session array variable using the item id, performing any total calculation and display as needed.

[I-AM-OBODO]

34 minutes ago, mac_gyver said:

do not pass the price through the form.

you should get a minimum of data from the form, because all form data must be validated before using it. if all you are submitting is the item id and the quantity, you only have two pieces of form data that you must validate.

the work-flow should be -

1) user selects an item, modifies the quantity (the initial quantity field value should be 1), and submits the form.

2) the server side processing code detects that a post method form has been submitted, validates the input data, and adds the item id (as the array index) and quantity to a cart session array variable.

3) to display the cart, get the item id's (see array_keys()), query the database to get all the item ids, names, descriptions, and prices for the items in the cart. loop over the retrieved data to display the cart, getting the corresponding quantity from the cart session array variable using the item id, performing any total calculation and display as needed.

Thanks

[kicken]

I agree with the others that your initial approach sounds flawed and you should change it, likely making the original request unnecessary.

However, to accomplish what you wanted initially the easiest way is just to attach the price per item as a data attribute to your item input and then have some javascript that reads that and the quantity whenever the change and update a total somewhere.  In the case of a select list with your products, you'd attach the price to the <option> elements.  For example:

<select name="item" id="item">
  <option value="1" data-price="10">First item</option>
  <option value="2" data-price="15">First item</option>
  <option value="3" data-price="20">First item</option>
  <option value="4" data-price="25">First item</option>
</select>
x
<input name="quantity" id="quantity">
=
<span id="totalPrice"></span>

Then a simple script to do the calculation

//Uses jQuery for simplicity
function updateTotal(){
  var pricePer = $('#item').find('option:selected').data('price');
  var quantity = $('#quantity').val();
 
  var total = pricePer * quantity;
  $('#totalPrice').text(total);
}

$('#item').change(updateTotal);
$('#quantity').change(updateTotal);