Invintory control using JavaScript on a form field?

xmaveric · Jul 1, 2005

I am trying to control how many items a user can order by changing the form field with JavaScript. This isn't working well. Perhaps someone could tell me how to code a "go-between" page that would compare the quantity requested with the number of items in inventory?

I did not program this shopping cart system, but I am stuck with it. I am a novice at ColdFusion and an struggling to figure this out. Here is the code, feel free to ask any questions:

displayupdateablecartcontent.cfm

Code:

<CFSET CartTotal=0>
<CF_ShoppingCart FUNCTION="list" CART="wpf">
<CFSET QtyList = "#ShoppingCart_Qty#">
<CFSET ItemList = "#ShoppingCart_Product#">

<!--- Code to Set Qty to Zero (for Delete link) --->
<!--- javascript:document.cart.Qty#ListElement#.value=0; --->

<script language="JavaScript1.1">
<!--

function setFieldValue(oField, iValue){
	oField.value = iValue
}

//-->
</script>
<CFOUTPUT>
<table border="0" width="400" cellspacing="0" cellpadding="4" align="center" class="boldfont">
	<tr valign="bottom">
		<td align="left" bgcolor="#tablebgcolor#">Product</td>
		<td align="left" bgcolor="#tablebgcolor#">Price</td>
		<td align="left" bgcolor="#tablebgcolor#">Sub Total</td>
		<td align="left" bgcolor="#tablebgcolor#">Quantity</td>
		<td align="left" bgcolor="#tablebgcolor#">&nbsp;</td>
	</tr>
<FORM NAME="cart" ACTION="updatecart.cfm?newLocation=#URLEncodedFormat('checkout.cfm')#" METHOD="POST" ENABLECAB="Yes">
<INPUT TYPE="hidden" NAME="NumItemsListed" VALUE="#ListLen(QtyList)#">
</CFOUTPUT>
<CFLOOP INDEX="ListElement" from="1" TO="#ListLen(QtyList)#">
<cfquery name="listProducts" datasource="#dbname#" dbtype="ODBC">
	SELECT		*
	FROM		#company#item
	WHERE		ID = '#ListGetAt(ItemList,ListElement)#'
</cfquery>
	<cfif listProducts.RecordCount>
		<CFSET ProdQty = "#ListGetAt(QtyList,ListElement)#">
		<!--- Check for quantity price-break --->
		<cfif ProdQty gte listProducts.qtydiscountqty AND listProducts.qtydiscountqty gt 0>
			<CFSET ProdPrice = listProducts.qtydiscountprice>
		<cfelse>
			<CFSET ProdPrice = listProducts.price>		
		</cfif>
		<!--- End Price-break check --->
		<CFSET CartTotal = Evaluate(CartTotal + (ProdPrice * ProdQty))>
		<CFOUTPUT>
			<tr valign="top">
				<td>#listProducts.name#</td>
				<INPUT TYPE="hidden" NAME="Item#ListElement#" VALUE="#listProducts.id#">
				<td align="right">#DollarFormat(ProdPrice)#</td>
		 		<td align="right">#DollarFormat(ProdPrice * ProdQty)#</td>
				<cfif #ProdQty# GT #listProducts.inventory#>
				<td ALIGN="center">1<input type="text" name="Qty#ListElement#" value="#ProdQty#" size="1" onmouseover="setFieldValue(document.cart.Qty#ListElement#,#listProducts.inventory#); document.cart.action = 'updatecart.cfm'; document.cart.submit();"></td>
				<cfelse>
				<td ALIGN="center">2<input type="text" name="Qty#ListElement#" value="#ProdQty#" size="1" onChange="setFieldValue(document.cart.Qty#ListElement#,this.value); document.cart.action = 'updatecart.cfm'; document.cart.submit();"></td>
				</cfif>
				<td ALIGN="right"><A HREF="JavaScript:  setFieldValue(document.cart.Qty#ListElement#,0); document.cart.action = 'updatecart.cfm'; document.cart.submit();">Delete</A></td>
	    	</tr>
		</CFOUTPUT>				
	<cfelse>
		<CF_ShoppingCart FUNCTION="remove" ITEM="#ListGetAt(ItemList,ListElement)#" QTY="#ListGetAt(QtyList,ListElement)#" CART="wpf">	
	</cfif>
