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><a href="pdf/soundpoint_ip650_datasheet.pdf" target="_new">View PDF</a></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><a href="pdf/soundpoint_ip560_datasheet.pdf" target="_new">View PDF</a></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><a href="pdf/soundpoint_ip450_datasheet.pdf" target="_new">View PDF</a></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><a href="pdf/soundpoint_ip335_datasheet.pdf" target="_new">View PDF</a></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><a href="pdf/vvx1500_datasheet.pdf" target="_new">View PDF</a></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><a href="pdf/aastra_9143i_datasheet.pdf" target="_new">View PDF</a></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><a href="pdf/soundstation_ip6000_datasheet.pdf" target="_new">View PDF</a></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><a href="pdf/soundpoint_ip650_expansion_module_datasheet.pdf" target="_new">View PDF</a></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.