Hi everyone. I have this one page on our site that we would like for customers to order some parts from. It is separate from our current database on our site and there really are no part numbers because the calculations for the parts are on the fly (depending what the user chooses). Here's the link: https://www.ironwoodelectronics.com/elastomer.cfm We do not have our certificate updated yet, so you might get the unsecured page, but it's safe to use. We're not going to ask for credit card info. on here. I think we're going to go through stripe.com for that.
But what I don't know how to do is to create a shopping cart for this page. If the user goes through and chooses the correct dimensions of what he needs, I have the info. with pricing output to a table at the bottom. The problem is if they choose a different part with different dimensions, I lose the info. from the first option. This is why I need to do a shopping cart. I want each option they choose, to display in the table and then if they want to clear one, they can. I would also probably need the Quantity field to be in the table also. I have a different table created for each of the 4 part options in the drop down because that was the only way I could get it to work correctly. Here's the code I have for this page below. Thanks for your help.
Andy
<h1>Shin-Etsu Polymer Elastomer cut to size</h1>
<div id="container">
<!--- store the selected Main_Group variable variable after the first select boxes submits itself --->
<cfif NOT isDefined("form.submit")>
<cfif isDefined('form.PartNumber')>
<cfset page.select_Part = form.PartNumber>
</cfif>
<cfif isDefined('form.X1')>
<cfset page.select_X1 = form.X1>
</cfif>
<cfif isDefined('form.X2')>
<cfset page.select_X2 = form.X2>
</cfif>
<cfif isDefined('form.X3')>
<cfset page.select_X3 = form.X3>
</cfif>
<cfif isDefined('form.X4')>
<cfset page.select_X4 = form.X4>
</cfif>
<cfif isDefined('form.Y1')>
<cfset page.select_Y1 = form.Y1>
</cfif>
<cfif isDefined('form.Y2')>
<cfset page.select_Y2 = form.Y2>
</cfif>
<cfif isDefined('form.Y3')>
<cfset page.select_Y3 = form.Y3>
</cfif>
<cfif isDefined('form.Y4')>
<cfset page.select_Y4 = form.Y4>
</cfif>
<cfif isDefined('form.Quantity1')>
<cfset page.select_Quantity1 = form.Quantity1>
</cfif>
<cfif isDefined('form.Quantity2')>
<cfset page.select_Quantity2 = form.Quantity2>
</cfif>
<cfif isDefined('form.Quantity3')>
<cfset page.select_Quantity3 = form.Quantity3>
</cfif>
<cfif isDefined('form.Quantity4')>
<cfset page.select_Quantity4 = form.Quantity4>
</cfif>
</cfif>
<div align="center">
<table width="650" cellpadding="3" cellspacing="10" border="0">
<cfoutput>
<cfform method="post" name="DropDown">
<tr>
<td align=right class="grayfaqanswers">Shin-Etsu Part Number:</td>
<td align=left>
<select name="PartNumber" class="formboxElastomer" required="required" onchange="this.form.submit()">
<option selected value="">Part Number</option>
<option value="MT0.1Px50x50x0.75T" <cfif isDefined('page.select_Part') and PartNumber Is"MT0.1Px50x50x0.75T">selected</cfif>>MT0.1Px50x50x0.75T</option>
<option value="MT4x0.05Px50x50x0.5T" <cfif isDefined('page.select_Part') and PartNumber Is"MT4x0.05Px50x50x0.5T">selected</cfif>>MT4x0.05Px50x50x0.5T</option>
<option value="MTP4x0.05Px15x50x0.25T" <cfif isDefined('page.select_Part') and PartNumber Is"MTP4x0.05Px15x50x0.25T">selected</cfif>>MTP4x0.05Px15x50x0.25T</option>
<option value="MT0.1Px56x56x0.5T" <cfif isDefined('page.select_Part') and PartNumber Is"MT0.1Px56x56x0.5T">selected</cfif>>MT0.1Px56x56x0.5T</option>
</select>
</td>
</tr>
<!--- if the correct part number selection has been made, display the text boxes --->
<cfif isDefined('page.select_Part') and PartNumber Is"MT0.1Px50x50x0.75T">
<tr>
<td rowspan="8"><img src="images/elastomer_cut_size_images/MT0.1Px50x50x0.75T_part1.jpg" width="477" height="401" /></td>
</tr>
<tr>
<td class="grayfaqanswers" align="right">Xmm:</td>
<td>
<cfinput name="X1" type="text" validate="integer" message="Please enter only a whole number between 1 and 50 for the Xmm value!" range = "1,50" validateAt="onSubmit" required="yes" class="formboxElastomer" size="6">
</td>
<!--- This displays the image on the right. Would also need to add data tags after the Ymm text box and the Quantity text box then.
<td rowspan="4"><img src="images/elastomer_cut_size_images/MT0.1Px50x50x0.75T_part1.jpg" width="477" height="401" /></td> --->
</tr>
<tr>
<td class="grayfaqanswers" align="right">Ymm:</td>
<td>
<cfinput name="Y1" type="text" validate="integer" message="Please enter only a whole number between 1 and 50 for the Ymm value!" range = "1,50" validateAt="onSubmit" required="yes" class="formboxElastomer" size="6">
</td>
</tr>
<tr>
<td class="grayfaqanswers" align="right">Quantity:</td>
<td>
<cfinput name="Quantity1" type="text" validate="integer" message="Please enter only a whole number for the Quantity!" validateAt="onSubmit" required="yes" class="formboxElastomer" value="1" size="6">
</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3" align="center">
<cfinput name="SubmitElastomer" type="submit" onchange="this.form.submit()" value="Update">
<cfinput name="Reset" type="reset" value="Reset">
</td>
</tr>
</cfif>
<cfif isDefined('page.select_Part') and PartNumber Is"MT4x0.05Px50x50x0.5T">
<tr>
<td rowspan="8" align="right"><img src="images/elastomer_cut_size_images/MT4x0.05Px50x50x0.5T_part2.jpg" width="478" height="401" /></td>
</tr>
<tr>
<td class="grayfaqanswers" align="right">Xmm:</td>
<td>
<cfinput name="X2" type="text" validate="integer" message="Please enter only a whole number between 1 and 50 for the Xmm value!" range = "1,50" validateAt="onSubmit" required="yes" class="formboxElastomer" size="6">
</td>
</tr>
<tr>
<td class="grayfaqanswers" align="right">Ymm:</td>
<td>
<cfinput name="Y2" type="text" validate="integer" message="Please enter only a whole number between 1 and 50 for the Ymm value!" range = "1,50" validateAt="onSubmit" required="yes" class="formboxElastomer" size="6">
</td>
</tr>
<tr>
<td class="grayfaqanswers" align="right">Quantity:</td>
<td>
<cfinput name="Quantity2" type="text" validate="integer" message="Please enter only a whole number for the Quantity!" validateAt="onSubmit" required="yes" class="formboxElastomer" value="1" size="6">
</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3" align="center">
<cfinput name="SubmitElastomer" type="submit" onchange="this.form.submit()" value="Update">
<cfinput name="Reset" type="reset" value="Reset">
</td>
</tr>
</cfif>
<cfif isDefined('page.select_Part') and PartNumber Is"MTP4x0.05Px15x50x0.25T">
<tr>
<td rowspan="8" align="right"><img src="images/elastomer_cut_size_images/MTP4x0.05Px15x50x0.25T_part3.jpg" width="478" height="401" /></td>
</tr>
<tr>
<td class="grayfaqanswers" align="right">Xmm:</td>
<td>
<cfinput name="X3" type="text" validate="integer" message="Please enter only a whole number between 1 and 15 for the Xmm value!" range = "1,15" validateAt="onSubmit" required="yes" class="formboxElastomer" size="6">
</td>
</tr>
<tr>
<td class="grayfaqanswers" align="right">Ymm:</td>
<td>
<cfinput name="Y3" type="text" validate="integer" message="Please enter only a whole number between 1 and 50 for the Ymm value!" range = "1,50" validateAt="onSubmit" required="yes" class="formboxElastomer" size="6">
</td>
</tr>
<tr>
<td class="grayfaqanswers" align="right">Quantity:</td>
<td>
<cfinput name="Quantity3" type="text" validate="integer" message="Please enter only a whole number for the Quantity!" validateAt="onSubmit" required="yes" class="formboxElastomer" value="1" size="6">
</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3" align="center">
<cfinput name="SubmitElastomer" type="submit" onchange="this.form.submit()" value="Update">
<cfinput name="Reset" type="reset" value="Reset">
</td>
</tr>
</cfif>
<cfif isDefined('page.select_Part') and PartNumber Is"MT0.1Px56x56x0.5T">
<tr>
<td rowspan="8" align="right"><img src="images/elastomer_cut_size_images/MT0.1Px56x56x0.5T_part4.jpg" width="479" height="401" /></td>
</tr>
<tr>
<td class="grayfaqanswers" align="right">Xmm:</td>
<td>
<cfinput name="X4" type="text" validate="integer" message="Please enter only a whole number between 1 and 56 for the Xmm value!" range = "1,56" validateAt="onSubmit" required="yes" class="formboxElastomer" size="6">
</td>
</tr>
<tr>
<td class="grayfaqanswers" align="right">Ymm:</td>
<td>
<cfinput name="Y4" type="text" validate="integer" message="Please enter only a whole number between 1 and 56 for the Ymm value!" range = "1,56" validateAt="onSubmit" required="yes" class="formboxElastomer" size="6">
</td>
</tr>
<tr>
<td class="grayfaqanswers" align="right">Quantity:</td>
<td>
<cfinput name="Quantity4" type="text" validate="integer" message="Please enter only a whole number for the Quantity!" validateAt="onSubmit" required="yes" class="formboxElastomer" value="1" size="6">
</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3" align="center">
<cfinput name="SubmitElastomer" type="submit" onchange="this.form.submit()" value="Update">
<cfinput name="Reset" type="reset" value="Reset">
</td>
</tr>
</cfif>
</cfform>
</table>
<p>
<!--- if the correct part number selection has been made, display the calculations with the appropriate sell price results --->
<cfif isDefined('page.select_Part') and isDefined('page.select_X1') and isDefined('page.select_Y1') and PartNumber Is"MT0.1Px50x50x0.75T">
<cfset ElastomerCost = 275.55>
<cfset CuttingCost = 30>
<cfset KFactor = 2.5>
<cfset Xmm = Int(50/#X1#)>
<cfset Ymm = Int(50/#Y1#)>
<cfset SellPrice = NumberFormat(((ElastomerCost / (Xmm*Ymm)) + CuttingCost) * KFactor, '9.99')>
<cfset Qty = #Quantity1#>
<cfset FinalPrice = SellPrice * #Quantity1#>
<table class="grayfaqanswers" id="moderntable">
<tr class="elastomerheader">
<td width=150 align="left">Part Number:</td>
<td>Xmm:</td>
<td>Ymm:</td>
<td>Quantity:</td>
<td>Price:</td>
<td>Final Price:</td>
</tr>
<tr><td colspan="6" valign="top" align="center"><hr></td></tr>
<tr>
<td width=150 align="left">#PartNumber#</td>
<td>#X1#</td>
<td>#Y1#</td>
<td>#Quantity1#</td>
<td>#LSNumberFormat(SellPrice, "$_.__")#</td>
<td class="FinalPrice">#LSNumberFormat(FinalPrice, "$_.__")#</td>
</tr>
</table>
<div align="center">
<br />
<button type="button" onclick="alert('Please Call Ironwood Electronics at 800-404-0204 or 952-229-8200 to place this order')">Place Order</button>
</div>
<cfelseif isDefined('page.select_Part') and isDefined('page.select_X2') and isDefined('page.select_Y2') and PartNumber Is"MT4x0.05Px50x50x0.5T">
<cfset ElastomerCost = 616>
<cfset CuttingCost = 30>
<cfset KFactor = 2.5>
<cfset Xmm = Int(50/#X2#)>
<cfset Ymm = Int(50/#Y2#)>
<cfset SellPrice = NumberFormat(((ElastomerCost / (Xmm*Ymm)) + CuttingCost) * KFactor, '9.99')>
<cfset Qty = #Quantity2#>
<cfset FinalPrice = SellPrice * #Quantity2#>
<table class="grayfaqanswers" id="moderntable">
<tr class="elastomerheader">
<td width=150 align="left">Part Number:</td>
<td>Xmm:</td>
<td>Ymm:</td>
<td>Quantity:</td>
<td>Price:</td>
<td>Final Price:</td>
</tr>
<tr><td colspan="6" valign="top" align="center"><hr></td></tr>
<tr>
<td width=150 align="left">#PartNumber#</td>
<td>#X2#</td>
<td>#Y2#</td>
<td>#Quantity2#</td>
<td>#LSNumberFormat(SellPrice, "$_.__")#</td>
<td class="FinalPrice">#LSNumberFormat(FinalPrice, "$_.__")#</td>
</tr>
</table>
<div align="center">
<br />
<button type="button" onclick="alert('Please Call Ironwood Electronics at 800-404-0204 or 952-229-8200 to place this order')">Place Order</button>
</div>
<cfelseif isDefined('page.select_Part') and isDefined('page.select_X3') and isDefined('page.select_Y3') and PartNumber Is"MTP4x0.05Px15x50x0.25T">
<cfset ElastomerCost = 250>
<cfset CuttingCost = 30>
<cfset KFactor = 2.5>
<cfset Xmm = Int(15/#X3#)>
<cfset Ymm = Int(50/#Y3#)>
<cfset SellPrice = NumberFormat(((ElastomerCost / (Xmm*Ymm)) + CuttingCost) * KFactor, '9.99')>
<cfset Qty = #Quantity3#>
<cfset FinalPrice = SellPrice * #Quantity3#>
<table class="grayfaqanswers" id="moderntable">
<tr class="elastomerheader">
<td width=150 align="left">Part Number:</td>
<td>Xmm:</td>
<td>Ymm:</td>
<td>Quantity:</td>
<td>Price:</td>
<td>Final Price:</td>
</tr>
<tr><td colspan="6" valign="top" align="center"><hr></td></tr>
<tr>
<td width=150 align="left">#PartNumber#</td>
<td>#X3#</td>
<td>#Y3#</td>
<td>#Quantity3#</td>
<td>#LSNumberFormat(SellPrice, "$_.__")#</td>
<td class="FinalPrice">#LSNumberFormat(FinalPrice, "$_.__")#</td>
</tr>
</table>
<div align="center">
<br />
<button type="button" onclick="alert('Please Call Ironwood Electronics at 800-404-0204 or 952-229-8200 to place this order')">Place Order</button>
</div>
<cfelseif isDefined('page.select_Part') and isDefined('page.select_X4') and isDefined('page.select_Y4') and PartNumber Is"MT0.1Px56x56x0.5T">
<cfset ElastomerCost = 205>
<cfset CuttingCost = 30>
<cfset KFactor = 2.5>
<cfset Xmm = Int(56/#X4#)>
<cfset Ymm = Int(56/#Y4#)>
<cfset SellPrice = NumberFormat(((ElastomerCost / (Xmm*Ymm)) + CuttingCost) * KFactor, '9.99')>
<cfset Qty = #Quantity4#>
<cfset FinalPrice = SellPrice * #Quantity4#>
<table class="grayfaqanswers" id="moderntable">
<tr class="elastomerheader">
<td width=150 align="left">Part Number:</td>
<td>Xmm:</td>
<td>Ymm:</td>
<td>Quantity:</td>
<td>Price:</td>
<td>Final Price:</td>
</tr>
<tr><td colspan="6" valign="top" align="center"><hr></td></tr>
<tr>
<td width=150 align="left">#PartNumber#</td>
<td>#X4#</td>
<td>#Y4#</td>
<td>#Quantity4#</td>
<td>#LSNumberFormat(SellPrice, "$_.__")#</td>
<td class="FinalPrice">#LSNumberFormat(FinalPrice, "$_.__")#</td>
</tr>
</table>
<div align="center">
<br />
<br />
<button type="button" onclick="alert('Please Call Ironwood Electronics at 800-404-0204 or 952-229-8200 to place this order')">Place Order</button>
</div>
</cfif>
</cfoutput>
</div>
<div align="center">
<br />
<br />
<br />
<br />
<br />
<br />
</div>
</div>