</CFLOOP>

<CFOUTPUT>
	<tr valign="top">
		<td colspan=2 align="right"><font face="verdana,Arial,Helvetica,sans-serif" size="2"><B>Order Total </B></FONT></td>
		<td align="right"><p><font face="verdana,Arial,Helvetica,sans-serif" size="2">#DollarFormat(CartTotal)# </font></p></td>
		<td colspan=2></td>
   	</tr>
<!--- Bottom Navigation --->
	<tr align="center"><td colspan=5>
	<INPUT TYPE="submit" value="Place Order" ></td></tr>
</FORM>
	<tr valign="top" align="center">
		<td colspan=5>
			<table border="0" cellspacing="0" cellpadding="0">
				<tr>
				<FORM ACTION="JavaScript:  document.cart.action = 'updatecart.cfm?newLocation=categories%2Ecfm'; document.cart.submit();" METHOD="POST" ENABLECAB="Yes">
					<td><INPUT TYPE ="submit" value="Continue Shopping"></td>
				</FORM>
					<td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
				<FORM ACTION="ClearCart.cfm" METHOD="POST" ENABLECAB="Yes">
					<td><INPUT TYPE ="submit" value="Empty Cart"></td>
				</FORM>
				</tr>
			</table>
		</td>
	</tr>
<!--- End Bottom Navigation --->
</CFOUTPUT>
</TABLE>

viewcart.cfm

Code:

<cfinclude template="#company#_header.cfm">
<div id="PageContent" align="right"><cfinclude template="cart_menu.cfm"></div>
<p><cfinclude template="displayUpdateableCartContents.cfm"></p>
<cfinclude template="#company#_footer.cfm">

updatecart.cfm

Code:

<!--- Clear the Cart first --->
	<!--- Don't let the browser cache this page. Otherwise we might
	      be looking at a cached shopping cart which does not reflect
		  what is truly in the cart. --->
	<CFHEADER Name="Expires" Value="#Now()#">
	<CFHEADER NAME="pragma" VALUE="no-cache">
	<CFAPPLICATION NAME="wpfstore" CLIENTMANAGEMENT="Yes">
	<CF_ShoppingCart FUNCTION="clear" CART="wpf">	
<!--- Then Re-fill the cart with the updated information --->
<CFINCLUDE TEMPLATE="addtocart.cfm">

clearcart.cfm

Code:

<!--- Don't let the browser cache this page. Otherwise we might
      be looking at a cached shopping cart which does not reflect
	  what is truly in the cart. --->
<CFHEADER Name="Expires" Value="#Now()#">
<CFHEADER NAME="pragma" VALUE="no-cache">

<CFAPPLICATION NAME="wpfstore" CLIENTMANAGEMENT="Yes">

<CF_ShoppingCart FUNCTION="clear" CART="wpf">	

<cflocation url="categories.cfm" addtoken="No">

addtocart.cfm

Code:

<!--- Don't let the browser cache this page. Otherwise we might
      be looking at a cached shopping cart which does not reflect
	  what is truly in the cart. --->
<CFHEADER Name="Expires" Value="#Now()#">
<CFHEADER NAME="pragma" VALUE="no-cache">

<CFAPPLICATION NAME="wpfstore" CLIENTMANAGEMENT="Yes">
<cfquery name="listItems" datasource="#dbname#" dbtype="ODBC">
	SELECT		*
	FROM		#company#item
	ORDER BY	itemorder
</cfquery>

