CODEWITHSUNDEEP
javascriptjquery
Ziad Eldeeb
Ziad Eldeeb

Reputation: 67

split value and append price when choosing an option

I want to append var total to <p id="total">10</p> when someone choose option 

<select name="item-select"  id="item-select" onchange="price(this)">
<option  selected>Choose an item</option>
<option value="1|100|4.5" >item 1</option>
<option value="2|100|5.5" >item 2</option>
<option value="3|100|6.5" >item 3</option>
</select>
<select name="quantity"  id="quantity" onchange="price(this)">
<option  selected>quantity</option>
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
</select>

<div>your price is <p style="display:inline-block" id="total">10</p> $</div>

in value 1 is item_ID & 100 is price and 4.5 is grams from the database

i want when option clicked do this math ( Quantity * Gram + Price) then append it to the Int in <p></p>

my js

var q = $('#quantity').val();
var e = $('#item-select').val();
var splitted = e.split("|");
var price = parseFloat(splitted[1]);
var gram = parseFloat(splitted[2]);
var total = q * gram + price;
$("#item-select").change(function () {
    $("#total").html(+ total);
});

js fiddle https://jsfiddle.net/su9wc2vp/

Upvotes: 2

Views: 138

Answers (2)

Avilona
Avilona

Reputation: 121

Try this:

var calculatePrice = function(){
  var q = $('#quantity').val();
  var e = $('#item-select').val();
  
  if( $('#item-select').val() === null ){
    return 0;
  }
  
  if( $('#quantity').val() === null ){
    q = 1;
  }
  
  var splitted = e.split("|");
  var price = parseFloat(splitted[1]);
  var gram = parseFloat(splitted[2]);
  var total = q * gram + price;
  
  return total;
}
		
$("#item-select, #quantity").change(function() {
  $("#total").html(calculatePrice());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="item-select"  id="item-select">
<option selected disabled>Choose an item</option>
<option value="1|100|4.5" >item 1</option>
<option value="2|100|5.5" >item 2</option>
<option value="3|100|6.5" >item 3</option>
</select>

<select name="quantity"  id="quantity">
<option selected disabled>quantity</option>
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
</select>

<div>your price is <p style="display:inline-block" id="total">10</p> $</div>

Upvotes: 2

Swati
Swati

Reputation: 28522

Try like below :

//on change of quantity select box 
$("#quantity,#item-select").on("change",function(){
   
   var q = $('#quantity').val();
    var e = $('#item-select').val();
    var splitted = e.split("|");
    var price = parseFloat(splitted[1]);
    console.log(price);
    var gram = parseFloat(splitted[2]);
     console.log(gram);
    var total = q * gram + price;
	   //display
        $("#total").html(total);
  

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<select name="item-select"  id="item-select">
<option  selected>Choose an item</option>
<option value="1|100|4.5" >item 1</option>
<option value="2|100|5.5" >item 2</option>
<option value="3|100|6.5" >item 3</option>
</select>

<select name="quantity"  id="quantity" >
<option  selected>quantity</option>
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
</select>
<div>your price is <p style="display:inline-block" id="total">10</p> $</div>

Upvotes: 1

Related Questions