Hey Gang (Bob I need your help!!😀)
I have searched high and low, found mult. scripts online that calc radio buttons or checkboxes.. the one I found that does both requires code in the <body> tag which I just don't want to add to the index.php of the template... less is more.. and more conflicts later is no good. I have one form, with radio and check boxes, all static values of whole numbers (i.e. value="3") and just need a total at the end of the form, automatically calculated without the need for a 'click' of a button.. form will have a submit button to send me the form data.. which includes the radio and checkbox selections.. would also like to include this 'total' into the email as well..
Any ideas?? I am lost.. and by no means a js expert.. not even a newbie yet. Guess today is a good day to start..
Here is one code I found for use on the check boxes, I like it because it's small.. but I don't know if it'll work on the radio buttons, anyone??
Any help is greatly appreciated, thanks!!
Also, in case someone is curious to the other code I found that validates both radio and checkboxes (but again calls for a separate js file and code in the body tag to work) it's here:
http://javascript.internet.com/forms/update-order-form-no-page-refresh.html
And listed below for the lazy😛
I have searched high and low, found mult. scripts online that calc radio buttons or checkboxes.. the one I found that does both requires code in the <body> tag which I just don't want to add to the index.php of the template... less is more.. and more conflicts later is no good. I have one form, with radio and check boxes, all static values of whole numbers (i.e. value="3") and just need a total at the end of the form, automatically calculated without the need for a 'click' of a button.. form will have a submit button to send me the form data.. which includes the radio and checkbox selections.. would also like to include this 'total' into the email as well..
Any ideas?? I am lost.. and by no means a js expert.. not even a newbie yet. Guess today is a good day to start..
Here is one code I found for use on the check boxes, I like it because it's small.. but I don't know if it'll work on the radio buttons, anyone??
<html>
<head>
<script type="text/javascript" language="JavaScript">
function TotalCheckedValues() {
var total = 0;
if(document.F2.a.checked == true) { total += parseFloat(document.F2.a.value); }
if(document.F2.b.checked == true) { total += parseFloat(document.F2.b.value); }
if(document.F2.c.checked == true) { total += parseFloat(document.F2.c.value); }
if(document.F2.d.checked == true) { total += parseFloat(document.F2.d.value); }
var ts = new String(total);
if(ts.indexOf('.') < 0) { ts += '.00'; }
if(ts.indexOf('.') == (ts.length - 2)) { ts += '0'; }
document.F2.T.value = ts;
}
</script>
</head>
<body>
<form name="F2">
Which do you want?<br>
<input type="checkbox" name="a" value="10" onClick="TotalCheckedValues()">Item 1 (10.00) <br>
<input type="checkbox" name="b" value="0" onClick="TotalCheckedValues()">Item 2 (Free) <br>
<input type="checkbox" name="c" value="55" onClick="TotalCheckedValues()">Item 3 (55.00) <br>
<input type="checkbox" name="d" value="4" onClick="TotalCheckedValues()">Item 4 (4) <br>
Total: <input type="text" name="T" readonly size="5"> <br>
<input type="button" value="Click" onClick="TotalCheckedValues()">
</form>
</body>
</html>
Any help is greatly appreciated, thanks!!
Also, in case someone is curious to the other code I found that validates both radio and checkboxes (but again calls for a separate js file and code in the body tag to work) it's here:
http://javascript.internet.com/forms/update-order-form-no-page-refresh.html
And listed below for the lazy😛
<!-- Paste this code into an external JavaScript file -->
/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: Kevin Hartig :: http://www.grafikfx.net/ */
// Calculate the total for items in the form which are selected.
function calculateTotal(inputItem) {
with (inputItem.form) {
// Process each of the different input types in the form.
if (inputItem.type == "radio") { // Process radio buttons.
// Subtract the previously selected radio button value from the total.
calculatedTotal.value = eval(calculatedTotal.value) - eval(previouslySelectedRadioButton.value);
// Save the current radio selection value.
previouslySelectedRadioButton.value = eval(inputItem.value);
// Add the current radio button selection value to the total.
calculatedTotal.value = eval(calculatedTotal.value) + eval(inputItem.value);
} else { // Process check boxes.
if (inputItem.checked == false) { // Item was uncheck. Subtract item value from total.
calculatedTotal.value = eval(calculatedTotal.value) - eval(inputItem.value);
} else { // Item was checked. Add the item value to the total.
calculatedTotal.value = eval(calculatedTotal.value) + eval(inputItem.value);
}
}
// Total value should never be less than 0.
if (calculatedTotal.value < 0) {
InitForm();
}
// Return total value.
return(formatCurrency(calculatedTotal.value));
}
}
// Format a value as currency.
function formatCurrency(num) {
num = num.toString().replace(/\$|\,/g,'');
if(isNaN(num))
num = "0";
sign = (num == (num = Math.abs(num)));
num = Math.floor(num*100+0.50000000001);
cents = num%100;
num = Math.floor(num/100).toString();
if(cents<10)
cents = "0" + cents;
for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
num = num.substring(0,num.length-(4*i+3)) + ',' + num.substring(num.length-(4*i+3));
return (((sign)?'':'-') + '$' + num + '.' + cents);
}
// This function initialzes all the form elements to default values.
function InitForm() {
// Reset values on form.
document.selectionForm.total.value='$0';
document.selectionForm.calculatedTotal.value=0;
document.selectionForm.previouslySelectedRadioButton.value=0;
// Set all checkboxes and radio buttons on form to unchecked.
for (i=0; i < document.selectionForm.elements.length; i++) {
if (document.selectionForm.elements[i].type == 'checkbox' | document.selectionForm.elements[i].type == 'radio') {
document.selectionForm.elements[i].checked = false;
}
}
}
<!-- Paste this code into the HEAD section of your HTML document
Change the file name and path to match the one you created -->
<script type="text/javascript" src="yourFileName.js"></script>
<!-- Paste this code into the BODY tag -->
<body onload="InitForm();" onreset="InitForm();">
<!-- Paste this code into the BODY section of your HTML document -->
<div align="center">
<table><tr><td>
<form method="POST" name="selectionForm">
<b>Pizza Order</b><br>
Small $10.00
<input type="checkbox" name="Steak" value="10.00" onclick="this.form.total.value=calculateTotal(this);">
Medium $12.00
<input type="checkbox" name="Chicken" value="12.00" onclick="this.form.total.value=calculateTotal(this);">
Large $15.00
<input type="checkbox" name="Sushi" value="15.00" onclick="this.form.total.value=calculateTotal(this);">
<br><br>
<b>Extra Toppings (only one selection allowed):</b> <br>
<input type="radio" name="Sauce" value="0.00" onclick="this.form.total.value=calculateTotal(this);"> None
<br>
<input name="Sauce" type="radio" value="1.00" onclick="this.form.total.value=calculateTotal(this);"> Extra Cheese $1.00
<br>
<input type="radio" name="Sauce" value="2.00" onclick="this.form.total.value=calculateTotal(this);"> Vegetarian $2.00
<br>
<input type="radio" name="Sauce" value="3.00" onclick="this.form.total.value=calculateTotal(this);"> Meat $3.00
<br>
<br>
<input type="hidden" name="calculatedTotal" value="0">
<input type="hidden" name="previouslySelectedRadioButton" value="0">
<strong>Your total is:</strong>
<input type="text" name="total" readonly onfocus="this.blur();">
</form>
</td></tr></table>
</div>
<p><div align="center">
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</div><p>