<cfif isdefined('FORM.FieldNames')>
	<CFSET NumItems = Form.NumItemsListed>
	<!--- Loop through items selected and quantities --->
 		 <CFIF NumItems IS '1'>
				<CFSET CartItem = "#FORM.item1#">
				<CFSET CartQty = "#FORM.qty1#">
				<cfif Evaluate(CartQty) GT '0'>
					<CF_ShoppingCart FUNCTION="add" ITEM="#CartItem#" QTY="#CartQty#" CART="wpf">
				</cfif>
		<CFELSE>
 			<cfloop Index="loopcounter" From="1" To="#NumItems#">		
				<CFSET QtyEval = 'Evaluate(FORM.qty#loopcounter#)'>
				<cfif Evaluate(QtyEval) GT '0'>
					<CFSET CartItem = "Evaluate(FORM.item#loopcounter#)">
					<CFSET CartQty = "Evaluate(FORM.qty#loopcounter#)">
					<CF_ShoppingCart FUNCTION="add" ITEM="#Evaluate(CartItem)#" QTY="#Evaluate(CartQty)#" CART="wpf">
				</cfif>
			</cfloop>
		 </cfif> 
<CFELSE>
	<CF_ShoppingCart FUNCTION="add" ITEM="#item#" QTY="#qty#" CART="wpf">	
</CFIF>

<cfif IsDefined("URL.newLocation")>
	<cflocation url="#URL.newLocation#" addtoken="No">
<cfelse>
	<cfinclude template="ViewCart.cfm">
</cfif>

checkout.cfm

Code:

<cfinclude template="#company#_header.cfm">
<div id="PageContent" align="right"><cfinclude template="cart_menu.cfm"></div>
<CFAPPLICATION NAME="wpfstore" CLIENTMANAGEMENT="Yes">
<CFSET CartTotal=0>
<CF_ShoppingCart FUNCTION="list" CART="wpf">
<CFSET QtyList = "#ShoppingCart_Qty#">   			                  
<CFSET ItemList = "#ShoppingCart_Product#">
<script language="javascript">
	function check_fields() {
		if (document.theform.billtofirstname.value=="") {
			alert("Please enter your first name");document.theform.billtofirstname.focus();return false
		}
		if (document.theform.billtolastname.value=="") {
			alert("Please enter your last name");document.theform.billtolastname.focus();return false
		}
		if (document.theform.billtoaddress.value=="") {
			alert("Please enter your address");document.theform.billtoaddress.focus();return false
		}
		if (document.theform.billtocity.value=="") {
			alert("Please enter your city");document.theform.billtocity.focus();return false
		}
		if (document.theform.billtostate.value=="") {
			alert("Please enter your state");document.theform.billtostate.focus();return false
		}
		if (document.theform.billtozip.value=="") {
			alert("Please enter your zip");document.theform.billtozip.focus();return false
		}
		if (document.theform.ccnumber.value=="") {
			alert("Please enter your Credit Card Number");document.theform.ccnumber.focus();return false
		}
	}
</script>
<table border="0" cellspacing="0" cellpadding="0" id="PageContent" class="header1font">
	<form name="theform" action="order_send.cfm" method="post" onSubmit="return check_fields()">
	<tr><td>Items Ordered:</td></tr>
