I created 3 Javascript functions to perform calculations and show result in 3 textboxes , When I save this page and reopen it ->it does not pull the calculated values in respective text boxes unless I move my mouse over them or click on them. I have used window.onload method with the intention that it will run the function as the page opens. I am using onKeyUp and onMouseMove event Listeners , maybe that is the cause of the issue. If so, which event listener should I use to perform the operation.
<div class="form-group">
@Html.Label("Admin Fee(5% of Total Amount of FNLCP Funding Used) ", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextBox("AdminFeeWorkPlan", "", "{0:c}", new { @class = "form-control", id = "calculateAdminFee", @onKeyUp = "findTotal", @onMouseMove = "findTotal()" })
<script type="text/javascript">
function AdminFeee() {
var pullValue = document.getElementById('res').value || "0";
var output = (5/100) * parseFloat(pullValue);
if (!isNaN(output)) {
document.getElementById('calculateAdminFee').value = output;
}
}
window.onload = AdminFeee();
</script>
</div>
</div>
<div class="form-group">
@Html.Label("Total ", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextBox("FinalTotal", "", "{0:c}", new { @readonly="readonly", @class = "form-control", id = "calculateTotal" })
<script type="text/javascript">
function findTotal() {
var one = document.getElementById('res').value || "0";
var two = document.getElementById('calculateAdminFee').value || "0";
var output2 = parseFloat(one)-parseFloat(two) ;
if (!isNaN(output2)) {
document.getElementById('calculateTotal').value = output2;
}
}
window.onload = findTotal();
</script>
</div>
</div>