I am facing an issue where I need a value to be updated as I enter values into input fields.
There is also a variable pulled from a DB in laravel framework.
I have a field which takes the total amount due and applies the eftpos surcharge to the amount as a reference for how much is required to be paid via eftpos.
I would like to update this field based on the new balance is Cash/Cheque or Scholarship amounts are added (as this are not subject to the eftpos surcharge). The idea is to ensure we are correctly applying the EFTPOS Surcharge to the eftpos amount.
HTML Code
<table class="table">
<thead class="text-primary">
<th class="text-center">Method</th>
<th class="text-center">Amount</th>
<th></th>
</thead>
<tbody>
<tr>
<td class="text-center">EFTPOS</td>
<td class="text-center">$ <input type="number" step="0.01" name="eftpos"></td>
<td class="text-center"><a id="eftpos"> ${{ number_format(($income + $student->AdditionalItems->where('paid', 0)->sum('amount'))*(1+$eftpos), 2)}}</a> - Including Surcharge</td>
</tr>
<tr>
<td class="text-center">Cash</td>
<td class="text-center" id="cash">$ <input type="number" step="0.01" name="cash"></td>
<td></td>
</tr>
<tr>
<td class="text-center">Cheque</td>
<td class="text-center" id="cheque">$ <input type="number" step="0.01" name="cheque"></td>
<td></td>
</tr>
<tr>
<td class="text-center">Scholarship</td>
<td class="text-center" id="scholarship">$ <input type="number" step="0.01" name="scholarship"></td>
<td></td>
</tr>
</tbody>
</table>
Javascript Code
<script type="text/javascript">
window.onload = function () {
var cash = document.getElementById('cash');
cheque = document.getElementById('cheque');
scholarship = document.getElementById('scholarship');
total = document.getElementById('total');
eftpos = 1 + {!! json_encode($eftpos, JSON_HEX_TAG) !!};
trigFunc = function(){
eftpos.value = (total.value - (cash.value + cheque.value + scholarship.value))*eftpos.value;
document.getElementById('eftpos').innerHTML = eftpos.value;
console.log(eftpos.value);
}
cash.onchange = trigFunc;
cheque.onchage = trigFunc;
scholarship.onchange = trigFunc;
}
The $eftpos is the passed by the laravel controller
Thanks in advance for your help
Related
I have the code below, its working outside WordPress, but when i add to the WordPress site the script fails. I have tried using a plugin and separating the code as shown, then putting the JS code separate
I am not sure where the problems is since am not good with JS.
Any one point me to the right direction and i will appreciate.
< script language = "JavaScript" >
function calculate() {
// Get the user's input from the form. Assume it is all valid.
// Convert interest from a percentage to a decimal, and convert from
// an annual rate to a monthly rate. Convert payment period in years
// to the number of monthly payments.
var principal = document.loandata.principal.value;
var interest = document.loandata.interest.value / 100 / 12;
var payments = document.loandata.years.value;
// Now compute the monthly payment figure, using esoteric math.
var x = Math.pow(1 + interest, payments);
var monthly = (principal * x * interest) / (x - 1);
// Check that the result is a finite number. If so, display the results.
if (!isNaN(monthly) &&
(monthly != Number.POSITIVE_INFINITY) &&
(monthly != Number.NEGATIVE_INFINITY)) {
document.loandata.payment.value = round(monthly);
document.loandata.total.value = round(monthly * payments);
document.loandata.totalinterest.value =
round((monthly * payments) - principal);
}
// Otherwise, the user's input was probably invalid, so don't
// display anything.
else {
document.loandata.payment.value = "";
document.loandata.total.value = "";
document.loandata.totalinterest.value = "";
}
}
// This simple method rounds a number to two decimal places.
function round(x) {
return Math.round(x * 100) / 100;
} <
/script>
<head>
<title>JavaScript Loan Calculator</title>
</head>
<form name="loandata">
<table border=0>
<tr>
<td colspan="3" th bgcolor="#0c77bb">
<font color=white><b>Enter Loan Information:</b></td>
</tr>
<tr>
<td></td>
<td bgcolor="#f1f1f1">Amount Borrowed:</td>
<td bgcolor="#f1f1f1"><input type="text" name="principal" size="12" onchange="calculate();"></td>
</tr>
<tr>
<td></td>
<td bgcolor="#f1f1f1">Monthly Interest Rate (%):</td>
<td bgcolor="#f1f1f1"><input type="text" name="interest" size="12" onchange="calculate();"></td>
</tr>
<tr>
<td></td>
<td bgcolor="#f1f1f1">Number of Monthly Payments:</td>
<td bgcolor="#f1f1f1"><input type="text" name="years" size="12" onchange="calculate();"></td>
</tr>
<tr>
<td bgcolor="#a0ce4e" colspan="2">
<input type="button" value="Compute" onclick="calculate();"> </td>
<td bgcolor="#cb4429"><input type="reset" value="Reset"></td>
</td>
</tr>
<tr>
<td bgcolor=""></td>
<td bgcolor="" </td>
</tr>
<tr>
<td th bgcolor="#0c77bb" colspan="3">
<b><font color=white>Payment Information:</b>
</td>
</tr>
<tr>
<td></td>
<td bgcolor="#f1f1f1">Your monthly payment will be:</td>
<td bgcolor="#f1f1f1"><input type="text" name="payment" size="12"></td>
</tr>
<tr>
<td></td>
<td bgcolor="#f1f1f1">Your total payment will be:</td>
<td bgcolor="#f1f1f1"><input type="text" name="total" size="12"></td>
</tr>
<tr>
<td></td>
<td bgcolor="#f1f1f1">Your total interest payments will be:</td>
<td bgcolor="#f1f1f1"><input type="text" name="totalinterest" size="12"></td>
</tr>
</table>
</form>
It happened i had the code twice, removing one solved the problem
I have a jquery code which calculates the total amount.
$("#quantity").on("change keyup paste", function() {
var quantity = $(this).val();
//$('#display').text(quantity);
})
$("#buy").on("change keyup paste", function() {
var buy = $(this).val();
})
var total_amnt = (((quantity * buy) * 5) / 100) + (quantity * buy);
$('#tot_amnt_display').text(total_amnt);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table class="table">
<tbody>
<tr style="text-align: center;">
<td>Quantity</td>
<td>Buy</td>
</tr>
<tr>
<td><input type="number" class="form-control" id="quantity" placeholder="Quantity" name="quantity"></td>
<td><input type="number" class="form-control" id="buy" placeholder="Buy Amount" name="buy"></td>
</tr>
</tbody>
</table>
<table class="table table-bordered table-dark">
<tbody>
<tr>
<td>Total Amount</td>
<td><span id="tot_amnt_display"></span></td>
</tr>
</tbody>
</table>
In the above code's result, it just shows NaN.
On Page Load
On Entering Values in the Input Box!
The default type of the value is of type string, you should convert the value to number. Also you do not need multiple event handler, simply pass the ids separated by comma.
Try the following way:
$("#quantity, #buy").on("change keyup paste", function() {
var quantity = Number($('#quantity').val());
var buy = Number($("#buy").val());
var total_amnt = (((quantity * buy) * 5) / 100) + (quantity * buy);
$('#tot_amnt_display').text(total_amnt);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table class="table">
<tbody>
<tr style="text-align: center;">
<td>Quantity</td>
<td>Buy</td>
</tr>
<tr>
<td><input type="number" class="form-control" id="quantity" placeholder="Quantity" name="quantity"></td>
<td><input type="number" class="form-control" id="buy" placeholder="Buy Amount" name="buy"></td>
</tr>
</tbody>
</table>
<table class="table table-bordered table-dark">
<tbody>
<tr>
<td>Total Amount</td>
<td><span id="tot_amnt_display"></span></td>
</tr>
</tbody>
</table>
Please check the code bellow. On #btnConfirm button click i have to grab each class="invTr" data-productid="1" then inside each of those tr i have to grab two td text which is- Quantity and Price Per Unit then make a store whole object in var Items = {}. In jquery code comments you will get a sample of object output i wanted to be. Anyone can make output like this from my current tr? The code i already have tried is like jquery bellow but i am stuck on here with error says push of undefined. Any idea to make output like this? Also anyone if can provide JSON object output that also great. Thanks in advance
Currently error i am getting is:
Cannot read property 'push' of undefined
Here is my js fiddle for quick try
HTML:
<table class="table table-hover table-sm">
<thead>
<tr>
<th scope="col">Title</th>
<th scope="col">Quantity</th>
<th scope="col">Price Per Unit</th>
<th scope="col">Total Price</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr class="invTr" data-productid="1"> <td>lavenda things</td> <td> <input type="number" class="form-control qty" style="width:75px;" pattern="[0-9]" min="1" max="10000" value="1"> </td> <td> 10.00 </td> <td> 20.55 </td> <td>pp</td>
</tr>
<tr class="invTr" data-productid="2"> <td>lavenda things</td> <td> <input type="number" class="form-control qty" style="width:75px;" pattern="[0-9]" min="1" max="10000" value="3"> </td> <td> 20.00 </td> <td> 20.55 </td> <td>pp</td>
</tr>
</tbody>
</table>
<button id="btnConfirm">Confirm</button>
Jquery:
//confirm button on click actions
$('#btnConfirm').on('click', function () {
var Items = {};
var invTrClassesObj = {};
var _invTrClasses = $('.invTr');
$.each(_invTrClasses, function (i, invTrClasse) {
invTrClassesObj.ProductId.push(invTrClasse.attr('data-productId'));
});
//console.log(Items); //I want output object like this-> { ProductId:1 { Price:10.00, Quantiry:1 }, ProductId:2 { Price:20.00, Quantiry:3 } }
});
invTrClassesObj.ProductId gives 'push' of undefined becasuse of invTrClassesObj.ProductId is not set yet.
I have added code to get your required JSON object output.
//confirm button on click actions
$('#btnConfirm').on('click', function () {
var x = document.querySelectorAll(".invTr");
//console.log(x);
var Items = {};
var invTrClassesObj = [];
var _invTrClasses = $('.invTr');
$.each(_invTrClasses, function (i, invTrClasse) {
invTrClassesObj.push(
{
'ProductId':invTrClasse.getAttribute('data-productId'),
'Price': $(this).find("td").eq(2).html(),
'Quantiry':$(this).closest('tr').find(".qty").val()
});
});
console.log(invTrClassesObj);
//console.log(Items); //I want output object like this-> { ProductId:1 { Price:10.00, Quantiry:1 }, ProductId:2 { Price:20.00, Quantiry:3 } }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover table-sm">
<thead>
<tr>
<th scope="col">Title</th>
<th scope="col">Quantity</th>
<th scope="col">Price Per Unit</th>
<th scope="col">Total Price</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr class="invTr" data-productid="1"> <td>lavenda things</td> <td> <input type="number" class="form-control qty" style="width:75px;" pattern="[0-9]" min="1" max="10000" value="1"> </td> <td> 10.00 </td> <td> 20.55 </td> <td>pp</td>
</tr>
<tr class="invTr" data-productid="2"> <td>lavenda things</td> <td> <input type="number" class="form-control qty" style="width:75px;" pattern="[0-9]" min="1" max="10000" value="3"> </td> <td> 20.00 </td> <td> 20.55 </td> <td>pp</td>
</tr>
</tbody>
</table>
<button id="btnConfirm">Confirm</button>
I am able to create dynamic textboxes on one button click but now the requirement is that we have to get values of that textboxes and send it to java class where I can use those values entered in the created dynamic textboxes but I am unable to do so.I have tried my best to solve this problem but I am stuck in getting values and sending it to action class.I have referred this link where umesh awasthi sir has answered but here it is for single value but how to get values from dynamically created and pass those and get it separately in action class.
Below is my javascript code :
<script>
function addFieldForDescription() {
alert("Inside Function");
var table = document.getElementById("addTable");
var tr = document.getElementById("addTables");
var a = table.rows.length;
alert(a);
var row = table.insertRow(a);
// var cell0=row.insertCell(0);
// cell0.innerHTML=a;
var input = document.createElement("input");
input.type = "text";
input.id="addDesc"+a;
input.size="40";
var br = document.createElement("br");
tr.appendChild(br);
tr.appendChild(input);
tr.appendChild(br);
}
function addFieldForAmount() {
alert("Inside Function");
var table = document.getElementById("addTable");
var tr = document.getElementById("addTables1");
var a = table.rows.length;
alert(a);
var row = table.insertRow(a);
// var cell0=row.insertCell(0);
// cell0.innerHTML=a;
var input = document.createElement("input");
input.type = "text";
input.id="addAmount"+a;
input.size="40";
var br = document.createElement("br");
tr.appendChild(br);
tr.appendChild(input);
tr.appendChild(br);
}
function submitValues()
{
alert("Inside Submit");
var amountId=document.getElementById("addTables");
alert(amountId.value);
for(var i=0;i<amountId.rows.length;i++)
{
var temp=document.getElementById("addDesc"+i);
alert(temp.value);
}
}
</script>
and below is my jsp code
<html>
<head>
</head>
<body>
<table class="responstable3" id="addTable">
<tr>
<th></th>
<th style="width: 60%;">Description <input
type="button" name="add" value="+"
onclick="addFieldForDescription()" id="addDesc0"
class="btn btn-warning" /> <input type="button"
value="Submit" onclick="submitValues()"/></th>
<th data-th="Amount"><span>Amount <input
type="button" name="add" value="+"
onclick="addFieldForAmount()" id="addAmount"
class="btn btn-warning" /></span></th>
</tr>
<tr>
<td> </td>
<td id="addTables"><input type="text" id="add" size="40" /><br></td>
<td id="addTables1"><input type="text" id="addAmount"
size="40" /><br></td>
</tr>
<tr>
<td colspan="2" style="padding: 0px;">
<table class="responstable4">
<tr>
<td style="text-align: left;">Pan No. :<input
type="text" name="invoiceVar.panNumber"
class="profarma_formtextbox1" /></td>
<td style="text-align: left;">Net Amount :</td>
</tr>
<tr>
<td style="text-align: left;">Service Tax No. :<input
type="text" name="invoiceVar.serviceTaxNumber"
class="profarma_formtextbox1" /></td>
<td style="text-align: left;">Service Tax # 14.00%</td>
</tr>
<tr>
<td style="text-align: left;"></td>
<td style="text-align: left;">SBC # 0.50%</td>
</tr>
<tr>
<td style="text-align: left;"></td>
<td style="text-align: left;">Total Amount</td>
</tr>
</table>
</td>
<td style="padding: 0px;">
<div ng-app>
<table class="responstable4">
<tr>
<td><input type="text" name="invoiceVar.netAmount"
class="profarma_formtextbox2" ng-model="a" /></td>
</tr>
<tr>
<td><input type="text" name="invoiceVar.serviceTax"
class="profarma_formtextbox2" value="{{a*0.14}}" /></td>
</tr>
<tr>
<td><input type="text" name="invoiceVar.sbcTax"
class="profarma_formtextbox2" value="{{a*0.005}}" /></td>
</tr>
<tr>
<td><input type="text"
name="invoiceVar.invoiceTotalAmount"
class="profarma_formtextbox2"
value="{{a--(a*0.14)--(a*0.005)}}" /></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td colspan="3" style="text-align: left;">Total Amount in
Words :</td>
</tr>
</table>
</body>
</html>[![error][2]][2]
and here it is how it looks like.yellow plus button will add textboxes in description and amount column and I have to call those values in action class.
Any help would be greatly appreciated .thank you :)
Suppose i have the table below and i want to add the column Credits to get its sum
<table id="tbl_semester11">
<thead>
<tr>
<th>Semester 1</th>
</tr>
</thead>
<thead>
<tr>
<th>Module Code</th>
<th>Module Name</th>
<th>Credits</th>
<th>Module %</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>MGMT1101C</td>
<td>Management Seminar</td>
<td id="txtcredit112" class="sum">3</td>
<td><input type="number" id="txtpercentage112" min="40" max="100" onchange="process([1,1,2,5]);"></td>
<td id="txtgrade112">D</td>
</tr>
<tr class="alt">
<td>HCA1105C</td>
<td>Computer Architecture</td>
<td id="txtcredit113" class="sum">4</td>
<td><input type="number" id="txtpercentage113" min="40" max="100" onchange="process([1,1,3,5]);"></td>
<td id="txtgrade113">D</td>
</tr>
<tr>
<td>PROG1115C</td>
<td>Object Oriented Software Development I</td>
<td id="txtcredit114" class="sum">4</td>
<td><input type="number" id="txtpercentage114" min="40" max="100" onchange="process([1,1,4,5]);"></td>
<td id="txtgrade114">D</td>
</tr>
<tr class="alt">
<td>MATH1103C</td>
<td>Decision Mathematics</td>
<td id="txtcredit115" class="sum">3</td>
<td><input type="number" id="txtpercentage115" min="40" max="100" onchange="process([1,1,5,5]);"></td>
<td id="txtgrade115">D</td>
</tr>
<tr>
<td>ITE1107C</td>
<td>Language and Communication Seminar</td>
<td id="txtcredit116" class="sum">3</td>
<td><input type="number" id="txtpercentage116" min="40" max="100" onchange="process([1,1,6,5]);"></td>
<td id="txtgrade116">D</td>
</tr>
<tr class="al">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td bgcolor="#b3ffb3"><b>S.P.A</b></td>
<td bgcolor="#4dff4d" id="spa11">40.7</td>
</tr>
</tbody>
</table>
Here is my JS
function getsum(arr) {
var sum = 0;
var tbl_id = 'tbl_semester' + arr[0] + arr[1];
$('#' + tbl_id + '.sum').each(function () {
sum += +(this).text()||0;
});
return sum;
arr is the same parameter as process i.e [1,1,3,5].The problem is that sum always returns 0
Your selector is wrong. If you want to select children with the .sum class, you should add a space between parent and children. Your function should be:
function getsum(arr) {
var sum = 0;
var tbl_id = 'tbl_semester' + arr[0] + arr[1];
$('#' + tbl_id + ' .sum').each(function () {
sum += parseInt($(this).text())||0;
});
return sum;
}
Also, I used parseInt() because .text() returns a string. That way you are sure to have a NaN value or an actual integer.