</table>
<!--- Customized Information/Cart Display --->
<cfset iNumberOfCartItems = 0>
<CFLOOP INDEX="ListElement" from="1" TO="#ListLen(QtyList)#">
	<cfquery name="listProducts" datasource="#dbname#" dbtype="ODBC">
		SELECT		*
		FROM		#company#item
		WHERE		ID = '#ListGetAt(ItemList,ListElement)#'
	</cfquery>
	<CFSET ProdQty = "#ListGetAt(QtyList,ListElement)#">
	<!--- Check for quantity price-break --->
	<cfif ProdQty gte listProducts.qtydiscountqty AND listProducts.qtydiscountqty gt 0>   			              		    
		<CFSET ProdPrice = listProducts.qtydiscountprice>
	<cfelse>
		<CFSET ProdPrice = listProducts.price>
	</cfif>
	<!--- End Price-break check --->   			              	    
	<CFSET CartTotal = #Evaluate(CartTotal + (ProdPrice * ProdQty))#>
	<CFOUTPUT>
		<!--- If there are multiple products and multipleform is True, supply a custom form for each product ordered --->
		<cfif listProducts.multipleform>
			<cfset iMaxElementNumber = ProdQty - 1>
			<cfloop index="ElementNumber" from="0" to="#iMaxElementNumber#">
				<cfset iNumberOfCartItems = iNumberOfCartItems + 1>
				<table border="0" cellspacing="0" cellpadding="0" id="PageContent" class="boldfont">	
					<TR><TD><font face="verdana,Arial,Helvetica,sans-serif" size="2"><strong>1 #listProducts.itemid# - #listProducts.name#</strong> = #DollarFormat(ProdPrice)#</font></TD></TR>
					<INPUT type="Hidden" name="CartItem#iNumberOfCartItems#_Splitter" value="************************************">
					<INPUT type="Hidden" name="CartItem#iNumberOfCartItems#ItemID" value="#listProducts.itemid#">
					<INPUT type="Hidden" name="CartItem#iNumberOfCartItems#Item" value="#listProducts.name#">
					<INPUT type="Hidden" name="CartItem#iNumberOfCartItems#Qty" value="1">
					<INPUT type="Hidden" name="CartItem#iNumberOfCartItems#Price" value="#DollarFormat(ProdPrice)#">
				</table>
			</cfloop>
		<cfelse>
			<cfset iNumberOfCartItems = iNumberOfCartItems + 1>
			<table border="0" cellspacing="0" cellpadding="0" id="PageContent" class="boldfont">	
				<TR><TD><font face="verdana,Arial,Helvetica,sans-serif" size="2"><strong>#ProdQty# #listProducts.itemid# - #listProducts.name#</strong> = #DollarFormat(ProdPrice * ProdQty)#</font></TD></TR>
				<INPUT type="Hidden" name="CartItem#iNumberOfCartItems#_Splitter" value="************************************">
				<INPUT type="Hidden" name="CartItem#iNumberOfCartItems#ItemID" value="#listProducts.itemid#">
				<INPUT type="Hidden" name="CartItem#iNumberOfCartItems#Item" value="#listProducts.name#">
				<INPUT type="Hidden" name="CartItem#iNumberOfCartItems#Qty" value="#ProdQty#">
				<INPUT type="Hidden" name="CartItem#iNumberOfCartItems#Price" value="#DollarFormat(ProdPrice * ProdQty)#">
			</table>
		</cfif>
		<BR>
	</CFOUTPUT>
</CFLOOP>
<CFOUTPUT>
	<INPUT type="Hidden" name="CartItems" value="#iNumberOfCartItems#">
	<cfif CartTotal lte 5>
		<CFSET ShippingChg = 1>
	<cfelseif CartTotal lte 10>
		<CFSET ShippingChg = 2>
	<cfelseif CartTotal lte 15>
		<CFSET ShippingChg = 3>
	<cfelseif CartTotal lte 45>
		<CFSET ShippingChg = 4>
	<cfelse>
		<CFSET ShippingChg = 5>
	</cfif>
	<p class="boldfont">Shipping = </STRONG>#DollarFormat(ShippingChg)#</p>
	<CFSET CartTotal = #Evaluate(CartTotal + ShippingChg)#>
	<p class="boldfont">Order Total = </STRONG>#DollarFormat(CartTotal)#</p>
	<INPUT type="Hidden" name="CartTotal" value="#DollarFormat(CartTotal)#">
</CFOUTPUT>
<!--- Shipping/Billing Information --->
<hr>
<div id="PageContent" class="boldfont">
	Please enter the appropriate information in the spaces below.<br>
	Fields marked with <span style="color: #FF0000">*</span> are required.
</div>
<hr>
<div id="PageContent" class="header1font">Billing Info:</div>
<table border="0" cellspacing="2" cellpadding="0" class="boldfont" id="PageContent">
	<tr>
		<td colspan="2"><span style="color: #FF0000">*</span>First Name / MI / <span style="color: #FF0000">*</span>Last Name<br>
			<input name="billtofirstname" size="15" value="">
			&nbsp;<input name="billtomiddle" size="1" maxlength="1" value="">
			&nbsp;<input name="billtolastname" size="15" value="">
		</td>
	</tr>
	<tr><td colspan="2"><span style="color: #FF0000">*</span>Address<br><input name="billtoaddress" size="50" value=""></td></tr>
	<tr><td colspan="2"><input name="billtoaddress2" size="50" value=""></td></tr>
	<tr valign="bottom">
		<td colspan="2"><span style="color: #FF0000">*</span>City / <span style="color: #FF0000">*</span>State / <span style="color: #FF0000">*</span>Zip Code<br>
			<input name="billtocity" size="25" value="">
			&nbsp;<select name="billtostate">
				<option value="">Select State</option>
				<option value="AK">Alaska</option>
				<option value="AL">Alabama</option>
				<option value="AR">Arkansas</option>
				<option value="AZ">Arizona</option>
				<option value="CA">California</option>
				<option value="CO">Colorado</option>
				<option value="CT">Conneticut</option>
				<option value="DC">Washington DC</option>
				<option value="DE">Deleware</option>
				<option value="FL">Florida</option>
				<option value="GA">Georgia</option>
				<option value="HI">Hawaii</option>
				<option value="IA">Iowa</option>
				<option value="ID">Idaho</option>
				<option value="IL">Illinois</option>
				<option value="IN">Indiana</option>
				<option value="KS">Kansas</option>
				<option value="KY">Kentucky</option>
				<option value="LA">Louisiana</option>
				<option value="MA">Massachussetes</option>
				<option value="MD">Maryland</option>
				<option value="ME">Maine</option>
				<option value="MI">Michigan</option>
				<option value="MN">Minnesota</option>
				<option value="MO">Missouri</option>
				<option value="MS">Mississippi</option>
				<option value="MT">Montana</option>
				<option value="NC">North Carolina</option>
				<option value="ND">North Dakota</option>
				<option value="NE">Nebraska</option>
				<option value="NH">New Hampshire</option>
				<option value="NJ">New Jersey</option>
				<option value="NM">New Mexico</option>
				<option value="NV">Nevada</option>
				<option value="NY">New York</option>
				<option value="OH">Ohio</option>
				<option value="OK">Oklahoma</option>
				<option value="OR">Oregon</option>
				<option value="PA">Pennsylvania</option>
				<option value="RI">Rhode Island</option>
				<option value="SC">South Carolina</option>
				<option value="SD">South Dakota</option>
				<option value="TN">Tennessee</option>
				<option value="TX">Texas</option>
				<option value="UT">Utah</option>
				<option value="VA">Virginia</option>
				<option value="VT">Vermont</option>
				<option value="WA">Washington</option>
				<option value="WI">Wisconsin</option>
				<option value="WV">West Virginia</option>
				<option value="WY">Wyoming</option>
			</select>
			&nbsp;<input name="billtozip" size="5" maxlength="5" value="">
		</td>
	</tr>
	<tr>
		<td><span style="color: #FF0000">*</span>Daytime Phone Number<br><input name="billtodtarea" size="3" maxlength="3" value="">&nbsp;&nbsp;<input name="billtodtphone" size="8" value=""></td>
		<td>Email<br><input name="billtoemail" size="25" value=""></td>
	</tr>
