JSFiddle - React, Tailwind, and code Playground
HTML
<form name="MyForm" action="somepage.asp" method="post">
Hard Drive Upgrade<br>
<input type="radio" name="option1|Hard Drive Upgrade" value="120 GB 7,200 RPM SATA|0.00" checked> 120 GB 7,200 RPM SATA - Add $0.00<br>
<input type="radio" name="option1|Hard Drive Upgrade" value="200 GB 7,200 RPM SATA|39.99"> 200 GB 7,200 RPM SATA - Add $39.99<br>
<input type="radio" name="option1|Hard Drive Upgrade" value="250 GB 7,200 RPM SATA|79.99"> 250 GB 7,200 RPM SATA - Add $79.99<br>
<br>Second Hard Drive Options<br>
<input type="radio" name="option2|Second Hard Drive Options" value="None|0.00" checked> None - Add $0.00<br>
<input type="radio" name="option2|Second Hard Drive Options" value="120 GB 7,200 RPM SATA|108.99"> 120 GB 7,200 RPM SATA - Add $108.99<br>
<input type="radio" name="option2|Second Hard Drive Options" value="200 GB 7,200 RPM SATA|145.99"> 200 GB 7,200 RPM SATA - Add $145.99<br>
<input type="radio" name="option2|Second Hard Drive Options" value="250 GB 7,200 RPM SATA|189.99"> 250 GB 7,200 RPM SATA - Add $189.99<br>
<br>Memory Upgrade<br>
<input type="radio" name="option3|Memory Upgrade" value="512 333 DDR Memory (1 DIMM)|0.00" checked> 512 333 DDR Memory (1 DIMM) - Add $0.00<br>
<input type="radio" name="option3|Memory Upgrade" value="1 GB 333 DDR Memory (2 DIMMs)|79.99"> 1 GB 333 DDR Memory (2 DIMMs) - Add $79.99<br>
<br>USB-UIRT IR Blaster Option<br>
<input type="radio" name="option4|USB-UIRT IR Blaster Option" value="None|0.00" checked> None - Add $0.00<br>
<input type="radio" name="option4|USB-UIRT IR Blaster Option" value="USB-UIRT IR Blaster|49.99"> USB-UIRT IR Blaster - Add $49.99<br>
<br>56K Modem Option<br>
<input type="radio" name="option5|56K Modem Option" value="None|0.00" checked> None - Add $0.00<br>
<input type="radio" name="option5|56K Modem Option" value="56k Modem|20.00"> 56k Modem - Add $20.00<br>
<br>Wireless Ethernet Adapter<br>
<input type="radio" name="option6|Wireless Ethernet Adapter" value="None|0.00" checked> None - Add...
JavaScript
function calculate() {
console.log("Calculating...")
var radioArray = [];
var formObj = document.forms[0];
var totalPrice = 0;
var no = 0;
for (no = 0; no < formObj.elements.length; no++) {
if (formObj.elements[no].type == 'radio' && !radioArray[formObj.elements[no].name]) {
var obj = formObj.elements[formObj.elements[no].name];
var no2 = 0;
for (no2 = 0; no2 < obj.length; no2++) {
if (obj[no2].checked) {
radioArray[formObj.elements[no].name] = true;
var stringArray = obj[no2].value.split('|');
var price = stringArray[1];
totalPrice = totalPrice / 1 + price / 1;
}
}
}
if (formObj.elements[no].className == 'calculate') {
var stringArray = formObj.elements[no].name.split('|');
var price = stringArray[1];
var feet = formObj.elements[no].value;
totalPrice = totalPrice / 1 + (price * feet) / 1;
}
}
totalPrice = Math.round(totalPrice * 100);
totalPrice = totalPrice / 100;
document.forms[0].totalPrice.value = "$" + totalPrice;
}
function init() {
var no = 0;
for (no = 0; no < document.forms[0].elements.length; no++) {
if (document.forms[0].elements[no].type == 'radio') {
document.forms[0].elements[no].onclick = calculate;
}
if (document.forms[0].elements[no].className == 'calculate') {
document.forms[0].elements[no].onkeyup = calculate;
}
}
}
function PrintMeSubmitMe() {
window.print();
}
function SubmitMe() {
document.MyForm.submit();
}
init();