/    Sign up×
Community /Pin to ProfileBookmark

Problem submitting dynamic form with enter

Hi,
This is my first post here, so please let me know if I have failed, dispite reading the stickies at the top, to post in an approved manner.

My problem is this; I am working on an ecommerce site which generates the product listings dynamically from SQL databases. On each page, the items listed are looping through the same form to be displayed. Currently, to add an item to the shopping cart, the customer clicks on an <a href><img></a> of a custom button, which activates a javascript function to add the item to the cart. All this works fine. I am trying to add the functionality of being able to add items to the cart when “enter” is keyed. I have a script which detects the enter key with no problem, but it only will submit the last item generated on the page. For example, if there are the items apples, pears, bananas, & grapes listed the fruit category page, when you enter a quantity in any textbox other than the one next to grapes and press enter, you are asked to enter a valid quantity. When entering a quantity next to grapes and pressing enter, x number of grapes are added to the cart.
Here is the code (again, each item display is generated with a loop through this, and more of course):

[code=php]
<script language=”javascript”>
function checkEnter2(e){
var characterCode;
if(e && e.which){
e = e;
characterCode = e.which;
}
else{
e = event;
characterCode = e.keyCode;
}
if(characterCode==13){
preproc(“frmAdd”,”<%=iIndex%>”,”<%=Server.HTMLEncode(Replace(sItemCode,””””,”¶”))%>”,”<%=sItemType%>”,”<%=sEqCode%>”,”0″,”<%=iUnits%>”);
}
else{
return true;
}
}
</script>
<font class = contbold>Qty:&nbsp;</font>
<font class = content><input type=”Text” name=”qty<%=iIndex%>” id=”Qty” value=”<%=iUnits%>” size=”4″ maxlength=”8″ onkeypress=”checkEnter2(event)” class=content>&nbsp;
<%’If iFraction > 1 Then
‘If bAllowSaleUnit = “T” Then Response.Write “Unit(s)” Else
Response.Write sMeasureDesc
‘End if%> <%=sMeasureDesc%></font>
<a href=’javascript:preproc(“frmAdd”,”<%=iIndex%>”,”<%=Server.HTMLEncode(Replace(sItemCode,””””,”¶”))%>”,”<%=sItemType%>”,”<%=sEqCode%>”,”0″,”<%=iUnits%>”)’>
<img ALT=”Buy this item” SRC=”images/Add_To_Cart.gif” BORDER=”0″ VSPACE=”0″ HSPACE=”0″ align=absmiddle></a><br>

[/code]

to post a comment
JavaScript

5 Comments(s)

Copy linkTweet thisAlerts:
@toicontienOct 08.2008 — Can we see the HTML for the page, or a link to the page? Are you adding form fields to a FORM tag?
Copy linkTweet thisAlerts:
@JaranauthorOct 09.2008 — Right now, the pages aren't live. They are only on the server. Here is the VBscript and the HTML which generates each display(the code I posted yesterday takes place immediately following this):

[code=php]
<%Sub ItemDisplay(rsItems)
Dim sItemName, sItemDesc, sItemImage, sItemPrice, sRegularPrice, sCallforPrice, sUrl, sTooltip, sItemStock, sImageOrig, sEqCode, strDefWishList, sDownloadable, sAdditionalPrice, sAdditionalRegularPrice, bDisplayLowPriceMsg
If bFeaturedExists Then
sPrevItemBookMark = rsItems("ITEMCODE")
Elseif bItemExists Then
sNextItemBookMark = rsItems("EQ_CODE")
If sNextItemBookMark = "" Then
sNextItemBookMark = rsItems("ITEMCODE")
End If
End if
If iItmPerRow = 2 Then
Response.write "<table width=98% border=0 cellpadding=0 cellspacing=2><tr>"
End if
If Not bShowDefWish Then
strDefWishList = "Add to&nbsp;" & sWishList
Else
strDefWishList="<img src=images/Add_to_Wishlist.gif border=0 " & "alt='Add to " & sWishList & "'>"
End if

