Question 36785 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

I am looking for multiple percentage change calculator with same codes. Jquery

I developed a percentage change calculator with jquery. It is working file. But problem is, I can’t make multiple calculator with same jquery codes. Now each calculator need special codes and class for it. Is it possible muliple calculator without adding any extra codes ? Codepen preview : https://codepen.io/toolsim/pen/ZEoYbgY . Please help me…

$(document).on("change keyup blur live", ".ChangeCalulator", function() { // For:- = Topper To Current %
  ///////////////////
  var first = Number($('.From101').val()); // = Topper Price
  var second = Number($('.To101').val()); // = Current Price
  var minus = second - first; // 2000 - 1000 = {1000 = minus}
  var divide = (minus / first); // 1000 / 1000 = 1
  var multiply = divide * 100; // 1 * 100 = 100%
  $('.Result101').val(Number(multiply).toFixed(2)); // = Topper to Current %
  ///////////////////////
  var first = Number($('.From102').val()); // = Topper Price
  var second = Number($('.To102').val()); // = Current Price
  var minus = second - first; // 2000 - 1000 = {1000 = minus}
  var divide = (minus / first); // 1000 / 1000 = 1
  var multiply = divide * 100; // 1 * 100 = 100%
  $('.Result102').val(Number(multiply).toFixed(2)); // = Topper to Current %
});
/////////////////////////
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input type="text" class="ChangeCalulator From101" value="">
<input type="text" class="To101" value="25000">
<input type="text" class="Result101" value="">
<br><br>
<input type="text" class="ChangeCalulator From102" value="">
<input type="text" class="To102" value="25000">
<input type="text" class="Result102" value="">
<br><br>
Tags:

2

Answers


  1. 0

    Yes, treat each one individually, by wrapping it inside a container .section. Use an event handler on each of the required inputs, use input event, then by finding parent element you can find other elements in same "line".

    var func_change = function() {
  var input = this;
  var parent = this.closest(".section")

  var first = Number(parent.querySelector('.From101').value);
  var second = Number(parent.querySelector('.To101').value);
  var minus = second - first;
  var divide = (minus / first);
  var multiply = divide * 100;
  parent.querySelector('.Result101').value = (Number(multiply).toFixed(2));

};

document.querySelectorAll(".ChangeCalulator").forEach(function(elem) {
  elem.addEventListener("input", func_change);
});

// trigger "remotely"
func_change.call (document.querySelector('.From101'))
    <div class="section">
  <input type="text" class="ChangeCalulator From101" value="">
  <input type="text" class="ChangeCalulator To101" value="25000">
  <input type="text" class="Result101" value="">
</div>
<br>
<div class="section">
  <input type="text" class="ChangeCalulator From101" value="">
  <input type="text" class="ChangeCalulator To101" value="25000">
  <input type="text" class="Result101" value="">
</div>
    Login or Signup to reply.
  2. 0

    You can try following code:

    For HTML:

    <div class="section">
  <input type="text" class="ChangeCalulator From101" value="">
  <input type="text" class="To101" value="25000">
  <input type="text" class="Result101" value="">
</div>
<br>
<div class="section">
  <input type="text" class="ChangeCalulator From101" value="">
  <input type="text" class="To101" value="25000">
  <input type="text" class="Result101" value="">
</div>

    For Jquery:

    $(document).on("change keyup blur live", ".ChangeCalulator", function() {// For:- = Topper To Current %
  let formContainer = $(this).closest('.section')

  var first = Number($(formContainer).find('.From101').val()); // = Topper Price
  var second = Number($(formContainer).find('.To101').val()); // = Current Price
  var minus = second - first; // 2000 - 1000 = {1000 = minus}
  var divide = (minus / first); // 1000 / 1000 = 1
  var multiply = divide * 100; // 1 * 100 = 100%
  $(formContainer).find('.Result101').val(Number(multiply).toFixed(2)); 

});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search