I want to update a id="total_fee" input on changing the values in input fields.
This is my HTML;
<td class="'.$bg_trow.$challan_created_shade.'" align="center">
<div>
<div style="font-size: 11px;">Actual Fee</div>
<input type="text" class="small_input_box" id="actual_fee_'.$f['fid'].'" style="background: #EFEFEF; border: 1px solid #000; color: #000;" name="actual_fee" size="5" value="1400" readonly="readonly">
</div>
<div>
<div style="font-size: 11px;">Monthly Fee</div>
<input onchange="findTotal_'.$f['fid'].'()" type="text" class="small_input_box fee_'.$f['fid'].'" name="monthly_fee" size="5" value="1000">
</div>
</td>
<td class="'.$bg_trow.$challan_created_shade.'" align="center">
<div>
<div style="font-size: 11px;">Paper Money</div>
<input onchange="findTotal_'.$f['fid'].'()" type="text" class="small_input_box fee_'.$f['fid'].'" name="paper_money_fee" size="5" value="">
</div>
<div>
<div style="font-size: 11px;">Previous Balance</div>
<input onchange="findTotal_'.$f['fid'].'()" type="text" class="small_input_box fee_'.$f['fid'].'" name="previous_balance" size="5" value="">
</div>
</td>
<td class="'.$bg_trow.$challan_created_shade.'" align="center">
<div>
<div style="font-size: 11px;">Total Fee</div>
<input type="text" class="small_input_box" style="background: #EFEFEF; border: 1px solid #000; color: #000;" name="total_fee" id="total_fee_'.$f['fid'].'" size="5" value="" readonly="readonly">
</div>
</td>
and this is my JavaScript function;
function findTotal_'.$f['fid'].'() {
const fees = document.querySelectorAll(".fee_'.$f['fid'].'");
const total = document.querySelector("#total_fee_'.$f['fid'].'");
let sum = 0;
fees.forEach((fee) => {
if (fee.valueAsNumber) {
sum += fee.valueAsNumber;
}
});
total.value = sum;
}
When the values are changed in input field, it is returning zero. I don't know why. Plz help.
You can use fee.value instead of using fee.valueAsNumber and also you should use valid identifiers (name) for your functions ie. the name findTotal_'.$f['fid'].' is not a valid one.
Okay..
I have done it by meself, by changing the javascript function to this;
function findTotal_'.$f['fid'].'()
{
const fees = document.querySelectorAll(".fee_'.$f['fid'].'");
const total = document.querySelector("#total_fee_'.$f['fid'].'");
let sum = 0;
fees.forEach(fee => {
if(fee.value)
{
sum += + fee.value;
}
});
total.value = sum;
}
Thank you everyone.