Do While Not rsItems.Eof
If bFeaturedExists Then
sItemType = rsItems("TYPE")
sItemCode = rsitems("ITEMCODE")
Elseif bItemExists Then
sItemType = rsItems("MATRIX_ITEM_TYPE")
sItemCode = rsItems("ITEMCODE")
sEqCode = rsItems("EQ_CODE")
End if
If iItmPerRow = 2 Then
Response.write "<td valign=top width=50% align=left>"
End if
sItemName = rsItems("DESCRIPTION")
sItemDesc = rsItems("WEBDESC")
sItemImage = Trim(rsItems("IMAGETHUMB"))
sImageOrig = rsItems("IMAGEORIG")
sItemPrice = rsItems("PRICE")
sRegularPrice = rsItems("REGULARPRICE")
sCallforPrice = rsItems("CALL4PRICE")
sItemStock = rsItems("stock")
sInventored = rsItems("INVENTORED")
sDownloadable =rsItems("ALLOW_DOWNLOAD")
sAdditionalPrice = rsItems("ADD_CURR_PRICE")
sAdditionalRegularPrice = rsItems("ADD_CURR_REGULARPRICE")
bAllowSaleUnit = rsItems("ALLOW_SALE_IN_UNITS")
sMeasureDesc = rsItems("MEASURE_DESC")
'iUnits = rsItems("UNITS")
iUnits = 0
iFraction = rsItems("FRACTION")
bDisplayLowPriceMsg = rsItems("DISPLAY_LOW_PRICE_MSG")

