jQuery how to not adding number every changed - php

Question

I have an order form. If the user change the packages, the price will be changed.
HTML
<select name="item" id="item">
<option value="i1">Item1</option>
<option value="i2">Item2<option>
</select>
<select name="detail" id="detail">
<option value="d1">Detail1</option>
<option value="d2">Detail2</option>
</select>
<p>Price : <span id="price"></span></p>
The PHP below will send the data gotten from the form
PHP
$item=$_POST["item"];
$detail=$_POST["detail"];
$price=0;
if($item=="p1"){
$price=$price+10;
}
else{
$price=$price+5;
}
if($detail=="d1"){
$price=$price+2;
}
else{
$price=$price+1;
}
// codes for sending the data to database
jQuery below will show the price of the chosen package. I want it to show the price everytime it's changed
jQuery
var item=$("#item").val();
var detail=$("#detail").val();
var price=0;
$("#item").on('change',function(){
if(item=="i1"){
price=price+10;
$("#price").html("$ "+price);}
else{
price=price+5;
$("#price").html("$ "+price);}
})
$("#detail").on('change',function(){
if(detail=="d1"){
price=price+2;
$("#price").html("$ "+price);}
else {
price=price+1;
$("#price").html("$ "+price);}
})
I want : price=price(item)+price(detail). The problem is, if the user change it more than once, it will add the number, althought the PHP will not send the number from jQuery.
Let's say, a user chooses Item1 and Detail2. The price shows 11. But, if the user changes it to Detail1, it will shows 13, etc, and finally, the user chooses Item2 and Detail1. PHP will send 7, but the jQuery will show more than 7. Any idea?

Answer 1

Hi :) You can use this code instead:
For you HTML:
<select name="item" id="item">
<option value="0" disabled selected>Select your option</option>
<option value="10">Item1</option>
<option value="5">Item2<option>
</select>
<select name="detail" id="detail">
<option value="0" disabled selected>Select your option</option>
<option value="2">Detail1</option>
<option value="1">Detail2</option>
</select>
<p>Price : <span id="price"></span></p>
and for your Jquery:
$(document).ready(function () {
$("#item,#detail").on('change',function() {
var item=$("#item").val() || 0;
var detail=$("#detail").val() || 0;
var price = 0;
price = parseInt(item) + parseInt(detail);
$("#price").html("$ "+price);
});
});

Answer 2

The simplest solution is to have one function that calculates the total when either of the values change, meaning it will recalculate the total price every time instead of having two functions affecting the same value. here is my solution below:
// Storage for the item prices
var itemDict = {
"p1": 10,
"p2": 4,
"p3": 0
};
// Storage for the detail prices
var detailDict = {
"d1": 2,
"d2": 5,
"d3": 2
};
$("#item").on('change', function () {
CalcPrice();
})
$("#detail").on('change', function () {
CalcPrice();
})
function CalcPrice() {
var price = 0;
const itemPrice = itemDict[$("#item").val()] || 2; // 2 as a default
const detailPrice = detailDict[$("#detail").val()] || 1; // 1 as a default
$("#price").html("$ " + price);
}

Answer 3

The problem is with these lines:
var item=$("#item").val();
var detail=$("#detail").val();
var price=0;
You are declaring and setting the values globally. And it will get set only once when the page is loaded. So, when you access these variables within the change event of #item and #detail, you are accessing the values from these global variables and doing the math and saving it back! So, the next time any of these change event is fired (that is, if user changes the item or detail from the dropdowns), you are again accessing the values from the global variables which contains the data from the previous calculation!
That's why you were getting wrong values.
So, the solution is to move those three variables to inside each of those change events
(what #JYoThi suggested), like these:
$("#item").on('change',function(){
var item=$("#item").val();
var detail=$("#detail").val();
var price=0;
if(item=="i1"){
price=price+10;
$("#price").html("$ "+price);}
else{
price=price+5;
$("#price").html("$ "+price);}
});
$("#detail").on('change',function(){
var item=$("#item").val();
var detail=$("#detail").val();
var price=0;
if(detail=="d1"){
price=price+2;
$("#price").html("$ "+price);}
else {
price=price+1;
$("#price").html("$ "+price);}
});
This will probably solve your issue for now!
#Vinia and #Cornelis has provided some good solutions too, hope you would be able to understand it on looking at it.
Cheers!