|
PAYPAL
SHOPPING CART
LESSON
EIGHT
THE NEW FORM
INTRODUCTION | EXPLAINING
THE CODE | THE DOWNFALLS | EXPANDING
THE SHOPPING CART | VIEWING
THE SHOPPING CART | LAST
NOTE
THE
JAVASCRIPT OPTION | THE NEW FORM | EXPLAINING
THE NEW FORM
The
Form required to work with the Javascript Code presented
in the previous lesson is basically the same typical HTML
Form coding. There are, however, several changes in how
the desired data is formated for collection.
In
the code presented on this page you will notice most, the
four selectable options On0, On1, Os0 and Os1 are
missing. Also missing are the hidden ITEM_NAME and
the price value AMOUNT. Code
in gold is standard HTML while
the code in yellow is PayPal
specific and/or affected by the Javascript.
The
Form required to work with the Javascript Code presented
in the previous lesson is basically the same typical HTML
Form coding. There are, however, several changes in how
the desired data is formated for collection.
|
|
<form
target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" onsubmit="ReadForm
(this);">
<table>
<tr>
<td>
<div align="center">
<p>ITEM<br>
<select>
<option value="KIDS T-SHIRT@14.00">Kids Tshirt($14.00)</option>
<option
value="LADIES T-SHIRT@16.00">Ladies Tshirt($16.00)</option>
<option value="MENS XL
T-SHIRT@18.00">Mens
XL Tshirt($18.00)</option>
<option value="GENERIC
SWEAT SHIRT@24.00">Mens Sweat Shirt ($24.00)</option>
</select>
</p>
</div>
</td>
<td>
<div align="center">
<p>SIZE<br>
<select>
<option value="Size=SMALL">Smal
<option value="Size=MEDIUM">Medium
<option value="Size=LARGE">Large
<option
value="Size=X-LARGE">X-Large
</select>
</p>
</div>
</td>
<td>
<div align="center">
<p>FABRIC<br>
<select>
<option value="Fabric=COTTON">Cotton
<option value="Fabric=50/50 ">50/50
<option value="Faric=FLEECE">Fleece
</select>
</p>
</div>
</td>
<td>
<div align="center">
<p>COLOR<br>
<select name="os0">
<option value="Color=WHITE">White
<option value="Color=BLACK">Black
<option value="Color=BLUE">Blue
</select>
</p>
</div>
</td>
<td>
<div align="center">
<p>TRIM<br>
<select name="os0">
<option value="Color=WHITE">White
<option value="Color=BLACK">Black
<option value="Color=RED">Red
</select>
</p>
</div>
</td>
<td>
<div align="center">
<p>PLACE<br>
<select name="os1">
<option value="Place=FRONT">Front
<option value="Place=BACK">Back
</select>
</p>
</div>
</td>
<td>
<div align="center">
<p>GIFT<br>
<select>
<option value="Gift=BIRTHDAY">Birthday
<option value="Gift=ANNIVERSARY">Anniversary
<option value="Giftr=SELF">Self
</select>
</p>
</div>
</td>
</tr>
</table>
<input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but22.gif" border="0" name="submit" alt="Make
payments with PayPal - it's fast, free and secure!">
<input type="hidden" name="add" value="1">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="someone@somewhere.com">
<input type="hidden" name="business" value="sales@graphixnstuff.com">
<input type="hidden" name="item_name" value="">
<input type="hidden" name="item_number" value="DC01">
<input type="hidden" name="amount" value="">
<input type="hidden" name="baseamt" value="0" />
<input type="hidden" name="basedes" value="DRUNKIN COW " />
<input type="hidden" name="return" value="http://www.yoursite.com/thankyou.html">
<input type="hidden" name="cancel_return" value="http://www.yoursite.com">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="currency_code" value="USD">
</form>
|
The
above HTML Code will look like this on line:
A viewer
would select a MENS style, LARGE size, BLACK color
and desire the design placed on the BACK. The shopping
cart would present the below capture for review and
purchase.
The next
lesson will explain what is happening within the Form
Code. When you are ready click HERE
When
you are ready click HERE
|