Confirmable Order Form - JavaScript Made Easy: Free JavaScripts Tutorials Example Code

Metachecker.net

|

TrafficChecker.net

|

RankChecker.net

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial


Confirmable Order Form		[View Example]

JavaScript can take the contents of an HTML order form, process them, and display the order for verification even including the grand total! When the user confirms the order by clicking the button, the order is emailed to you by using freedback.com's free form processor cgi script. This script does take a bit of modification, but surely is worth it if you sell anything online. This example must be set up online to work properly. You need to set up your main cgi script! You can look at the example to get idea of what it looks like!


Insert into of First Page Example Index.htm
<!-- STEP ONE: Paste this code into the BODY of your HTML document --> <!-- Create an HTML order form similar to the one below. The confirm-order.html address is your confirm page --> <form name=orderform action="confirm-order.htm"> <div align="center">(Just check the items you wish to order.)</div> <p align="center"> <div align="center"> <table border=1> <tr> <td> <input type=checkbox name=item1A value="1A-Item_1_is_a_....15.00$"> </td> <!-- STEP TWO: Using this format, add an entry for each sale item Each item must have a checkbox in the format above. The value="" is where all the magic happens Put the Item Number then a dash (-) then the description (with underscores for any spaces) then a star () then the cost, and end with a dollar sign ($) like this: Repeat for each item for sale. --> <td>1A</td> <td>Item 1 is a ....</td> <td>$15.00</td> </tr> <tr> <td> <input type=checkbox name=item2A value="2A-Item_2_is_a_....30.00$"> </td> <td>2A</td> <td>Item 2 is a ....</td> <td>$30.00</td> </tr> <tr> <td> <input type=checkbox name=item3A value="3A-Item_3_is_a_....45.00$"> </td> <td>3A</td> <td>Item 3 is a ....</td> <td>$45.00</td> </tr> <tr> <td colspan=4 align=center> <input type=submit value="Order"> </td> </tr> </table> </div> </form>

