How to update the price onchange of the select value

Question

I need to change the value of select option to the value selected in the select field and also i need to update the price on change of the select option , How to do by using jquery

$a =5000;
$b=225;
 $c=25;

                          <p> base fair echo $a</p>
 <p id='options'>value of select option  250</p>// change price depending on select option 
     <p> tax </p>                       echo $b
  <p>other charges</p>                  echo  $c
    <p>Total price  </p>               echo $a+250+$b+$c// change price once the select option changes 

  <select>
 <option value="250">250</option>
  <option value="300">300</option>
<option value="350">350</option>
  <option 400="audi">400</option>
</select>

There are duplicates of this question. http://stackoverflow.com/questions/4480637/how-to-change-a-selections-options-based-on-another-select-option-selected — Amit Ray, May 16 '16 at 07:23

score 0 · Answer 1 · answered May 16 '16 at 07:42

Try this:

Html:

<?php 
$a =5000;
$b=225;
$c=25;
?>

<p>base fair <span id="basicVal"> <?php echo $a ?> </span> </p> 
<p id='options'>value of select option  <span id="optionVal"> 250 </span> </p> 
<p>tax </p> <span id="taxVal"> <?php echo $b ?> </span>
<p>other charges <span id="otherVal"> <?php echo  $c; ?> </span> </p>
<p>Total price  </p> 
<br /><span id="total" ><?php echo $a+250+$b+$c ?> </span>

<select id="selection">
 <option value="250">250</option>
 <option value="300">300</option>
 <option value="350">350</option>
 <option value="400">400</option>
</select>

Jquery:

$("#selection").change(function() {
        var val = parseInt($(this).val());
        $("#optionVal").text(val);
        var basVal = parseInt($("#basicVal").text());
        var tax = parseInt($("#taxVal").text());
        var other_changes = parseInt($("#otherVal").text());
        var total = basVal + val + tax + other_changes;
        $("#total").text(total);
});

score 0 · Answer 2 · answered May 16 '16 at 07:44

You can achieve this by this simple code...

Take the total of $a,$b,$c in a hidden input and on change of select box get the value of selected option and value of $a,$b,$c hidden input, add both the values and and change the html of total and also set the total in hidden field for form submission...

<?php 
$a =5000;
$b= 225;
$c= 25;
$abc_toal = 5000+225+25;
?>
<input type="hidden" name="abc_total" id="abc_total" value="<?php echo $abc_toal; ?>" />
<p> base fair :  5000</p>
<p> Select Price 
    <select  id="price" >
        <option value="250">250</option>
        <option value="300">300</option>
        <option value="350">350</option>
        <option value="400">400</option>
    </select> 
</p>
<p> tax : 225</p>
<p>other charges : 25</p>

<p id="total_html" >Total price : 5500 </p>
<input type="hidden" id="total" />

Script code

<script>
$(document).ready(function(){
    $('#price').change(function(){
        var abc_total = parseInt($('#abc_total').val());
        var selected_price = parseInt($(this).val());
        var total = (abc_total+selected_price);

        $('#total_html').html('Total price : '+total );
        $('#total').val(total);

    });
});
</script>

LIVE DEMO

How to update the price onchange of the select value

2 Answers2