Simple Shopping Cart - JavaScript Made Easy

Metachecker.net

|

FontsMadeEasy.com

|

RankChecker.net

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial



Simple Shopping Cart		[View Sample]

This scripting will allow your website visitors to choose from a list of priced items. The JavaScript will tally the items, add the tax and send the purchase order to you.


Insert into <HEAD>


Insert into <BODY>
<script language="JavaScript"> <!-- hide contents from old browsers var Cost, GST, PST, Grand_Total; function tally() { Cost = 0; if (document.orderform.Item1.checked) { Cost = Cost + 26.15; } if (document.orderform.Item2.checked) { Cost = Cost + 26.10; } if (document.orderform.Item3.checked) { Cost = Cost + 26; } if (document.orderform.Item4.checked) { Cost = Cost + 26; } if (document.orderform.Item5.checked) { Cost = Cost + 26.44; } if (document.orderform.Item6.checked) { Cost = Cost + 26.01; } if (document.orderform.Item7.checked) { Cost = Cost + 26; } if (document.orderform.Item8.checked) { Cost = Cost + 26; } if (document.orderform.Item9.checked) { Cost = Cost + 25; } GST = (Cost * 0.07); PST = (Cost * 0.07); Cost = dollar(Cost); GST = dollar(GST); PST = dollar(PST); Grand_Total = parseFloat(Cost) + parseFloat(GST) + parseFloat(PST); Grand_Total = dollar(Grand_Total); document.orderform.Total.value = "$" + Cost; document.orderform.GST.value = "$" + GST; document.orderform.PST.value = "$" + PST; document.orderform.GrandTotal.value = "$" + Grand_Total; } function dollar (amount) { amount = parseInt(amount * 100); amount = parseFloat(amount/100); if (((amount) == Math.floor(amount)) && ((amount - Math.floor (amount)) == 0)) { amount = amount + ".00" return amount; } if ( ((amount * 10) - Math.floor(amount * 10)) == 0) { amount = amount + "0"; return amount; } if ( ((amount * 100) - Math.floor(amount * 100)) == 0) { amount = amount; return amount; } return amount; } //--> </script> <center><h1>A Simple Shopping Cart</h1></center> <p>This will allow your visitors to choose from a list of priced items. The script will tally the items, add the tax and send the order to you. This demonstration uses a "mailto:" form with to a dummy address of "me@mydomain.com". If you click the "Send Order" button the order should be returned to you as undeliverable, so you will be able to see the way it works. <b>Note:</b> This type of form is only supported by Netscape and Internet Explorer 4.x. In a real order form, a cgi script would usually be used.</p> <form method="post" name="orderform" action="mailto:me@mydomain.com" enctype="text/plain""> <table border="0"> <tr><td colspan="4"> <p><input type="checkbox" name="Item1" value="Item1_chosen" onclick="tally()"> Item One ($26.15) <p><input type="checkbox" name="Item2" value="Item2_chosen" onclick="tally()"> Item Two ($26.10) <p><input type="checkbox" name="Item3" value="Item3_chosen" onclick="tally()"> Item Three ($26) <p><input type="checkbox" name="Item4" value="Item4_chosen" onclick="tally()"> Item Four ($26) <p><input type="checkbox" name="Item5" value="Item5_chosen" onclick="tally()"> Item Five ($26.44) <p><input type="checkbox" name="Item6" value="Item6_chosen" onclick="tally()"> Item Six ($26.10) <p><input type="checkbox" name="Item7" value="Item7_chosen" onclick="tally()"> Item Seven ($26) <p><input type="checkbox" name="Item8" value="Item8_chosen" onclick="tally()"> Item Eight ($26) <p><input type="checkbox" name="Item9" value="Item9_chosen" onclick="tally()"> Item Nine ($25) </td></tr> <tr> <td> Total <input type="text" name="Total" value="$0" size="7"></td> <td> PST (7%) <input type="text" name="PST" value="$0" size="6"></td> <td colspan="2"> GST (7%) <input type="text" name="GST" value="$0" size="6"></td> </tr> <tr> <td> Grand Total <input type="text" name="GrandTotal" value="$0" size="8"></td> </tr> <tr> <td>Company Name:</td> <td colspan="3"><input type="Text" name="Company" size="35" maxlength="40"></td> </tr> <tr> <td>Contact Name:</td> <td colspan="3">First <input type="Text" name="FirstName" size="15" maxlength="20"> Last <input type="Text" name="LastName" size="15" maxlength="20"></td> </tr> <tr> <td>Address</td> <td><input type="Text" name="Street" size="20" maxlength="40"></td> </tr> <tr> <td>City</td> <td><input type="Text" name="City" size="20" maxlength="20"> </td> <td>Province/State:</td> <td><input type="Text" name="Province" size="20" maxlength="40"></td> </tr> <tr> <td>Country:</td> <td><input type="Text" name="Country" size="20" maxlength="20"></td> <td>Code:</td> <td><input type="Text" name="Code" size="9" maxlength="10"></td> </tr> <tr> <td>Phone:</td> <td><input type="Text" name="Area" size="3" maxlength="5"> <input type="Text" name="Phone" size="8" maxlength="10"></td> <td>Fax:</td> <td><input type="Text" name="AreaFax" size="3" maxlength="5"> <input type="Text" name="Fax" size="8" maxlength="10"></td> </tr> <tr> <td>Email Address:</td> <td colspan=2><input type="Text" name="Email" size="30" maxlength="30"></td> </tr> <tr><td colspan="4" height="3"><hr></td></tr> <tr><td colspan="2" align="center"><input type="Submit" value="Send Order"></td> <td colspan="2" align="center"><input type="RESET" value="Reset Order"></td></tr> </table> </form>

Other Options