This form:
<FORM METHOD=POST ACTION="http://www.bluegalaxy.info/webshopsolution/cgi-bin/my_cart.pl">
<table border=0 CELLPADDING=10 CELLSPACING=5 width=300>
<tr>
<td colspan=2>
<FORM NAME="form1" METHOD=POST ACTION="http://www.bluegalaxy.info/webshopsolution/cgi-bin/my_cart.pl">
<FONT FACE="verdana" SIZE=-1 COLOR=#000000>
<B>Gift Basket with Roses<BR></B>
Price: $50.00 (includes delivery) <BR>
Plus $1.00 per Rose</B>
<BR><BR>
</td></tr>
<tr><td valign="top"><img src="http://www.bluegalaxy.info/webshopsolution/images/gift_basket.jpg"></td>
<td align="right" valign="top">
<FONT FACE="verdana" SIZE=-1 COLOR=#000000>
Add chocolates?:<BR>
<SELECT NAME="custom2" SIZE=1>
<OPTION SELECTED>Chocolates +$15
<OPTION>No Chocolates
</SELECT><BR>
<BR><BR>
<FONT FACE="verdana" SIZE=-1 COLOR=#000000>
Number of roses:<BR>
<SELECT NAME="custom3" SIZE=2>
<SCRIPT>
var i = 0 // Initialize
var s = 0 // Length Start value
var e = 24 // Length End value
var c = 1 // Cost in units of money per extra unit of length (1 = $1.00 etc.)
for (var i = s; i<= e; i++)
{
document.write ("<OPTION VALUE=\""+i+" roses +$"+(i-s)*c+"\">"+i+"\n")
}
</SCRIPT>
</SELECT>
</td></tr>
<tr><td COLSPAN=2 align="right">
<FONT FACE="verdana" SIZE=-1 COLOR=#000000>
<center>Recipient Shipping Address: (required)</center><BR>
Name: <input type=text name=custom7 SIZE=25 MAXLENGTH=35><BR>
Address: <input type=text name=custom9 SIZE=25 MAXLENGTH=35><BR>
City: <input type=text name=custom11 SIZE=25 MAXLENGTH=35><BR>
State: <input type=text name=custom13 SIZE=25 MAXLENGTH=35><BR>
Zip: <input type=text name=custom15 SIZE=10 MAXLENGTH=12><BR>
Country: <input type=text name=custom17 SIZE=25 MAXLENGTH=35><BR>
</td></tr>
<tr><td colspan=2>
<INPUT TYPE=HIDDEN NAME=name VALUE="Gift Basket with Roses">
<INPUT TYPE=HIDDEN NAME=price VALUE="50.00">
<INPUT TYPE=HIDDEN NAME=sh VALUE="3">
<INPUT TYPE=HIDDEN NAME=img VALUE="gift_basket.jpg">
<INPUT TYPE=HIDDEN NAME=return VALUE="http://www.bluegalaxy.info/webshopsolution/demo.html">
<INPUT TYPE=HIDDEN NAME=custom6 VALUE="Recipient shipping address (name, address, city, state, zip and country):">
<FONT FACE="verdana" SIZE=-1 COLOR=#000000>Type special message for loved one here:</font><BR>
<INPUT TYPE=HIDDEN NAME=custom4 VALUE="Special message for loved one:">
<TEXTAREA NAME=custom5 COLS=30 ROWS=3 WRAP=VIRTUAL>
</TEXTAREA>
<BR><BR>
<SCRIPT LANGUAGE="JavaScript">
document.write('<INPUT TYPE=HIDDEN NAME="add" VALUE="1">\n<INPUT TYPE=BUTTON VALUE="Purchase this basket" OnClick="RequiredFields()";>');
</SCRIPT>
<NOSCRIPT>
<INPUT TYPE=SUBMIT NAME="add" VALUE="Purchase this basket">
</NOSCRIPT>
</FORM>
</td></tr></table>
Makes this:
Notes about this form:
- This form demonstrates that you can collect a shipping address for gift items. You can also collect special notes or messages via typed input from shoppers. The "Type special message for loved one here:" is done using a TEXTAREA:
<TEXTAREA NAME=custom5 COLS=30 ROWS=3 WRAP=VIRTUAL>
- This form collects 17 pieces of custom product data: custom17. However, there are no limits to the amount of product data you can have in your product forms.
- This form uses the special "custom price add-on" feature of the cart in a couple of places. Each extra rose adds $1 to the overall cost of the gift basket. Choosing to add Chocolates will add $15 to the overall cost of the gift basket. It works by using a plus symbol '+' followed by the currency symbol your cart uses: '$', followed by a number. This special add-on price must be passed to the cart in one of the "custom" tags of your form. In this case the add on code for the roses is handled with javascript right inside the select menu in the body of the page. For example:
Number of roses:
<SELECT NAME="custom3" SIZE=2>
<SCRIPT>
var i = 0 // Initialize
var s = 0 // Length Start value
var e = 24 // Length End value
var c = 1 // Cost in units of money per extra unit of length (1 = $1.00 etc.)
for (var i = s; i<= e; i++)
{
document.write ("<OPTION VALUE=\""+i+" roses +$"+(i-s)*c+"\">"+i+"\n")
}
</SCRIPT>
</SELECT>
- This form uses another bit of javascript code to require that all the shipping address fields have data before the form will post to the cart. This javascript has several parts. The javascript function 'RequiredFields()' is placed before the the </HEAD> portion of the web page:
<SCRIPT LANGUAGE="JavaScript">
function RequiredFields()
{
if (!document.form1.custom7.value ||
!document.form1.custom9.value ||
!document.form1.custom11.value ||
!document.form1.custom13.value ||
!document.form1.custom15.value ||
!document.form1.custom17.value
)
{
alert("Please enter all required fields.");
}
else
{
document.form1.submit();
}
}
</SCRIPT>
As you can see, this function works on these custom tags: custom7, custom9, custom11, custom13, custom15, custom17. Another thing this javascript requires is the NAME="form1" in the ACTION tag of the form. For example:
<FORM NAME="form1" METHOD=POST ACTION="http://www.bluegalaxy.info/webshopsolution/cgi-bin/my_cart.pl">
And the final thing that this javascript feature requires is the following inside the form:
<SCRIPT LANGUAGE="JavaScript">
document.write('<INPUT TYPE=HIDDEN NAME="add" VALUE="1">\n<INPUT TYPE=BUTTON VALUE="Purchase this basket" OnClick="RequiredFields()";>');
</SCRIPT>
<NOSCRIPT>
<INPUT TYPE=SUBMIT NAME="add" VALUE="Purchase this basket">
</NOSCRIPT>
|
