Full version: jsB@nk » Calculation » Order Form
URL: https://www.javascriptbank.com/order-form.html
An order form which utilizes checkboxes and radio buttons for making a selection. The checkbox only allows one quantity of any item to be ordered, while the radio button only allows for one item within a defined group to be ordered. Script updates the order total as the visitor makes his/her selections, also note that the order total can not be manually altered by the visitor. Works in MSIE and Opera.
Full version: jsB@nk » Calculation » Order Form
URL: https://www.javascriptbank.com/order-form.html
<SCRIPT LANGUAGE="JavaScript">// Paul DeBrino --><!-- Beginfunction CheckChoice(whichbox){with (whichbox.form){//Handle differently, depending on type of input box.if (whichbox.type == "radio"){//First, back out the prior radio selection's price from the total:hiddentotal.value = eval(hiddentotal.value) - eval(hiddenpriorradio.value);//Then, save the current radio selection's price:hiddenpriorradio.value = eval(whichbox.price);//Now, apply the current radio selection's price to the total:hiddentotal.value = eval(hiddentotal.value) + eval(whichbox.price);}else{//If box was checked, accumulate the checkbox value as the form total,//Otherwise, reduce the form total by the checkbox value:if (whichbox.checked == false){ hiddentotal.value = eval(hiddentotal.value) - eval(whichbox.value); }else { hiddentotal.value = eval(hiddentotal.value) + eval(whichbox.value); }}//Ensure the total never goes negative (some browsers allow radiobutton to be deselected):if (hiddentotal.value < 0){InitForm();}//Now, return with formatted total:return(formatCurrency(hiddentotal.value));}}//Define function to format a value as currency:function formatCurrency(num){ // Courtesy of http://www7.brinkster.com/cyanide7/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);}//Define function to init the form on reload:function InitForm(){//Reset the displayed total on form:document.myform.total.value='$0';document.myform.hiddentotal.value=0;document.myform.hiddenpriorradio.value=0;document.myform2.total.value='$0';document.myform2.hiddentotal.value=0;document.myform2.hiddenpriorradio.value=0;document.myform2.hiddenpriorradio.value=0;//Set all checkboxes and radio buttons on form-1 to unchecked:for (xx=0; xx < document.myform.elements.length; xx++){ if (document.myform.elements[xx].type == 'checkbox' | document.myform.elements[xx].type == 'radio'){document.myform.elements[xx].checked = false;}}//Set all checkboxes and radio buttons on form-2 to unchecked:for (xx=0; xx < document.myform2.elements.length; xx++){ if (document.myform2.elements[xx].type == 'checkbox' | document.myform2.elements[xx].type == 'radio'){document.myform2.elements[xx].checked = false;}}}// End --></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();"><form method="POST" name="myform"><font face=Arial size=2>Steak $15.25<input type="checkbox" name="Steak" value=15.25 onclick="this.form.total.value=CheckChoice(this);">Chicken $12.39<input type="checkbox" name="Chicken" value=12.39 onclick="this.form.total.value=CheckChoice(this);">Sushi $18.75<input type="checkbox" name="Sushi" value=18.75 onclick="this.form.total.value=CheckChoice(this);"><br><br><b>Prepare with this special sauce (extra charge -- only one selection allowed):</b><br>None, thanks <input type="radio" name="Sauce" value=none price=0.00onclick="this.form.total.value=CheckChoice(this);">Duck Sauce $10.99<input type="radio" name="Sauce" value=duck price=10.99onclick="this.form.total.value=CheckChoice(this);">Ginger Sauce $5.00<input type="radio" name="Sauce" value=ginger price=5.00onclick="this.form.total.value=CheckChoice(this);">Hot Sauce $1.50<input type="radio" name="Sauce" value=hot price=1.50onclick="this.form.total.value=CheckChoice(this);"><br><br><br><input type="hidden" name="hiddentotal" value=0><input type="hidden" name="hiddenpriorradio" value=0><font size=+1>Your total is: <input type="text" name="total" readonly onFocus="this.blur();" size="20"></font><br><br>(Note: Total can not be changed by the visitor.)</font></form></body><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->