</table>
<hr>
<div id="PageContent" class="header1font">Shipping Info:&nbsp;&nbsp;&nbsp;&nbsp;<span class="boldfont"><input type="checkbox" name="ShipSameAsBilling" value="1"> Same as billing</span></div>
<table border="0" cellspacing="2" cellpadding="0" class="boldfont" id="PageContent">
	<tr>
		<td colspan="2"><span style="color: #FF0000">*</span>First Name / MI / <span style="color: #FF0000">*</span>Last Name<br>
			<input name="shiptofirstname" size="15" value="">
			&nbsp;<input name="shiptomiddle" size="1" maxlength="1" value="">
			&nbsp;<input name="shiptolastname" size="15" value="">
		</td>
	</tr>
	<tr><td colspan="2"><span style="color: #FF0000">*</span>Address<br><input name="shiptoaddress" size="50" value=""></td></tr>
	<tr><td colspan="2"><input name="shiptoaddress2" size="50" value=""></td></tr>
	<tr valign="bottom">
		<td colspan="2"><span style="color: #FF0000">*</span>City / <span style="color: #FF0000">*</span>State / <span style="color: #FF0000">*</span>Zip Code<br>
			<input name="shiptocity" size="25" value="">
			&nbsp;<select name="shiptostate">
				<option value="">Select State</option>
				<option value="AK">Alaska</option>
				<option value="AL">Alabama</option>
				<option value="AR">Arkansas</option>
				<option value="AZ">Arizona</option>
				<option value="CA">California</option>
				<option value="CO">Colorado</option>
				<option value="CT">Conneticut</option>
				<option value="DC">Washington DC</option>
				<option value="DE">Deleware</option>
				<option value="FL">Florida</option>
				<option value="GA">Georgia</option>
				<option value="HI">Hawaii</option>
				<option value="IA">Iowa</option>
				<option value="ID">Idaho</option>
				<option value="IL">Illinois</option>
				<option value="IN">Indiana</option>
				<option value="KS">Kansas</option>
				<option value="KY">Kentucky</option>
				<option value="LA">Louisiana</option>
				<option value="MA">Massachussetes</option>
				<option value="MD">Maryland</option>
				<option value="ME">Maine</option>
				<option value="MI">Michigan</option>
				<option value="MN">Minnesota</option>
				<option value="MO">Missouri</option>
				<option value="MS">Mississippi</option>
				<option value="MT">Montana</option>
				<option value="NC">North Carolina</option>
				<option value="ND">North Dakota</option>
				<option value="NE">Nebraska</option>
				<option value="NH">New Hampshire</option>
				<option value="NJ">New Jersey</option>
				<option value="NM">New Mexico</option>
				<option value="NV">Nevada</option>
				<option value="NY">New York</option>
				<option value="OH">Ohio</option>
				<option value="OK">Oklahoma</option>
				<option value="OR">Oregon</option>
				<option value="PA">Pennsylvania</option>
				<option value="RI">Rhode Island</option>
				<option value="SC">South Carolina</option>
				<option value="SD">South Dakota</option>
				<option value="TN">Tennessee</option>
				<option value="TX">Texas</option>
				<option value="UT">Utah</option>
				<option value="VA">Virginia</option>
				<option value="VT">Vermont</option>
				<option value="WA">Washington</option>
				<option value="WI">Wisconsin</option>
				<option value="WV">West Virginia</option>
				<option value="WY">Wyoming</option>
			</select>
			&nbsp;<input name="shiptozip" size="5" maxlength="5" value="">
		</td>
	</tr>
</table>
<hr>
<div id="PageContent" class="header1font">Credit Card Information:</div>
<table border="0" cellspacing="2" cellpadding="0" class="boldfont" id="PageContent">
	<tr><td colspan="2">Number (no spaces or dashes)<br><input name="ccnumber" size="16"></td></tr>
	<tr>
		<td>Card Type:<br>
			<select name="cctype">
				<option>Mastercard</option>
				<option>Visa</option>
			</select>
		</td>
		<td>Expiration Date<br>
			<cfoutput>
			<select name="ccexpmonth">
				<cfloop index="iNumber" from="1" to="12">
					<option>#NumberFormat(iNumber, '00')#</option>
				</cfloop>
			</select> /
			<select name="ccexpyear">
				<option>#Year(Now ())#</option>
				<cfloop index="iNumber" from="1" to="10">
					<option>#Year(DateAdd('yyyy', iNumber, Now()))#</option>
				</cfloop>
			</select>
			</cfoutput>
		</td>
	</tr>
</table>
<hr>
<div align="center" id="PageContent">
<table border="0" cellspacing="0" cellpadding="0">
	<tr><td><input type="submit" value="Submit Order"></td></tr>
	</form>
</table>
</div>
<cfinclude template="#company#_footer.cfm">

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Invintory control using JavaScript on a form field?

xmaveric

Programmer

Similar threads

Part and Inventory Search

Sponsor