'*** When ItemType is 33 (Kit), then show the link to CustomKitItems Page and change the ToolTip.
Select Case sItemType
Case iTYPE_KIT
sUrl = sNonSecurePath & "customkititems.asp?kc=" & Server.URLEncode(sItemcode)& "&eq=" & sEqCode
sTooltip = "Click here to Customize this item"
Case iTYPE_MATRIX_MASTER
sUrl = sNonSecurePath & "itemMatrix.asp?GroupCode=" & Server.URLEncode(sItemCode)& "&eq=" & Server.URLEncode(sEqCode) & "&MatrixType=" & iTYPE_MATRIX_MASTER
'*** Task Id 260084 changes for item matrix display
'sTooltip = Application("MatrixConfigurableText")
sTooltip = rsItems("MATRIX_CONFIG_TXT")
Case iTYPE_MATRIX_DETAIL
sUrl = sNonSecurePath & "itemMatrix.asp?ic=" & Server.URLEncode(sItemCode)& "&eq=" & Server.URLEncode(sEqCode) & "&MatrixType=" & iTYPE_MATRIX_DETAIL
sTooltip = "Click here for More Info"
Case Else
sUrl = sNonSecurePath & "itemdesc.asp?ic=" & Server.URLEncode(sItemcode)& "&eq=" & Server.URLEncode(sEqCode) & "&Tp=" & Server.URLEncode(sTpCatalog)
sTooltip = "Click here for More Info"
End Select%>
<table border="0" cellspacing="2" cellspacing="0" width="98%">
<tr><td colspan="2"><font class="content"><a href="<%=sUrl%>"><%=sItemName%></a></font></td></tr>
<tr valign="top" >
<td align = "left" width="20%">
<%'*** Image is displayed When it is not empty
If sItemImage <> "" Then%>
<script>
var isMac = (navigator.userAgent.toUpperCase().indexOf("MAC") != -1)
if(!isMac) {
var newImage = new Image();
newImage.src = "<%=sImgLink&sImageOrig%>";
}
</script>
<a href="#" onclick="window.open ('<%=sImgLink & sImageOrig%>','_image','height='+ (isMac ? 125 : (newImage.height + 500)) +',width='+ (isMac ? '125 ,resizable' : (newImage.width + 500)) +',scrollbars=no,left=10,right=10');return false">
<img src="<%=sImgLink & sItemImage%>" border="0" width="100" height="100" align="left" alt="Click here for larger image"></a>
<%End If%>
</td>
<td valign = top>
<table border="0" cellspacing="1" cellspacing="0" width="100%">
<tr>
<td>
<P align="Justify"><font class = content><%=sItemDesc%></font></font>
<!-- #include file = includes/table.asp -->
<br>
</td>
</tr>
<%If (Not INT(sItemType) = iTYPE_MATRIX_MASTER) Or (INT(sItemType) = iTYPE_MATRIX_MASTER And rsItems("DISPLAY_MATRIXGRP_PRICE")="T") Then%>
<tr>
<td>
<%'*** If CallForPrice is "T", then dont show the Stock, Qty and Buy button ....Instead show Call for Price Image
If sCallforPrice = "T" Then%>
<a href="#" onClick="window.open('<%=sNonSecurePath%>CallforPrice.asp','_calc','width=400,resizable=no,scrollbars=no,toolbar=no,height=300');return false;">
<img src="images/call_for_price.gif" border="0" alt="Call for price"></a><br>
<%ElseIf sRegularPrice > sItemPrice Then%>
<table>
<%'*** If RegularPrice > Price - which is the discounted price- then show RegularPrice striken off and DiscountedPrice
If bDisplayLowPriceMsg = "T" And Int(sItemType) <> iTYPE_KIT Then%>
<tr><td colspan=2><font class = contbold>List Price:&nbsp;</font><font class=contboldRd><strike><%=sCurrSymbol & FormatNumber(sRegularPrice,2)%></strike><%If bAddCurrExists Then%> (<strike><%=sAdditionalCurrencySymbol & FormatNumber(sAdditionalRegularPrice,2)%></strike>)<%End If%></font>
<font class="content">&nbsp;per&nbsp;<%=sMeasureDesc%></font>
</td></tr>
<tr><td nowrap valign=top width=25%><font class = contbold>Our Price:</td><td align=left valign=top><font class = content><%=sLowPriceMessage%></font><br>&nbsp;<a href="#" onclick="window.open('LowPrice.htm','winHelp','height=150,width=400,resizable');return false;"><%=sLowPriceHyperLinkText%></a></td></tr>
<%Else%>
<tr><td><font class = contbold>List Price:&nbsp;<font class = "contboldRd"><strike><%=sCurrSymbol & FormatNumber(sRegularPrice,2)%></strike><%If bAddCurrExists Then%> (<strike><%=sAdditionalCurrencySymbol & FormatNumber(sAdditionalRegularPrice,2)%></strike>)<%End If%></font></font></td></tr>
<tr><td><font class = contbold>Our Price:&nbsp;<font class=contbold><%=sCurrSymbol & FormatNumber(sItemPrice,2)%> <%If bAddCurrExists Then%> (<%=sAdditionalCurrencySymbol & FormatNumber(sAdditionalPrice,2)%>)<%End If%></font>
<font class="content">&nbsp;per&nbsp;<%=sMeasureDesc%></font>
</td></tr>
<%End If%>
</table>
<%Else%>
<%If bDisplayLowPriceMsg = "T" And Int(sItemType) <> iTYPE_KIT Then%>
<font class = contbold>List Price:&nbsp;<font class = content><%=sLowPriceMessage%></font><br>&nbsp;<a href="#" onclick="window.open('LowPrice.htm','winHelp','height=150,width=400,resizable');return false;"><%=sLowPriceHyperLinkText%></a><br>
<%Else%>
<font class = contbold>List Price:&nbsp;<%=sCurrSymbol & FormatNumber(sItemPrice,2)%> <%If bAddCurrExists Then%> (<%=sAdditionalCurrencySymbol & FormatNumber(sAdditionalPrice,2)%>)<%End If%>
<font class="content">&nbsp;per&nbsp;<%=sMeasureDesc%></font></font><br>
<%End If
End if%>
</td>
</tr>
<%End if
If Int(sItemType) <> iTYPE_MATRIX_MASTER Then
'***FDD 20270: Stock Avialability improvements: E-Com changes
If (bShowStock And (sItemStock <> "") And (Int(sItemType) <> iTYPE_KIT)) Then%>
<tr>
<td>
<font class="contbold">Stock:&nbsp; <%=GetStock(sItemStock)%></font>&nbsp;&nbsp;
<%'*** FDD20270
If bShowStkBrkUp and INT(sItemtype) <> iTYPE_KIT Then
If sItemStock > "0" and sInventored = "T" And UCASE(sItemStock) <> "YES" And UCASE(sItemStock) <> "NO" Then%>
<a href = "#" onclick = 'window.open("<%=sNonSecurePath%>StockArea.asp?ic=<%=Server.URLEncode(sItemCode)%>&Area=<%=Server.URLEncode(sItemName)%>","StockArea","width=450,height=450");return false'>
Stock Breakup</a><br>
<%End if
End if%>
</td>
</tr>
<%End If
'Show Qty & Buy button if it is other than item matrix
If sCallforPrice <> "T" Then%>
<tr>
<td>
<font class = contbold>Qty:&nbsp;</font> <font class = content>
<input name="qty<%=iIndex%>" value="<%=iUnits%>" size="4" maxlength="8" onkeypress="checkEnter1(event)" class="content">&nbsp;

