jQuery how to not adding number every changed

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?

Move var item=$("#item").val(); var detail=$("#detail").val(); var price=0; into inside the on change function — JYoThI
– JYoThI, Commented Nov 9, 2018 at 5:03

Vinia · Accepted Answer · 2018-11-09 05:25:10Z

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

answered Nov 9, 2018 at 5:25

Vinia

465 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Cornelis · Accepted Answer · 2018-11-09 05:11:46Z

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

Akhilesh B Chandran · Accepted Answer · 2018-11-09 06:15:34Z

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!

Collectives™ on Stack Overflow

jQuery how to not adding number every changed

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related