Alternative way in (.on(input, function)) - php

Question

I am having a problem with this. My code is working fine but I use it to update then now I have a problem because value is already set.
In this code :
$('#principal').on('input', function() {
calculate();
});
$('#interest').on('input', function() {
calculate();
});
it works when you input a value on a field. But what if I have this code :
<input class="form-control number" name="principal" id="principal" type="text" value="<?php print $fetch['principal']; ?>" required/>
<input class="form-control number" name="interest" id="interest" type="text" value="<?php print $fetch['interest']; ?>" required/>
Value is already set. What code should I use in JQUERY to execute the code without type or editing value from input field.
Sample Output: Edit the value of Principal (What I want is to run compute without clicking or editing something)
$('#principal, #interest').on('input', function() {
calculate();
});
function calculate(){
var principal = $('#principal').val();
principal = principal.replace(/,/g, "");
principal = parseInt(principal);
var interest = $('#interest').val();
interest = interest.replace(/,/g, "");
interest = parseInt(interest);
var total = "";
var total_interest = "";
if(isNaN(interest) || isNaN(principal)){
total_interest = " ";
total = " ";
}
else{
total_interest = (interest / 100) * principal;
total = (interest / 100) * principal + principal;
}
var num = total;
num = addCommas(num);
$('#total').val(num);
var num_interest = total_interest;
num_interest = addCommas(num_interest);
$('#total_interest').val(num_interest);
function addCommas(nStr) {
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
}
$('.number').keyup(function(event){
// skip for arrow keys
if(event.which >= 37 && event.which <= 40) return;
// format number
$(this).val(function(index, value) {
return value
.replace(/\D/g, "")
.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Principal:
<input class="form-control number" name="principal" id="principal" type="text" value="9000" required/>
<br><br>
Interest:
<input class="form-control number" name="interest" id="interest" type="text" value="10" required/>
<br><br>
Total Interest:
<input class="form-control number" name="total_interest" id="total_interest" type="text" readonly/>
<br><br>
Total Payment
<input class="form-control number" name="total" id="total" type="text" readonly/>

Answer 1

Simply do this:
calculate();
...in code at the top level of your script. Make sure your script is at the end of body, just before the closing </body> tag.
Example:
function calculate() {
console.log(
"calculating with " +
$("#principal").val() +
" and " +
$("#interest").val()
);
}
$('#principal').on('input', function() {
calculate();
});
$('#interest').on('input', function() {
calculate();
});
calculate();
<input class="form-control number" name="principal" id="principal" type="text" value="42" required/>
<input class="form-control number" name="interest" id="interest" type="text" value="3.7" required/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Side note: You can simplify and consolidate your on calls:
$('#principal, #interest').on('input', calculate);
function calculate() {
console.log(
"calculating with " +
$("#principal").val() +
" and " +
$("#interest").val()
);
}
$('#principal, #interest').on('input', calculate);
calculate();
<input class="form-control number" name="principal" id="principal" type="text" value="42" required/>
<input class="form-control number" name="interest" id="interest" type="text" value="3.7" required/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Here's the snippet you added to your answer, with
calculate();
...added to the end:
$('#principal, #interest').on('input', function() {
calculate();
});
function calculate(){
var principal = $('#principal').val();
principal = principal.replace(/,/g, "");
principal = parseInt(principal);
var interest = $('#interest').val();
interest = interest.replace(/,/g, "");
interest = parseInt(interest);
var total = "";
var total_interest = "";
if(isNaN(interest) || isNaN(principal)){
total_interest = " ";
total = " ";
}
else{
total_interest = (interest / 100) * principal;
total = (interest / 100) * principal + principal;
}
var num = total;
num = addCommas(num);
$('#total').val(num);
var num_interest = total_interest;
num_interest = addCommas(num_interest);
$('#total_interest').val(num_interest);
function addCommas(nStr) {
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
}
$('.number').keyup(function(event){
// skip for arrow keys
if(event.which >= 37 && event.which <= 40) return;
// format number
$(this).val(function(index, value) {
return value
.replace(/\D/g, "")
.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
});
});
calculate();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Principal:
<input class="form-control number" name="principal" id="principal" type="text" value="9000" required/>
<br><br>
Interest:
<input class="form-control number" name="interest" id="interest" type="text" value="10" required/>
<br><br>
Total Interest:
<input class="form-control number" name="total_interest" id="total_interest" type="text" readonly/>
<br><br>
Total Payment
<input class="form-control number" name="total" id="total" type="text" readonly/>

Answer 2

You can calculate the result from the server
so from PHP side do the calculate() method and just print it into the result field. as you did with the values, or after your code loaded from js.
or you can use jQuery trigger
$(document).ready(function () {
$('#principal').trigger('input');
$('#interest').trigger('input');
}