[/code]


The form is added here:
[code=php]
<form action="<%=sNonSecurePath%>includes/add_item.asp" METHOD="POST" name="frmAdd" onsubmit="return false">
[/code]


Thanks in advance!
Copy linkTweet thisAlerts:
@toicontienOct 09.2008 — I actually need to see the HTML and JavaScript the Web browser gets, not the server side code.
Copy linkTweet thisAlerts:
@JaranauthorOct 09.2008 — OK, sorry for the misunderstanding. Here is what the web browser gets(I am only able to include one of the items displayed as it is too long to post otherwise):

[code=php]
<form name="frmAdd" onsubmit="return false" method="post" action="http://10.0.0.54/ECOPRODUCTS/AMAZING/includes/add_item.asp">
<br clear="all">
&nbsp;<p>&nbsp;</p>
<table cellSpacing="1" width="98%" border="0" id="table2387">
<tr>
<td><font class="pghead">Eco-Products Best Sellers</font></td>
</tr>
<tr>
<td class="siteNav1TD" width="100%" height="2">
<img height="1" src="http://10.0.0.54/ECOPRODUCTS/AMAZING/images/dot_green.gif" width="1"></td>
</tr>
<tr>
<td width="100%" height="10">
<img height="1" src="http://10.0.0.54/ECOPRODUCTS/AMAZING/images/Blank.gif" width="1"></td>
</tr>
</table>
<table cellSpacing="2" cellPadding="0" width="98%" border="0" id="table2388">
<tr>
<td vAlign="top" align="left" width="50%">
<table cellSpacing="2" width="98%" border="0" id="table2389">
<tr>
<td colSpan="2"><font class="content">
<a style="color: #000000; font-family: verdana,arial; font-size: 8pt; font-weight: bold; text-decoration: none" href="http://10.0.0.54/ECOPRODUCTS/AMAZING/itemdesc.asp?ic=187105&eq=&Tp=">
BioBag Dog Waste Bags</a></font></td>
</tr>
<tr vAlign="top">
<td align="left" width="20%">
<SCRIPT>
var isMac = (navigator.userAgent.toUpperCase().indexOf("MAC") != -1)
if(!isMac)
{
var newImage = new Image();
newImage.src = "/mmECOPRODUCTS/Images/187105_actual.jpg";
}
</SCRIPT>
<a onclick="window.open ('/mmECOPRODUCTS/Images/187105_actual.jpg','_image','height='+ (isMac ? 125 : (newImage.height + 500)) +',width='+ (isMac ? '125 ,resizable' : (newImage.width + 500)) +',scrollbars=no,left=10,right=10');return false" style="color: #000000; font-family: verdana,arial; font-size: 8pt; font-weight: bold; text-decoration: none" href="#">
<img height="100" alt="Click here for larger image" src="http://10.0.0.54/mmECOPRODUCTS/Images/187105_100x100.jpg" width="100" align="left" border="0"></a>
</td>
<td vAlign="top">
<table cellSpacing="1" width="100%" border="0" id="table2390">
<tr>
<td>
<p align="justify">
<font class="content"></font></p>
<table height="55" cellSpacing="0" cellPadding="0" width="175" border="0" id="table2391">
<tr>
<td style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid" vAlign="top" borderColor="#5d9732" bgColor="#5d9732" height="12">
<table width="100%" border="0" id="table2392">
<tr>
<td>
<p align="center">
<b>
<font style="FONT-SIZE: 8pt" face="Verdana" color="#ffffff">
Quantity</font></b></td>
</tr>
</table>
</td>
<td style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid" vAlign="top" borderColor="#5d9732" bgColor="#5d9732" height="12">
<table id="table2393" width="100%" border="0">
<tr>
<td>
<p align="center">
<b>
<font style="FONT-SIZE: 8pt" face="Verdana" color="#ffffff">
Price</font></b></td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid" vAlign="top" width="115" height="43">
<table width="100%" border="0" id="table2394">
<tr>
<td>
<p align="center">
<font face="Verdana" size="1">
1</font></td>
</tr>
<tr>
<td>
<p align="center">
<font style="FONT-SIZE: 8pt" face="Verdana">
2-3</font></td>
</tr>
<tr>
<td>
<p align="center">
<font style="FONT-SIZE: 8pt" face="Verdana">
4+</font></td>
</tr>
</table>
</td>
<td style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid" vAlign="top" width="60" height="43">
<table id="table2395" width="100%" border="0">
<tr>
<td>
<p align="center">
<font style="FONT-SIZE: 8pt" face="Verdana">
$5.49</font></td>
</tr>
<tr>
<td>
<p align="center">
<font style="FONT-SIZE: 8pt" face="Verdana">
$5.44</font></td>
</tr>
<tr>
<td>
<p align="center">
<font style="FONT-SIZE: 8pt" face="Verdana">
$5.33</font></td>
</tr>
</table>
</td>
</tr>
</table>
<br>
&nbsp;&nbsp;</P></td>
</tr>
<tr>
<td><font class="contbold">List
Price:&nbsp;$5.49 <font class="content">
&nbsp;per&nbsp;BX50</font></font><br>
&nbsp;</td>
</tr>
<tr>
<td><font class="contbold">Stock:&nbsp;
Yes</font>&nbsp;&nbsp; </td>
</tr>
<tr>
<td>
<SCRIPT language=javascript>
function checkEnter2(e){
var characterCode;
if(e && e.which){
e = e;
characterCode = e.which; }
else{
e = event;
characterCode = e.keyCode; }
if(characterCode==13){
preproc("frmAdd","1","187105","0","","0","0");
}
else{
return true;
}
}
</SCRIPT>
<font class="contbold">Qty:&nbsp;</font>
<font class="content">
<input class="content" onkeypress="checkEnter2(event)" id="Qty" maxLength="8" size="4" value="0" name="qty1">&nbsp;
BX50 </font>
<a style="color: #000000; font-family: verdana,arial; font-size: 8pt; font-weight: bold; text-decoration: none" href="javascript:preproc("frmAdd","1","187105","0","","0","0")">
<img alt="Buy this item" hspace="0" src="http://10.0.0.54/ECOPRODUCTS/AMAZING/images/Add_To_Cart.gif" align="absMiddle" border="0"></a><br>
&nbsp;</td>
</tr>
<tr>
<td>
<a style="color: #000000; font-family: verdana,arial; font-size: 8pt; font-weight: bold; text-decoration: none" href="http://10.0.0.54/ECOPRODUCTS/AMAZING/itemdesc.asp?ic=187105&eq=&Tp=">
More Info</a> </td>
</tr>
<!--<tr>
<td>
<font class="content">(1 = Units)</font><br>
</td>
</tr>-->
</table>
</td>
</tr>
</table>
<tr>
<td vAlign="bottom" colSpan="3">
<table cellSpacing="0" cellPadding="0" width="98%" border="0" id="table2418">
<tr>
<td class="siteNav6TD" height="5">
<img height="1" src="http://10.0.0.54/ECOPRODUCTS/AMAZING/blank.gif" width="1"></td>
</tr>
<tr>
<td class="siteNav1TD">
<img height="1" src="http://10.0.0.54/ECOPRODUCTS/AMAZING/images/dot_green.gif" width="1"></td>
</tr>
<tr>
<td class="siteNav6TD" height="5">
<img height="1" src="http://10.0.0.54/ECOPRODUCTS/AMAZING/blank.gif" width="1"></td>
</tr>
</table>
</td>
</tr>
</table>
<table cellSpacing="0" cellPadding="0" width="98%" border="0" id="table2419">
<tr>
<td align="left">&nbsp; </td>
<td align="right">&nbsp;</td>
</tr>
</table>
</form>

[/code]
Copy linkTweet thisAlerts:
@JaranauthorOct 10.2008 — tiocontien, thank you for looking at my code. I resolved the issue today. Because the displayed items were being generated dynamically, the function needed to also be named such, or the event for every item displayed would point to the last item generated. By naming the function with the same variable that named the input textbox (checkEnter<%=var%>), each function points to the specific item it is matched with. Again, thanks for looking at the code.

-Jaran
×

Success!

Help @Jaran spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...