Have you tried to use "Number()" in your values before the calculation? I believe it can be a typecasting problem.
calculation problem in javascript, showing NaN error
Guys iam working with a project Inventory control.
i have a purchase order form.
in that form i have array of textboxes in row format.
so if admin needs he can add new rows.
this is my blade file
<td>
<input type="text" class="rate_per_kg" name="total_qty[]" />
</td>
<td>
<input type="text" class="rate_per_kg" name="rate_per_kg[]" />
</td>
<td>
<input type="text" class="discount_amount" name="discount_amount[]" />
</td>
<td>
<input type="text" class="total_amount" name="total_amount[]" />
</td>
<td>
<input type="text" class="grand_total" name="grand_total" />
</td>
i tried validation for this that worked fine for me.
this is the validation for total_rate[]
var total_rate = document.getElementsByName('total_rate[]');
for (var i = 0; i < total_rate.length; i++) {
if (total_rate[i].value == "") {
alert("Fill the Total Rate");
total_rate[i].focus();
return false;
}
}
this works fine. if admin leaves the total_rate[] empty then alert is displayed and focused.
Now my question is i need to perform calculation also.
so i followed the same technique
whats my calculation is. the total_qty[] column will be filled automatcaiily when page refreshed.
so when admin enters the total_rate[]. so total_qty/total_rate the total_rate divided by total_qty must be done and the result must be displayed in the third column rate_per_kg[]
so for this i followed.
for (var i = 0; i < total_rate.length; i++) {
var total_rate= total_rate[i].value;
var total_qty = total_qty [i].value;
var rate_per_kg=total_rate/total_qty ;
rate_per_kg[i].value = rate_per_kg;
}
this works for me for the first row only.
but in the second row rate_per_kg NaN is displayed.
and also there is a error in the console
1:472 Uncaught TypeError: Cannot read property 'length' of undefined
why?
that calculation must be done for the first row only. how this is possible??
this is the screen shot of that
Refer: https://imgur.com/DQOLsv7
actually i asked the question more that 3 times in the forum. but i cant get it.
now i have the loop and also the calculation.
i think there is a small error.
ithink the for loop is running for all the rows.
Kindly some one help please.
@diegoaurino thank you for you response.
what i did is
I tried some like this and it worked...
//in my <td>
onkeyup="calculation()" // for all the textbox i given this onkeyup() event
// in my blade file js
var total_rate = document.getElementsByName('total_rate[]');
var pqty = document.getElementsByName('p_qty[]');
var rate_per_kg = document.getElementsByName('rate_per_kg[]');
var gst_percent = document.getElementsByName('gst_percent[]');
var gst_amt = document.getElementsByName('gst_amt[]');
var disc_percent = document.getElementsByName('disc_percent[]');
var disc_amt = document.getElementsByName('disc_amt[]');
var added_amount = document.getElementsByName('added_amount[]');
var total_amount = document.getElementById('total_amount');
total_amount.value = 0;
for (var i = 0; i < rate_per_kg.length; i++) {
rate_per_kg[i].value = parseInt(total_rate[i].value) / parseInt(pqty[i].value);
gst_amt[i].value = parseInt(total_rate[i].value) * (gst_percent[i].value / 100);
disc_amt[i].value = parseInt(total_rate[i].value) * (disc_percent[i].value / 100);
added_amount[i].value = (parseInt(total_rate[i].value) + parseInt(gst_amt[i].value)) - parseInt(disc_amt[i].value) ;
total_amount.value = parseInt(total_amount.value) + parseInt(added_amount[i].value);
}
this gave the output... calculated the values and also total the final value..
Please or to participate in this conversation.