The JavaScript Source: Forms : Update Order Form w/o Page Refresh

Home Forms Update Order Form w/o Page Refresh

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.

The JavaScript Source: Forms : Update Order Form w/o Page Refresh
Simply click inside the window below, use your cursor to highlight the script, and copy [Control]+C the script into a new file in your text editor (such as Note Pad) and save [Control+S]. The script is yours!!!

 /* 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; } } }  <script type="text/javascript" src="yourFileName.js"></script>  <body onload="InitForm();" onreset="InitForm();">  <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>
Did you use this script? Do you like this site? Please link to us!

Add a comment, suggestion, or correction

Comments feed

internet.com Privacy Policy

[ Contact Us! ]
[ JavaScript Forum ]
[ Submit Your Script! ]

WebMediaBrands Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

Solutions

Whitepapers and eBooks

Whitepaper: Introducing the Azure Services Platform
Whitepaper: Introduction to Microsoft .NET Services for Developers
Whitepaper: Securing Microsoft's Cloud Infrastructure
Internet.com eBook: Becoming a Better Project Manager
Microsoft Partner Portal: What Azure Means for Microsoft Partners

Internet.com eBook: Web Development Frameworks for Java
Internet.com eBook: Developing a Content Management System Strategy
Article: Ten Things IT Professionals Should Know About Windows 7
Article: New BlackBerry Enterprise Server Eases Administration for IT Pros
MORE WHITEPAPERS, EBOOKS, AND ARTICLES

Webcasts

Get Started with .NET Services

MORE WEBCASTS, PODCASTS, AND VIDEOS

Downloads and eKits

Amyuni: PDF & PDF/A Engine for .NET and ActiveX Apps
Red Gate Free Trial: SQL Toolbelt
Iron Speed Designer Application Generator

Download Award-Winning Red Gate SQL Backup Pro
MORE DOWNLOADS, EKITS, AND FREE TRIALS

Tutorials and Demos

Internet.com Hot List: Get the Inside Scoop on the Hottest IT and Developer Products
Internet.com Hot List: Java EE 6 Platform Highlights the JavaOne Conference

MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES