Checkbox not working on checked to add values

Question

I have created calculation system project with javascripts all things are good calculation done perfectly tax include perfectly but tax not included when I click on checkebox, it add when I type something in input field, I want values changes on when I clicked on checkbox and even when I type something

html


  
    
    
  



  
  Included Tax


  Total:-

javascript

$('input').keyup(function(){ // run anytime the value changes
  var BMS_qty  = Number($('#BMS_qty').val());
  var BMS_price = Number($('#BMS_price').val());
  if(document.getElementById("tax").checked) {
      var tax = 0.17;
  } else {
    tax = 0;
  }
  var subtotal = BMS_qty * BMS_price;
  var total = tax * subtotal;
  $('#total_expenses1').html(total + subtotal); // add them and output it
   // add them and output it
 });

user_82548 · Answer

The problem is that the keyup() method will only act on an when the space key is pressed to activate it.

To avoid this kind of problem I'd suggest switching the code to react to input events (which covers any event in which the value/state of an is changed).

One approach to solving the problem is below, with explanatory comments included:

// we select all  elements regardless of their type attribute,
// and bind the anonymous function of the on() method as the event-handler
// for the 'input' event:
$('input').on('input', function() {

  // switching to the use of const to declare variables that shouldn't
  // change after they've been defined, and we use parseInt() instead
  // of Number() to convert those the entered-values into numbers
  // supplying the radix (base) argument of 10 because we're working
  // with base-10 numbers (this is largely a personal preference, I
  // don't think there's a particular argument for, or against, this
  // change):
  const BMS_qty = parseInt($('#BMS_qty').val(), 10),
    BMS_price = parseFloat($('#BMS_price').val()),
    // here we use a conditional (ternary) operator, in which we
    // assess - using the .is() method - whether the element with
    // the id of "tax" is checked.
    // If it is checked the value of tax is 0.17, if it is not
    // the value is 0:
    tax = $('#tax').is(':checked') ? 0.17 : 0;

  // using let to declare variables that may need to change if
  // the calculations/results need to be modified in production:
  let subtotal = BMS_qty * BMS_price,
    total = tax * subtotal;
  
  // adding the values, andd writing it the element with an
  // id equal to "total_expenses", though I've switched to using
  // the text() method to avoid accidentally trying to insert any
  // HTML elements in the future:
  $('#total_expenses1').text(total + subtotal);
});


  
    
    
  



  
  Included Tax


  Total:-

JS Fiddle demo.

References:

JavaScript:

user_401278 · Answer

You need to use on() to get events you need

I think, you also need to change Number() by parseInt()

$(document).on('keyup keypress keydown change', 'input[name="BMS_qty"], input[name="BMS_price"], input[name="taxamount"]', function(){ // or keypress I have the same result
  var BMS_qty  = parseInt($('#BMS_qty').val());
  var BMS_price = parseInt($('#BMS_price').val());
  if(document.getElementById("tax").checked) {
      var tax = 0.17;
  } else {
    tax = 0;
  }
  var subtotal = BMS_qty * BMS_price;
  var total = tax * subtotal;
  $('#total_expenses1').html(total + subtotal); // add them and output it
});



  
    
    
  

            

  
  Included Tax

  
  Total:- 
  0

Checkbox not working on checked to add values

2 Answers