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
Related
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
Trying to create a Javascript for future value calculation. This is the code im using but it is not returning a value. Don't know where the code is wrong. Has user input investment, interest rate, monthly payment added, and terms. After that code how do I create a for loop to create an amortization schedule.
<body>
<form name="fv">
<table>
<tr><td colspan="3"><b>Enter Investment Information:</b></td></tr>
<tr>
<td>1)</td>
<td>Amount of the Investment (any currency):</td>
<td>
<input type="text" name="investment" size="12"
onchange="calculate();">
</td>
</tr>
<tr>
<td>2)</td>
<td>percentage rate of interest:</td>
<td>
<input type="text" name="interest" size="12"
onchange="calculate();">
</td>
</tr>
<tr>
<td>3)</td>
<td>Monthly Payment Amount:</td>
<td>
<input type="text" name="monthly" size="12"
onchange="calculate();">
</td>
</tr>
<tr>
<td>4)</td>
<td>Terms:</td>
<td>
<input type="text" name="terms" size="12"
onchange="calculate();">
</td>
</tr>
<tr>
<td colspan="3">
<input type="button" value="Calculate" onclick="calculate();">
</td>
</tr>
<tr>
<td colspan="3">
<b>Investment Information:</b>
</td>
</tr>
<tr>
<td>4)</td>
<td>Your Investment will be worth:</td>
<td><input type="text" name="payment" size="12"></td>
</tr>
</table>
</form>
<script language="JavaScript">function calculate() {
var investment = document.fv.investment.value;
var interest = document.fv.interest.value / 100 / 12;
var terms = document.fv.terms.value * 12;
var x = Math.pow(1 + interest, terms);
var monthly = (investment * x);
if (!isNaN(monthly) &&
(monthly != Number.POSITIVE_INFINITY) &&
(monthly != Number.NEGATIVE_INFINITY)) {
document.fv.payment.value = round(monthly);
}
else {
document.fv.payment.value = "";
}
}
function round(x) {
return Math.round(x * 100) / 100;
</script>
I don't know what exactly you meant but it return value into input you haven't closed round func and wrong type on script
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form name="fv">
<table>
<tr><td colspan="3"><b>Enter Investment Information:</b></td></tr>
<tr>
<td>1)</td>
<td>Amount of the Investment (any currency):</td>
<td>
<input type="text" name="investment" size="12"
onchange="calculate();">
</td>
</tr>
<tr>
<td>2)</td>
<td>percentage rate of interest:</td>
<td>
<input type="text" name="interest" size="12"
onchange="calculate();">
</td>
</tr>
<tr>
<td>3)</td>
<td>Monthly Payment Amount:</td>
<td>
<input type="text" name="monthly" size="12"
onchange="calculate();">
</td>
</tr>
<tr>
<td>4)</td>
<td>Terms:</td>
<td>
<input type="text" name="terms" size="12"
onchange="calculate();">
</td>
</tr>
<tr>
<td colspan="3">
<input type="button" value="Calculate" onclick="calculate();">
</td>
</tr>
<tr>
<td colspan="3">
<b>Investment Information:</b>
</td>
</tr>
<tr>
<td>4)</td>
<td>Your Investment will be worth:</td>
<td><input type="text" name="payment" size="12"></td>
</tr>
</table>
</form>
<script type="text/javascript">
function calculate() {
var investment = document.fv.investment.value;
var interest = document.fv.interest.value / 100 / 12;
var terms = document.fv.terms.value * 12;
var x = Math.pow(1 + interest, terms);
var monthly = (investment * x);
if (!isNaN(monthly) && (monthly !== Number.POSITIVE_INFINITY) &&
(monthly !== Number.NEGATIVE_INFINITY)) {
document.fv.payment.value = round(monthly);
}
else {
document.fv.payment.value = "";
}
}
function round(x) {
return Math.round(x * 100) / 100;
}
</script>
</body>
</html>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
i am trying to show in realtime the total price of the selected amount of a product. But i dom't get out with it, example: if you select 2 cards the price must be show in realtime : $10, and also that it counts the total amount and show the total price.
How can i fix this? This is my source:
function updatePrice()
{
var numSubTotal = parseInt($("#num-fruits option").filter(":selected").val());
if (isNaN(numFruits)) numFruits = 0;
$("#num-fruits").html(""+numFruits);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="652" border="0" cellpadding="5" cellspacing="0">
<tr>
<td><strong>Product</strong></td>
<td><strong>Product Price</strong></td>
<td><strong>How much you want?</strong></td>
<td><strong>Total Price</strong></td>
</tr>
<tr>
<td width="210">Fruit:</td>
<td width="216">$ 10</td>
<td width="204"><input name="number" type="number" id="number" value="5" onchange="updatePrice()"></td>
<td width="204">$ 50 <span id="num-fruits">0</span> </td>
</tr>
<tr>
<td>Drinks:</td>
<td>$ 25</td>
<td><input name="number2" type="number" id="number2" value="25"></td>
<td>$ 625</td>
</tr>
<tr>
<td>Cards:</td>
<td>$ 5</td>
<td><input type="number" name="number3" id="number3"></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>Total price of all:</td>
<td>$ 675</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</center>
</body>
</html>
why isn't this code working?
In your HTML remove your onchange attribute, it's a bad practice.
Then, your Javascript is not taking care of all the fields (i.e. only Fruits), so replace it with this:
$("input").on("change", function () {
var $input = $(this);
var howMany = parseInt($input.val());
var unitAmount = parseInt($input.parent().prev().text().replace("$",""));
var total = howMany * unitAmount;
$input.parent().next().text("$ " + total);
});
What this does is to detect when the "how much" input fields change and when that's the case, it retrieve how much a unit costs and multiplies by the number input in the "how much" field and writes the total in the last column.
I have a table/form that calculates monthly payments for a mortgage. When the calculate button is pressed, a JavaScript function will make a calculation based on the values of the inputs and set the value of that calculation inside of the Monthly Payment input. My problem is when the value is set for that input, the value gets displayed without commas. For instance, 1543 instead of 1,543. If anyone knows anyway to add commas into the Monthly Payment input that would be great. Here is a picture of the Mortgage Calculator with the Monthly Payment input outlined:
Here is the code for the mortgage calculator:
<form action="POST" name="myform">
<table border="1" bgcolor="#006666">
<tr>
<td align="center" colspan="2">
<script
language="JavaScript"><!--
function CarLoanCalculator()
{
form = document.myform
LoanAmount= form.LoanAmount.value
LoanAmount = LoanAmount.replace(/,/g, "");
parseInt(LoanAmount);
DownPayment= "0"
AnnualInterestRate = form.InterestRate.value/100
Years= form.NumberOfYears.value
MonthRate=AnnualInterestRate/12
NumPayments=Years*12
Prin=LoanAmount-DownPayment
MonthPayment=Math.floor((Prin*MonthRate)/(1-Math.pow((1+MonthRate),(-1*NumPayments)))*100)/100
commafy ("MonthPayment")
form.NumberOfPayments.value=NumPayments
form.MonthlyPayment.value=MonthPayment
}
// --></script>
<script type="text/javascript">
function format(input)
{
var nStr = input.value + '';
nStr = nStr.replace( /\,/g, "");
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' );
}
input.value = x1 + x2;
}
</script>
<font color="#FFFFFF"
size="2" face="arial narrow"><b>Mortgage Calculator</b> <br>
Enter Your Details & Click the Calculate Button</font></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="2">
<tr>
<td align="right"><font color="#FFFFFF"
size="2" face="arial narrow">Finance Amount $ </font></td>
<td><font color="#FFFFFF" size="2"
face="arial narrow">
<input type="text"
size="10" name="LoanAmount" value="30,000"
onBlur="CarLoanCalculator()" onkeyup="format(this)" onChange="CarLoanCalculator()">
<br>
</font></td>
</tr>
<tr>
<td align="right"><font color="#FFFFFF"
size="2" face="arial narrow">Annual Interest Rate </font></td>
<td><font color="#FFFFFF" size="2"
face="arial narrow">
<input type="text"
size="3" name="InterestRate" value="7.0"
onBlur="CarLoanCalculator()" onChange="CarLoanCalculator()">
% <br>
</font></td>
</tr>
<tr>
<td align="right"><font color="#FFFFFF"
size="2" face="arial narrow">Term of Mortgage</font></td>
<td><font color="#FFFFFF" size="2"
face="arial narrow">
<input type="text"
size="3" name="NumberOfYears" value="4"
onBlur="CarLoanCalculator()" onChange="CarLoanCalculator()">
Years<br>
</font></td>
<td><font color="#FFFFFF" size="2"
face="arial narrow">
<input type="button"
name="morgcal" value="Calculate"
language="JavaScript" onClick="CarLoanCalculator()">
</font></td>
</tr>
<tr>
<td colspan="3"><font color="#FFFFFF"></font></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="2">
<tr>
<td align="right"><font color="#FFFFFF"
size="2" face="arial narrow"> Number of Payments </font></td>
<td><font color="#FFFFFF" size="2"
face="arial narrow">
<input type="text"
size="7" name="NumberOfPayments">
<br>
</font></td>
</tr>
<tr>
<td align="right"><font color="#FFFFFF"
size="2" face="arial narrow">Monthly Payment $ </font></td>
<td><font color="#FFFFFF" size="2"
face="arial narrow">
<input type="text"
size="7" name="MonthlyPayment" id="test">
<br>
</font></td>
</tr>
<tr>
<td align="center" colspan="2"> </td>
</tr>
</table>
</td>
</tr>
</table>
<div align="center"></div>
</form>
Thank you for any help. All help is greatly appreciated.
The correct JavaScript code to add a comma after every three digits in the Monthly Payments input value for an onclick event would be:
<script
language="JavaScript"><!--
function CarLoanCalculator()
{
form = document.myform
LoanAmount= form.LoanAmount.value
LoanAmount = LoanAmount.replace(/,/g, "");
parseInt(LoanAmount);
DownPayment= "0"
AnnualInterestRate = form.InterestRate.value/100
Years= form.NumberOfYears.value
MonthRate=AnnualInterestRate/12
NumPayments=Years*12
Prin=LoanAmount-DownPayment
function ReplaceNumberWithCommas(yourNumber) {
MonthPayment=Math.floor((Prin*MonthRate)/(1-Math.pow((1+MonthRate),(-1*NumPayments)))*100)/100
yourNumber = MonthPayment
//Seperates the components of the number
var components = yourNumber.toString().split(".");
//Comma-fies the first part
components [0] = components [0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
//Combines the two sections
return components.join(".");
}
//Seperates the components of the number
form.NumberOfPayments.value=NumPayments
form.MonthlyPayment.value=ReplaceNumberWithCommas()
//Seperates the components of the number
}
// --></script>
Note: the code is a bit out of order in terms of neatness and perhaps the comments, but the JavaScript syntax is correct.
I have what I feel should be a simple request, but I can't find a simple answer anywhere. My questions is going to be a long one though.
I am trying to create a script for a website http://oactechnology.com/phonesystemquotetool. As you can see, if you input the quantity of the type of phone you want and the server grade you want, you are given a total price (seen at the bottom of the page).
I recently am trying to add some input dials as well. The form has 5 radio inputs:
<input class="num-pallets-radio" name="equipment-radio" type="radio" value="$400">SIP</input><br>
<input class="num-pallets-radio" name="equipment-radio" type="radio" value="$500">PRI</input><br>
<input class="num-pallets-radio" name="equipment-radio" type="radio" value="$600">Analog (4 Lines)</input><br>
<input class="num-pallets-radio" name="equipment-radio" type="radio" value="$700">Analog (8 Lines)</input><br>
<input class="num-pallets-radio" name="equipment-radio" type="radio" value="$800">Analog (24 Lines)</input><br>
<input class="num-pallets-radio" name="equipment-radio" type="radio" checked="checked" value="$0">Dont Know</input>
I would like it so that when a radio input is selected, the value changes from "0" to "1". If the user changes their mind and selects a different radio input, the newly selected radio input changes it's value from "0" to "1" and the previous, now unchecked, radio input goes back to a value of "0". The value, being a 1 or a 0, inputs the price of the selection.
Here is the full HTML/PHP script for the phonesystemquotetool page:
<table id="order-table">
<tr>
<th class="thfiller" width="200px"></th>
<th class="thname">Phone Type</th>
<th class="thquantity">Quantity</th>
</tr>
<tr class="odd">
<td class="product-image"><img id="product-image" src="phoneimages/Polycom_SoundPoint_IP_650.png"><br><center>View PDF</center></td>
<td class="product-title"><p><b>Polycom SoundPoing IP 650</b></p><p>Designed to appeal to both executive users who require advanced features and applications, and telephone attendants who need multiple line support, the Polycom SoundPoint IP 650 sets a new standard for high-performance IP phones.</p></td>
<td class="num-pallets"><input type="text" class="num-pallets-input" id="650-num-pallets" name="Polycom_SoundPoint_IP_650"></input></td>
<td class="price-per-pallet" style="display:none">$<span>599</span></td>
<td class="row-total" style="display:none"><input type="text" class="row-total-input" id="650-row-total" disabled="disabled"></input></td>
</tr>
<tr class="even">
<td class="product-image"><img id="product-image" src="phoneimages/Polycom_SoundPoint_IP_560.png"><br><center>View PDF</center></td>
<td class="product-title"><p><b>Polycom SoundPoint IP 560</b></p><p>The four-line SoundPoint IP 560 desktop phone delivers calls of unprecedented richness and clarity and supports a comprehensive range of cutting-edge features.</p></td>
<td class="num-pallets"><input type="text" class="num-pallets-input" id="560-num-pallets" name="Polycom_SoundPoint_IP_560"></input></td>
<td class="price-per-pallet" style="display:none">$<span>615</span></td>
<td class="row-total" style="display:none"><input type="text" class="row-total-input" id="560-row-total" disabled="disabled"></input></td>
</tr>
<tr class="odd">
<td class="product-image"><img id="product-image" src="phoneimages/Polycom_soundPoint_IP_450.png"><br><center>View PDF</center></td>
<td class="product-title"><p><b>Polycom SoundPoint IP 450</b></p><p>The SoundPoint IP 450 desktop phone is designed to bring advanced telephony features and applications to cubicle/office workers handling a moderate volume of calls.</p></td>
<td class="num-pallets"><input type="text" class="num-pallets-input" id="450-num-pallets" name="Polycom_soundPoint_IP_450"></input></td>
<td class="price-per-pallet" style="display:none">$<span>542</span></td>
<td class="row-total" style="display:none"><input type="text" class="row-total-input" id="450-row-total" disabled="disabled"></input></td>
</tr>
<tr class="even">
<td class="product-image"><img id="product-image" src="phoneimages/Polycom_soundPoint_IP_335.png"><br><center>View PDF</center></td>
<td class="product-title"><p><b>Polycom SoundPoint IP 335</b></p><p>The SoundPoint IP 335 phone delivers a business grade telephony endpoint at an entry-level price.</p></td>
<td class="num-pallets"><input type="text" class="num-pallets-input" id="335-num-pallets" name="Polycom_soundPoint_IP_335.png"></input></td>
<td class="price-per-pallet" style="display:none">$<span>465</span></td>
<td class="row-total" style="display:none"><input type="text" class="row-total-input" id="335-row-total" disabled="disabled"></input></td>
</tr>
<tr class="odd">
<td class="product-image"><img id="product-image" src="phoneimages/Polycom_VVX_1500.png"><br><center>View PDF</center></td>
<td class="product-title"><p><b>Polycom VVX 1500</b></p><p>The VVX 1500 is an ideal all-in-one productivity tool for todays busy executives and professionals, whether they are in office, retail, professional services, or healthcare environments.</p></td>
<td class="num-pallets"><input type="text" class="num-pallets-input" id="1500-num-pallets" name="Polycom_VVX_1500"></input></td>
<td class="price-per-pallet" style="display:none">$<span>1094</span></td>
<td class="row-total" style="display:none"><input type="text" class="row-total-input" id="1500-row-total" disabled="disabled"></input></td>
</tr>
<tr class="even">
<td class="product-image"><img id="product-image" src="phoneimages/Aastra_9143i.png"><br><center>View PDF</center></td>
<td class="product-title"><p><b>Aastra 9143i</b></p><p>Our standard basic phone. The 9143i is ideally suited as an everyday desk phone for moderate telephone users.</p></td>
<td class="num-pallets"><input type="text" class="num-pallets-input" id="9143i-num-pallets" name="Aastra_9143i"></input></td>
<td class="times" style="display:none">X</td>
<td class="price-per-pallet" style="display:none">$<span>445</span></td>
<td class="equals" style="display:none">=</td>
<td class="row-total" style="display:none"><input type="text" class="row-total-input" id="9143i-row-total" disabled="disabled"></input></td>
</tr>
<tr class="odd">
<td class="product-image"><img id="product-image" src="phoneimages/Polycom_SoundStation_Phone_IP_6000.png"><br><center>View PDF</center></td>
<td class="product-title"><p><b>Polycom SoundStation Phone IP 6000</b></p><p>The SoundStation IP 6000 is an advanced IP conference phone that delivers superior performance for small to midsize conference rooms.</p></td>
<td class="num-pallets"><input type="text" class="num-pallets-input" id="6000-num-pallets" name="Polycom_SoundStation_Phone_IP_6000"></input></td>
<td class="price-per-pallet" style="display:none">$<span>976</span></td>
<td class="row-total" style="display:none"><input type="text" class="row-total-input" id="6000-row-total" disabled="disabled"></input></td>
</tr>
<tr class="even">
<td class="product-image"><img id="product-image" src="phoneimages/Polycom_SoundPoint_IP_650_Expansion_Module.png"><br><center>View PDF</center></td>
<td class="product-title"><p><b>Polycom SoundPoint Backlit IP 650 Expansion Module</b></p><p>The SoundPoint IP Backlit Expansion Module boosts telephone attendant productivity with enhanced user interface and advanced call handling capabilities.</p></td>
<td class="num-pallets"><input type="text" class="num-pallets-input" id="650-expansion-num-pallets" name="Polycom_SoundPoint_IP_650_Expansion_Module"></input></td>
<td class="price-per-pallet" style="display:none">$<span>839.45</span></td>
<td class="row-total" style="display:none"><input type="text" class="row-total-input" id="650-expansion-row-total" disabled="disabled"></input></td>
</tr>
<tr class="odd">
<td class="product-image"><img id="product-image" src="phoneimages/Panasonic_KX-TGP500_Cordless_Phone.png"></td>
<td class="product-title"><p><b>Panasonic KX-TGP500 Cordless Phone</b></p></td>
<td class="num-pallets"><input type="text" class="num-pallets-input" id="tgp500-num-pallets" name="Panasonic_KX-TGP500_Cordless_Phone"></input></td>
<td class="price-per-pallet" style="display:none">$<span>400</span></td>
<td class="row-total" style="display:none"><input type="text" class="row-total-input" id="tgp500-row-total" disabled="disabled"></input></td>
</tr>
<tr>
<th class="thfiller" width="200px"></th>
<th class="thname">Server Grade</th>
<th class="thquantity">Quantity</th>
</tr>
<tr class="even">
<td class="product-image"><img id="product-image" src="phoneimages/Asterisk-Phone-System-Standard.jpg" width="149px" height="200px"></td>
<td class="product-title"><p><b>Inexpensive Server</b></p><p>Recommended for up to 15 extensions</p></td>
<td class="num-pallets"><input type="text" class="num-pallets-input" id="tgp500-num-pallets" name="Asterisk-Phone-System-Standard"></input></td>
<td class="price-per-pallet" style="display:none">$<span>1500</span></td>
<td class="row-total" style="display:none"><input type="text" class="row-total-input" id="tgp500-row-total" disabled="disabled"></input></td>
</tr>
<tr class="odd">
<td class="product-image"><img id="product-image" src="phoneimages/2941-1.jpg" width="149px" height="200px"></td>
<td class="product-title"><p><b>Standard Server</b></p><p>Recommended for 5 to 25 extensions</p></td>
<td class="num-pallets"><input type="text" class="num-pallets-input" id="tgp500-num-pallets" name="2941-1"></input></td>
<td class="price-per-pallet" style="display:none">$<span>1750</span></td>
<td class="row-total" style="display:none"><input type="text" class="row-total-input" id="tgp500-row-total" disabled="disabled"></input></td>
</tr>
<tr class="even">
<td class="product-image"><img id="product-image" src="phoneimages/Asterisk-Phone-System-Rack-Mount.jpg"></td>
<td class="product-title"><p><b>Standard Server Rack Mount</b></p><p>Recommended for 5 to 25 extensions</p></td>
<td class="num-pallets"><input type="text" class="num-pallets-input" id="tgp500-num-pallets" name="Asterisk-Phone-System-Rack-Mount"></input></td>
<td class="price-per-pallet" style="display:none">$<span>1750</span></td>
<td class="row-total" style="display:none"><input type="text" class="row-total-input" id="tgp500-row-total" disabled="disabled"></input></td>
</tr>
<tr class="odd">
<td class="product-image"><img id="product-image" src="phoneimages/dell_poweredge_t605.png" width="149px" height="200px"></td>
<td class="product-title"><p><b>Enterprise Server</b></p><p>Recommended for 25 or more extensions</p></td>
<td class="num-pallets"><input type="text" class="num-pallets-input" id="tgp500-num-pallets" name="dell_poweredge_t605"></input></td>
<td class="price-per-pallet" style="display:none">$<span>3943</span></td>
<td class="row-total" style="display:none"><input type="text" class="row-total-input" id="tgp500-row-total" disabled="disabled"></input></td>
</tr>
<tr class="even">
<td class="product-image"><img id="product-image" src="phoneimages/dell_poweredge_r200.png"></td>
<td class="product-title"><p><b>Enterprise Server Rack Mount</b></p><p>Recommended for 25 or more extensions</p></td>
<td class="num-pallets"><input type="text" class="num-pallets-input" id="tgp500-num-pallets" name="dell_poweredge_r200t"></input></td>
<td class="price-per-pallet" style="display:none">$<span>4943</span></td>
<td class="row-total" style="display:none"><input type="text" class="row-total-input" id="tgp500-row-total" disabled="disabled"></input></td>
</tr>
<tr style="display:none">
<td colspan="6" style="text-align: right;"><br>
<input type="text" class="total-box" value="$0" id="product-subtotal" disabled="disabled" name="order-subtotal"></input>
</td>
</tr>
</table>
<hr width="100%">
<table id="shipping-table" style="display:none">
<tr>
<th>Total Qty.</th>
<th>X</th>
<th>Labor Rate</th>
<th>=</th>
<th style="text-align: right;">Labor Total</th>
</tr>
<tr>
<td id="total-pallets"><input id="total-pallets-input" value="0" type="text" disabled="disabled"></input></td>
<td>X</td>
<td id="shipping-rate">0</td>
<td>=</td>
<td style="text-align: right;"><input type="text" class="total-box" value="$0" id="shipping-subtotal" disabled="disabled" name="labor-subtotal"></input></td>
</tr>
</table>
<div class="clear"></div>
<table width="100%">
<tr>
<td>
<b>Do you know how your equipment currently interfaces with the phone company?</b><br><br>
<input class="num-pallets-radio" name="equipment-radio" type="radio" value="$400">SIP</input><br>
<input class="num-pallets-radio" name="equipment-radio" type="radio" value="$500">PRI</input><br>
<input class="num-pallets-radio" name="equipment-radio" type="radio" value="$600">Analog (4 Lines)</input><br>
<input class="num-pallets-radio" name="equipment-radio" type="radio" value="$700">Analog (8 Lines)</input><br>
<input class="num-pallets-radio" name="equipment-radio" type="radio" value="$800">Analog (24 Lines)</input><br>
<input class="num-pallets-radio" name="equipment-radio" type="radio" checked="checked" value="$0">Dont Know</input>
</td>
<td>
<div style="text-align: right;">
<span><b>Estimate:</b><br></span>
<input type="text" class="total-box" value="$0" id="order-total" disabled="disabled" name="order-total"></input>
<!-- <br><br>
<div style="float: right;">
<p><b>Your Name:</b><input type="text" name="name" size="50"></p>
<p><b>Your Email:</b><input type="text" name="email"></p>
<p><b>Your Phone:</b><input type="text" name="phone"></p>
<input type="submit" value="Submit Quote" class="submit-order" id="submit-order" name="submit" />
</div> -->
</div>
</td>
</tr>
</table>
Here is the header:
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type='text/javascript' src='js/order.js'></script>
And here is the order.js that is pulled:
// UTILITY FUNCTIONS
function IsNumeric(n) {
return !isNaN(n);
}
function CleanNumber(value) {
// Assumes string input, removes all commas, dollar signs, and spaces
newValue = value.replace(",","");
newValue = newValue.replace("$","");
newValue = newValue.replace(/ /g,'');
return newValue;
}
function CommaFormatted(amount) {
var delimiter = ",";
var i = parseInt(amount);
if(isNaN(i)) { return ''; }
i = Math.abs(i);
var minus = '';
if (i < 0) { minus = '-'; }
var n = new String(i);
var a = [];
while(n.length > 3)
{
var nn = n.substr(n.length-3);
a.unshift(nn);
n = n.substr(0,n.length-3);
}
if (n.length > 0) { a.unshift(n); }
n = a.join(delimiter);
amount = "$" + minus + n;
return amount;
}
// ORDER FORM UTILITY FUNCTIONS
function applyName(klass, numPallets) {
var toAdd = $("td." + klass).text();
var actualClass = $("td." + klass).attr("rel");
$("input." + actualClass).attr("value", numPallets + " pallets");
}
function removeName(klass) {
var actualClass = $("td." + klass).attr("rel");
$("input." + actualClass).attr("value", "");
}
function calcTotalPallets() {
var totalPallets = 0;
$(".num-pallets-input").each(function() {
var thisValue = parseInt($(this).val());
if ( (IsNumeric(thisValue)) && (thisValue != '') ) {
totalPallets += parseInt(thisValue);
};
});
$("#total-pallets-input").val(totalPallets);
}
function calcProdSubTotal() {
var prodSubTotal = 0;
$(".row-total-input").each(function() {
var valString = $(this).val() || 0;
prodSubTotal += parseInt(valString);
});
$("#product-subtotal").val(CommaFormatted(prodSubTotal));
}
function calcShippingTotal() {
var totalPallets = $("#total-pallets-input").val() || 0;
var shippingRate = $("#shipping-rate").text() || 0;
var shippingTotal = totalPallets * shippingRate;
$("#shipping-subtotal").val(CommaFormatted(shippingTotal));
}
function calcOrderTotal() {
var orderTotal = 0;
var productSubtotal = $("#product-subtotal").val() || 0;
var radioPrice = $('.num-pallets-radio:checked').val() || 0;
var underTotal = $("#under-box").val() || 0;
var orderTotal = parseInt(CleanNumber(productSubtotal)) + parseInt(CleanNumber(radioPrice));
$("#order-total").val(CommaFormatted(orderTotal));
$("#fc-price").attr("value", orderTotal);
}
// DOM READY
$(function() {
var inc = 1;
$(".product-title").each(function() {
$(this).addClass("prod-" + inc).attr("rel", "prod-" + inc);
var prodTitle = $(this).text();
$("#foxycart-order-form").append("<input type='hidden' name='" + prodTitle + "' value='' class='prod-" + inc + "' />");
inc++;
});
// Reset form on page load, optional
$("#order-table input[type=text]:not('#product-subtotal')").val("");
$("#product-subtotal").val("$0");
$("#shipping-subtotal").val("$0");
$("#fc-price").val("$0");
$("#order-total").val("$0");
$("#total-pallets-input").val("0");
// "The Math" is performed pretty much whenever anything happens in the quanity inputs
$('.num-pallets-input').bind("focus blur change keyup", function(){
// Caching the selector for efficiency
var $el = $(this);
// Grab the new quantity the user entered
var numPallets = CleanNumber($el.val());
// Find the pricing
var multiplier = $el
.parent().parent()
.find("td.price-per-pallet span")
.text();
// If the quantity is empty, reset everything back to empty
if ( (numPallets == '') || (numPallets == 0) ) {
$el
.removeClass("warning")
.parent().parent()
.find("td.row-total input")
.val("");
var titleClass = $el.parent().parent().find("td.product-title").attr("rel");
removeName(titleClass);
// If the quantity is valid, calculate the row total
} else if ( (IsNumeric(numPallets)) && (numPallets != '') ) {
var rowTotal = numPallets * multiplier;
$el
.removeClass("warning")
.parent().parent()
.find("td.row-total input")
.val(rowTotal);
var titleClass = $el.parent().parent().find("td.product-title").attr("rel");
applyName(titleClass, numPallets);
// If the quantity is invalid, let the user know with UI change
} else {
$el
.addClass("warning")
.parent().parent()
.find("td.row-total input")
.val("");
var titleClass = $el.parent().parent().find("td.product-title").attr("rel");
removeName(titleClass);
};
// Calcuate the overal totals
calcProdSubTotal();
calcTotalPallets();
calcShippingTotal();
calcOrderTotal();
});
});
I know that my code may be a little messy, and maybe there is a better way to do all of this than with all the table action I have going on (I am not a pro at this).
So, my question: how can I get the radio inputs to input the correct price in the Estimate (along with any price already there from previous quantity items) while only checked? I'm sure that there is some modification that has to happen to the order.js file, I'm just not sure what.
I hope this all makes sense.
You could add a change listener to your radio buttons and update the value in that function
function changed(element) {
if (this.oldElement != null) this.oldElement.value = "0";
this.oldElement = element;
element.value = "1";
}
and add onchange="changed(this)" to all of your radio buttons.
It is important that you pass a this reference of the radio button to the changed method in order to set the value of the now unchecked radio button to "0"
<input class="num-pallets-input" id="sip-num-pallets" name="equipment_radio" onchange="changed(this)" type="radio" value="0">
<!-- .... -->
Or if you're using JQuery (this handles all of your radios with the class "num-pallets-input"):
function changed() {
$(".num-pallets-input").val("0");
$(".num-pallets-input:checked").val("1");
}
Side Note:
As far as I understand the onchange Event it should fire everytime the checked state changes.
But in Chrome it seems to get fired only when you click the radio button.
Would be great if someone could confirm whether this is a bug in Chrome or if I understood the w3 description wrong.