CODEWITHSUNDEEP
jqueryhtmlajax
Kasun Chamara Perera
Kasun Chamara Perera

Reputation: 3

How I get the calculation in same page when I select drop down value?

How can I get the result of calculation in same page when I select drop down value?

I have tried with ajax. But not fixed. I am new to jquery and ajax.

<!-- drop down selection -->
<select>                                                                 
<option value='1'>1 Pax</option>                                                                 
<option value='2'>2 Pax</option>
<option value='3'>3 Pax</option>
</select>

<p>Price per each: $100</p>

<!-- calculating here -->
<p>Total price: $100 x Value of pax)</p>

Upvotes: 0

Views: 107

Answers (5)

Mukyuu
Mukyuu

Reputation: 6769

One of the way to do it:

1) Giving an id(valueselection) to select option for differentiating with another select element.

2) Put base price and total price inside label with unique id similar to step 1)

3) Calculate initial and price on selected option:

var i= 1;
var base=$('label#baseprice').text();
$('label#total').text(base);
$("select#valueselection").change(function(){
  i=$('select#valueselection').val();
  $('label#total').text(base*i);
});

See snippet below:

var i= 1;
var base=$('label#baseprice').text();
$('label#total').text(base);
$("select#valueselection").change(function(){
  i=$('select#valueselection').val();
  $('label#total').text(base*i);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- drop down selection -->
<select id="valueselection">                                                                 
<option value='1'>1 Pax</option>                                                                 
<option value='2'>2 Pax</option>
<option value='3'>3 Pax</option>
</select>

<p>Price per each: $<label id="baseprice">100</label></p>

<!-- calculating here -->
<p>Total price: $<label id="total"></label></p>

Upvotes: 0

Anagha
Anagha

Reputation: 136

you can use the following code

$("#ddldemo").change(function() {
  $("#ldldemo").text(100 * parseInt($("#ddldemo").val()));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <select id="ddldemo" name="ddldemo">
    <option value='1'>1 Pax</option>
    <option value='2'>2 Pax</option>
    <option value='3'>3 Pax</option>
  </select>
  <label id="ldldemo"></label>
  <p>Total price: $100 x Value of pax)</p>
</div>

Upvotes: 1

devmonster
devmonster

Reputation: 474

Just use jquery. You don't need to use ajax for the calculation.

You need to get the value of the select tag and put it on a variable then you can parse it to integer so you can use it to calculate the total price. Check the example below:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="pax" onchange="calculate()">
  <option value='1' selected>1 Pax</option>
  <option value='2'>2 Pax</option>
  <option value='3'>3 Pax</option>
</select>
<p>Price per each: $100</p>
<p>Total: <span id="total"></span></p>
<script>
  function calculate() {
    var get_value = $("#pax option:selected").text();
    var no_pax = parseInt(get_value);
    var price = 100;
    var total_price = no_pax * price;

    $("#total").text(total_price);

  }
</script>

Upvotes: 0

Deepak A
Deepak A

Reputation: 1636

$("#pax").change(function(e) {
  var price = 100;
  $("#total").html($(this).val() * price)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="pax">
  <option value='0'>Select Pax</option>
  <option value='1'>1 Pax</option>
  <option value='2'>2 Pax</option>
  <option value='3'>3 Pax</option>
</select>
<p>Price per each: $100</p>
<p>Total: <span id="total"></span></p>

Upvotes: 0

Gary Thomas
Gary Thomas

Reputation: 2331

You can use vanilla JS addEventListener to update the calculation and not AJAX.

// Store HTML elements in JS variables
const paxSelectEle = document.getElementById("pax-select");
const totalPriceEle = document.getElementById("total-price");

// Listen for a change in #pax-select 
paxSelectEle.addEventListener("change", () => {
  // Set the HTML of the total price to
  // 100 * #pax-select value
  totalPriceEle.innerHTML = 100 * paxSelectEle.value;
});
<!-- drop down selection -->
<select id="pax-select">
  <option value='1'>1 Pax</option>   
  <option value='2'>2 Pax</option>
  <option value='3'>3 Pax</option>
</select>

<p>Price per each: $100</p>

<!-- calculating here -->
<p>Total price: $<span id="total-price">100</span></p>

Upvotes: 1

Related Questions