Full version: jsB@nk » Form » Validation » Update Order Form w/o Page Refresh
URL: https://www.javascriptbank.com/update-order-form-wo-page-refresh.html
In this order form, the cost for each item is totaled as the items are selected and deselected. This is done without refreshing the entire page in order to save other form information. Heavily commented.
Full version: jsB@nk » Form » Validation » Update Order Form w/o Page Refresh
URL: https://www.javascriptbank.com/update-order-form-wo-page-refresh.html
<script type="text/javascript">/* This script and many more are available free online atThe JavaScript Source :: http://javascript.internet.comCreated 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; } }}</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><body onload="InitForm();" onreset="InitForm();"><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></body><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->