CODEWITHSUNDEEP
jquery
Wilf
Wilf

Reputation: 2315

Auto calculate form with jquery on select change

I want to autocalculate the sum of cost listed in the table. With the change of select menu. So I coded:

$(function() {
  var cost = $('#cost').data('val');//store cost from data-val
  $('#vat').html($(cost) * 1.07);//calculate vat from $cost
  var vat=$('#vat').val();
  //select
  $('select').on('change','#trn', function() {
    var optionSelected = $(this).find("option:selected");
    var trn = optionSelected.val();
        $('#total').html($(cost).val+$('vat').val+$('trn').val());

  })
});

But the script is not working. Somehow no error show in console.

fiddle : https://jsfiddle.net/nobuts/bwpc8tfh/13/

Upvotes: 0

Views: 448

Answers (3)

fdomn-m
fdomn-m

Reputation: 28611

Frequently (not always) when you get no errors in the console, it can mean your jquery selector is not finding the elements you expect it to find.

When you use event delegation, the 2nd parameter selects the child elements, eg:

$(document).on("change", "select" ...

in this case, your code:

$('select').on('change','#trn',

is attempting to find #tr as a child of all selects - it's not a child, it is the select. Change to:

$("#tr").on('change', function() ...

or

$(document).on('change', '#trn', function() ...

Once you have that fixed, you will need to change 

$('#total').html($(cost).val+$('vat').val+$('trn').val());

to

$('#total').text(cost+$('#vat').text()*1+$('#trn').val()*1);

(#vat is a span so uses .text() to get the value and missing #)

Updated fiddle: https://jsfiddle.net/28xdf63g/

Upvotes: 2

Gowtham Alan
Gowtham Alan

Reputation: 234

$(function() {
  var cost = $('#cost').data('val');//store cost from data-val
  $('#vat').html(cost * 1.07);//calculate vat from $cost
  var vat=$('#vat').val();
  //select

  $("#trn").change(function () {

    var optionSelectedVal = $(this).val();
    console.log(optionSelectedVal);
    var trn = optionSelectedVal;
        $('#total').html(parseInt(cost)+parseInt($('#vat').html())+parseInt(optionSelectedVal));
  console.log(parseInt(cost)+parseInt($('#vat').html())+parseInt(optionSelectedVal));
 })   

});

fiddle

Upvotes: 1

Kalaiselvan
Kalaiselvan

Reputation: 2134

hope it will be helpful to you

$("document").ready(function(){
  var cost = $('#cost').data('val');//store cost from data-val
  $('#vat').html(parseInt(cost) * 1.07);//calculate vat from $cost  
  $('#trn').change( function() {
      var optionSelected = $(this).val();
      var vat=$('#vat').html();
      var tot=parseInt(cost)+parseInt(optionSelected)+parseInt(vat);
      $('#total').html(tot);    
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-boredered">
  <tr>
    <th>Cost</th>
    <th><span id="cost" data-val="1000">1,000</span></th>
  </tr>
  <tr>
    <td>VAT</td>
    <td><span id="vat"></span></td>
  </tr>
  <tr>
    <td>Deliver</td>
    <td>
      <select id="trn">
      <option value="100">100</option>
      <option value="200">200</option>
      <option value="300">300</option>
    </select>
    </td>
  </tr>
  <tr>
    <td>Total</td>
    <td><span id="total">xxx</span></td>
  </tr>
</table>

Upvotes: 2

Related Questions