Insert into <HEAD> of New Page Called confirm-order.htm
<SCRIPT LANGUAGE="JavaScript"> <!-- Begin function decodeString() { valNum = new Array(); valData = new Array(); var string, length, dataCount, orderData, grandTotal; string = "" + unescape(location.search); string = string.substring(1,string.length); length = location.search.length; orderData = ""; dataCount = 1; for (var c = 0; c < string.length; c++) if (string.charAt(c).indexOf("&") != -1) dataCount++; orderData = "<table border=1 width=400>"; orderData += "<tr><td>Item</td><td>Description</td><td>Cost</td></tr>"; grandTotal = 0; for (var i = 0; i < dataCount; i++) { valNum[i] = string.substring(0,string.indexOf("=")); string = string.substring(string.indexOf("=")+1,string.length); if (i == dataCount-1) valData[i] = string; else valData[i] = string.substring(0,string.indexOf("&")); ampd = valData[i].indexOf("&"); pipe = valData[i].indexOf("-"); star = valData[i].indexOf("*"); line = valData[i].indexOf("$"); itemnum = string.substring(0,pipe); itemdsc = string.substring(pipe+1,star); itemcst = string.substring(star+1,line); string = string.substring(ampd+1,string.length); orderData += "<tr>"; orderData += "<input type=hidden name=item" + (i+1) + "num value='" + itemnum + "'>"; orderData += "<input type=hidden name=item" + (i+1) + "dsc value='" + itemdsc + "'>"; orderData += "<input type=hidden name=item" + (i+1) + "cst value='$" + itemcst + "'>"; orderData += "<td>" + itemnum + "</td>"; orderData += "<td>" + itemdsc + "</td>"; orderData += "<td>" + itemcst + "</td>"; orderData += "</tr>"; grandTotal += parseInt(itemcst); } orderData += "<tr>"; orderData += "<td colspan=2 align=center>Total</td><td>" + grandTotal + ".00</td>"; orderData += "</tr>"; orderData += "<tr>"; orderData += "<td colspan=3 align=center><input type=submit value='Confirm Order!'> or <INPUT TYPE=button VALUE='BACK' onClick='goHist(-1)'></td>"; orderData += "</tr>"; orderData += "<input type=hidden name=grandtotal value='$" + grandTotal + ".00'>"; orderData += "</table>"; document.write(orderData); } function openThanks() { window.open("confirm-order-thanks.html"); // Can be any "thank you" page } // End --> </script>

Insert into <BODY> of New Page Called confirm-order.htm
<BODY onUnload="openThanks()" bgcolor="#FFFFFF"> <form> <input type=hidden name=to value="you@your-site.com"> <input type=hidden name=subject value=" Order Form "> <center> <script language="JavaScript"> <!-- Begin decodeString(); // End --> </script> </center> </form>

Complete Instruction Guide
<!-- SIX STEPS TO INSTALL CONFIRMABLE ORDER FORM: 1. Create the order form code into the BODY section 2. Using the 'value' format to make entries for each item 3. Create a new 'confirm-order.html' HTML page 4. Copy the next coding into the NEXT of your HTML document 5. Paste the onLoad event handler into the BODY tag 6. Insert the final code into the BODY of your HTML document --> <!-- STEP ONE: Paste this code into the BODY of your HTML document --> <!-- Create an HTML order form similar to the one below. The confirm-order.html address is your confirm page --> <form name=orderform action="confirm-order.html"> (Just check the items you wish to order.)<p> <table border=1> <tr> <td> <input type=checkbox name=item1A value="1A-Item_1_is_a_....15.00$"></td> <!-- STEP TWO: Using this format, add an entry for each sale item Each item must have a checkbox in the format above. The value="" is where all the magic happens Put the Item Number then a dash (-) then the description (with underscores for any spaces) then a star () then the cost, and end with a dollar sign ($) like this: Repeat for each item for sale. --> <td>1A</td> <td>Item 1 is a ....</td> <td>$15.00</td> </tr> <tr> <td> <input type=checkbox name=item2A value="2A-Item_2_is_a_....15.00$"></td> <td>2A</td> <td>Item 2 is a ....</td> <td>$30.00</td> </tr> <tr> <td> <input type=checkbox name=item3A value="3A-Item_3_is_a_....45.00$"></td> <td>3A</td> <td>Item 3 is a ....</td> <td>$45.00</td> </tr> <tr> <td colspan=4 align=center> <input type=submit value="Order"> </td> </tr> </table> </form> <!-- STEP THREE: Create a new 'confirm-order.html' document --> <!-- STEP FOUR: Save this code into the HEAD of your confirm page --> <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function decodeString() { valNum = new Array(); valData = new Array(); var string, length, dataCount, orderData, grandTotal; string = "" + unescape(location.search); string = string.substring(1,string.length); length = location.search.length; orderData = ""; dataCount = 1; for (var c = 0; c < string.length; c++) if (string.charAt(c).indexOf("&") != -1) dataCount++; orderData = "<table border=1 width=400>"; orderData += "<tr><td>Item</td><td>Description</td><td>Cost</td></tr>"; grandTotal = 0; for (var i = 0; i < dataCount; i++) { valNum[i] = string.substring(0,string.indexOf("=")); string = string.substring(string.indexOf("=")+1,string.length); if (i == dataCount-1) valData[i] = string; else valData[i] = string.substring(0,string.indexOf("&")); ampd = valData[i].indexOf("&"); pipe = valData[i].indexOf("-"); star = valData[i].indexOf(""); line = valData[i].indexOf("$"); itemnum = string.substring(0,pipe); itemdsc = string.substring(pipe+1,star); itemcst = string.substring(star+1,line); string = string.substring(ampd+1,string.length); orderData += "<tr>"; orderData += "<input type=hidden name=item" + (i+1) + "num value='" + itemnum + "'>"; orderData += "<input type=hidden name=item" + (i+1) + "dsc value='" + itemdsc + "'>"; orderData += "<input type=hidden name=item" + (i+1) + "cst value='$" + itemcst + "'>"; orderData += "<td>" + itemnum + "</td>"; orderData += "<td>" + itemdsc + "</td>"; orderData += "<td>" + itemcst + "</td>"; orderData += "</tr>"; grandTotal += parseInt(itemcst); } orderData += "<tr>"; orderData += "<td colspan=2 align=center>Total</td><td>" + grandTotal + ".00</td>"; orderData += "</tr>"; orderData += "<tr>"; orderData += "<td colspan=3 align=center><input type=submit value='Confirm Order!'> or <a href='javascript:history.go(-1)'>Go Back</a></td>"; orderData += "</tr>"; orderData += "<input type=hidden name=grandtotal value='$" + grandTotal + ".00'>"; orderData += "</table>"; document.write(orderData); } function openThanks() { window.open("confirm-order-thanks.html"); // Can be any "thank you" page } // End --> </script> </HEAD> <!-- STEP FIVE: Add the onLoad event handler into the BODY tag --> <BODY onUnload="openThanks()"> <!-- STEP SIX: Paste the last code into the BODY of confirm-order.html <form method=post action="http://cgi.freedback.com/mail.pl" name="emailform"> <!-- Don't forget to change this to your email address! --> <input type=hidden name=to value="you@your-site.com"> <input type=hidden name=subject value="* Order Form **"> <center> <script language="JavaScript"> <!-- Begin decodeString(); // End --> </script> </center> </form> <!-- Script Size: 4.79 KB -->