Jquery calculation on Ajax request

Question

I have several inputs and what I want to do is calculate them on real time, so for example if you change the per_day input depending on that input all other should calculate dynamically , also if I change the per_year input all other should take the value depending on the value of that input, and It works fine till I get the ajax request, on success I set the value of 4 inputs and based on that four other inputs should take the value depending on these four but it sets only these four inputs and calculation doesn't work.

<input id="per_hour" placeholder="per_hour" class="empCosts" type="number">
<input id="hour" placeholder="hour" class="empCosts" type="number">
<input id="per_day" placeholder="per_day" class="empCosts" type="number">
<input id="day" placeholder="day" class="empCosts" type="number">
<input id="per_month" placeholder="per_month" class="empCosts" type="number">
<input id="months" placeholder="months" class="empCosts" type="number">
<input id="per_year" placeholder="per_year" class="empCosts" type="number">

and I calculate them like this

function updateCosts(id) {
    var perHour = parseInt($('#per_hour').val());
    var hours = parseInt($('#hour').val());
    var perDay = parseInt($('#per_day').val());
    var days = parseInt($('#day').val());
    var perMonth = parseInt($('#per_month').val());
    var month = parseInt($('#months').val());
    var perYear = parseInt($('#per_year').val());
    var perdayVal = perHour * hours;
    var perMonthVal = perDay * days;
    var perYearVal = perMonth * month;
    var perHourVal = perDay / hours;

    if(id === 'per_day') {

        $("#per_hour").val(Math.ceil(perHourVal));
    }
    else if(id === 'per_month'){
        perdayVal = Math.ceil(perMonth / days);
        $("#per_hour").val(Math.ceil(perHourVal));
    }
    else if(id === 'per_year'){
        perMonthVal = Math.ceil(perYear / month);
        perdayVal = Math.ceil(perMonth / days);
        $("#per_hour").val(Math.ceil(perHourVal));
    }

    id !== "per_day" && $("#per_day").val(perdayVal);
    id !== "per_month" && $("#per_month").val(perMonthVal);
    id !== "per_year" && $("#per_year").val(perYearVal);

}

and this to wok on real time i call it like this

$('.empCosts').on('input', function () {
        var id = $(this).attr('id');
        updateCosts(id);
    });

this is my ajax

$.ajax({
            url:"/red/satu",
            type: "GET",
            data: {user: user},
            success: function (data) {
                $('#per_hour').val(fer.pay.per_hour);
                $("#hour").val(fer.pay.hours);
                $('#day').val(fer.pay.days);
                $("#months").val(fer.pay.months);
                updateCosts("per_day");

            }

        });

and on ajax success if I call the function updateCosts("per_day") 3 times it works , with one time it doesn't, why is this so? Ajax is loaded first just for info

Answer 1

The main problem is that your calculation logic isn't well thought out. The first time updateCosts() is called, it calculates the per day value correctly, but the per month and per year calculations are based on blank values and therefore evaluate to NaN. That's why you have to call it 3 times in order for the values to stabilize. Then you have a few haphazard calculations after that which you carry out based on which field was modified, and they probably recalculate some of the fields correctly, but not all of them.

A better strategy is to pick one per-N value as the baseline, determine the new value for that based on whichever field was modified, and then use that as the starting point for the rest of the calculations.

The following appears to work:

function updateCosts(id) {
  var perHour = parseInt($('#per_hour').val());
  var hours = parseInt($('#hour').val());
  var perDay = parseInt($('#per_day').val());
  var days = parseInt($('#day').val());
  var perMonth = parseInt($('#per_month').val());
  var month = parseInt($('#months').val());
  var perYear = parseInt($('#per_year').val());

  var perHourVal;
  if (id === 'per_day') {
    perHourVal = perDay / hours;
  } else if (id === 'per_month') {
    perHourVal = perMonth / days / hours;
  } else if (id === 'per_year') {
    perHourVal = perYear / month / days / hours;
  } else {
    perHourVal = perHour;
  }

  var perDayVal = perHourVal * hours;
  var perMonthVal = perDayVal * days;
  var perYearVal = perMonthVal * month;

  $("#per_hour").val(perHourVal);
  $("#per_day").val(perDayVal);
  $("#per_month").val(perMonthVal);
  $("#per_year").val(perYearVal);
}

$('.empCosts').on('input', function(e) {
  e.stopPropagation();
  var id = $(this).attr('id');
  updateCosts(id);
});

$('#per_hour').val(12);
$("#hour").val(5);
$('#day').val(7);
$("#months").val(9);

updateCosts('per_hour');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class='empCosts'>
  <tr>
    <td>Per Hour</td>
    <td>
      <input id="per_hour" placeholder="per_hour" class="empCosts" type="number">
    </td>
    <td>Hours</td>
    <td>
      <input id="hour" placeholder="hour" class="empCosts" type="number"></td>
  </tr>
  <tr>
    <td>Per Day></td>
    <td>
      <input id="per_day" placeholder="per_day" class="empCosts" type="number"></td>
    <td>Days</td>
    <td>
      <input id="day" placeholder="day" class="empCosts" type="number"></td>
  </tr>
  <tr>
    <td>Per Month</td>
    <td>
      <input id="per_month" placeholder="per_month" class="empCosts" type="number"></td>
    <td>Months</td>
    <td>
      <input id="months" placeholder="months" class="empCosts" type="number"></td>
  </tr>
  <tr>
    <td>Per Year</td>
    <td>
      <input id="per_year" placeholder="per_year" class="empCosts" type="number"></td>
    <td></td>
    <td></td>
  </tr>
  </div>

As a side note, please don't do this as a half-a**ed way of writing an if statement:

id !== "per_day" && $("#per_day").val(perdayVal);

JavaScript has a syntactical construct for conditionally executing code. It's called an if-statement.

Answer 2

How about keyup events?

$( "#input_source" )
  .keyup(function() {
    var source_value = $( this ).val();

    //Perform calculations here!!!

    $( "#input_target" ).val( source_value );
  })
  .keyup();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
input_source:
<br>
<input id="input_source" type="text" placeholder="type here" value="">
<br>
input_target:
<br>
<input id="input_target" type="text" placeholder="" value="">
</form>