Advertisement

06.10.2008 at 12:49AM PDT, ID: 23471496
[x]
Attachment Details
[x]
The Solution Rating System

With so many solutions, how can you tell which solutions are most likely to help you and which ones are not? To provide you with a tool to use, we rate our solutions based on various elements that most accurately determine if a solution is a quality solution. To explain what factors affect the solution rating, here are the elements we take into consideration when formulating our solution rating.

  • The Grade of the Solution
  • The Zone Rank of the Expert Providing the Solution
  • The Number of Author and Expert Comments
  • The Number of Experts Contributing
  • The Feedback of the Community

Your Input Matters
Because of the way the system is set up, the most important variable in this equation is you. As a member of Experts Exchange, you are able to cast your vote on the quality of the solutions in regard to how complete, accurate, helpful and easy to understand each solution is. When you provide your feedback, each rating is adjusted accordingly. So, if you see a solution that has a poor rating that you think is a good solution, let us know by rating it. As you do, the rating will be adjusted and will become more accurate for other members of our site.

If you have any suggestions that you would like to make for our rating system, please ask a question in the Suggestions Zone of Community Support.

Thank you!
8.7

Need form field validation for hidden form elements

Asked by tam423 in JavaScript, ColdFusion Application Server

Tags:

Hello,

I am customizing a ColdFusion shopping cart, whereby when someone is checking out and has either a Net 30 purchase order or credit card payment option (based on their established account), that the checkout form displays 2 radio buttons, for them to select one as their payment option. Javascript is working to show the hidden table of form elements, based on their selection. If someone does not have the Net 30 option, then the credit card payment info fill-in form displays (without any Javascript in use to hide/show form elements). When the placeorder button is clicked, a cfmodule runs to validate the form fields and returns highlighted fields that need to be completed/corrected. All works fine if the form is not utilizing the hide/show Javascript for Net 30 folks; however, nothing happens when I try to validate the fields of the hidden form elements. For example, someone clicks the Purchase Order option and a text field pops in, along with the Place Order button. This field is required, and the page should come back with the field highlighted for completion, when the Place Order button is clicked. Instead, the page just gets called again, with the fields hidden again, as if nothing had happened. I have tried many iterations of what I have, to no avail. Since the validation works just fine when not dealing with the hidden form elements, I know the issue must be with the fact that they are hidden. But, for the life of me, I don't know what the solution is. How I need things to work is that if someone has the Purchase Order or Credit Card option, they select one of the options (radio button) and the respective form appears on the page (this part works fine). Then if they leave a required field blank and submit the form, it should come back with the hidden form still shown (NOT go back as hidden), and the field name highlighted, to be completed. I hope I've explained this okay. I have attached the pertinent code. Any help would be so appreciated, as I really need to get this resolved. Thank you very much! TamStart Free Trial 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248:
249:
250:
251:
252:
253:
254:
255:
256:
257:
258:
259:
260:
261:
262:
263:
264:
265:
266:
267:
268:
269:
270:
271:
272:
273:
274:
275:
276:
277:
278:
279:
280:
281:
282:
283:
284:
285:
286:
287:
288:
289:
290:
291:
292:
293:
294:
295:
296:
297:
298:
299:
300:
301:
302:
303:
304:
305:
306:
307:
308:
309:
310:
311:
312:
313:
314:
315:
316:
317:
318:
319:
320:
321:
322:
323:
324:
325:
326:
327:
328:
329:
330:
331:
332:
333:
334:
335:
336:
337:
338:
339:
340:
341:
342:
343:
344:
345:
346:
347:
348:
349:
350:
351:
352:
353:

This is in the showcart.cfm file, which displays the cart and payment fields for submission:
 
	<!--- If the "PLACE ORDER" button has been clicked... --->
	<!--- START [ PROCESS ORDER ] =================================================== --->
	<cfif FORM.action EQ "placeorder">
		<!--- Process order --->
 
		<cfmodule template="CWTags/CWTagProcessOrder.cfm" Cart="#Cart#">
	</cfif>
	<!--- END [ PROCESS ORDER ] =============================++====================== --->		 
 
<!--- If Checking out, show credit card input form or Processor information---> 
		 <form action="<cfoutput>#request.ThisPage#</cfoutput>" method="post" name="PlaceOrder"> 
			<cfif request.PaymentAuthType EQ "Gateway" OR request.PaymentAuthType EQ "None"> 
				 <!--- get Credit Cards for form field ---> 
				 <cfquery name="rsGetCCards" datasource="#request.dsn#" username="#request.dsnUsername#" password="#request.dsnPassword#">
 				SELECT ccard_Name, ccard_Code 
				FROM tbl_list_ccards 
				WHERE ccard_Archive	= 0 ORDER BY ccard_Name
				</cfquery> 
				 <p><strong>Enter your payment details to complete your order.</strong></p> 
				 <!--- Output any error messages from credit card input ---> 
				 <cfif request.FieldErrorText NEQ ""> 
					<span class="errorMessage"><cfoutput>#request.FieldErrorText#</cfoutput></span> 
				</cfif> 
 
<CFIF "<cfoutput>#rsGetCustData.cst_terms#</cfoutput>" CONTAINS "Net30">
<input type="hidden" name="cst_terms" value="<cfoutput>#rsGetCustData.cst_terms#</cfoutput>">
<input type="hidden" name="cstPONumer" value="<cfoutput>#FORM.cstPONumber#</cfoutput>">
 
<table>
<tr>
  <td valign="top">Select Payment Method: </td>
  <td valign="top"><input type='radio' id=ra1 name=ra1 value=1 onClick="checkClick(this.value)">
<label for=ra1>Purchase Order</label><br>
      <input type='radio' id=ra2 name=ra1 value=2 onClick="checkClick(this.value)">
<label for=ra2>Credit Card</label></td>
</tr>
</table>
 
				
 
 
			<table id=tbox1 style="display:none" cellpadding="0" cellspacing="0" border="0">
			  <tr>
			    <td>
				 <table class="tabularData"> 
					<tr> 
						 <th colspan="2">Purchase Order Data</th> 
					 </tr> 
					<tr class="altRowOdd" > 
						 <td align="right">  <cfif IsDefined ('request.FieldErrorPON')>
								 <span class="errorMessage">P.O. Number</span> 
								 <cfelse> 
								 P.O. Number
							 </cfif> </td> 
						 <td> <input name="cstPONumber" size="34" type="text" value="<cfoutput>#FORM.cstPONumber#</cfoutput>"> 
							* </td> 
					 </tr> 
			               
				</table> 
			    </td>
			  </tr>
			</table>
				<table id=placeorder1 style="display:none"> 
				  <tr>
				    <td><input name="placeorder" type="submit" class="formButton" value="Place Order">
				<input name="action" type="hidden" value="placeorder"></td>
				  </tr>
				</table>
 
			<table id=sel1 style="display:none" cellpadding="0" cellspacing="0" border="0"> 
			  <tr>
			    <td>
				 <table class="tabularData"> 
					<tr> 
						 <th colspan="2">Credit Card Data</th> 
					 </tr> 
					<tr class="altRowOdd" > 
						 <td align="right"> <cfif IsDefined ('request.FieldErrorCHN')> 
								 <span class="errorMessage">Card Holder Name</span> 
								 <cfelse> 
								 Card Holder Name
							 </cfif> </td> 
						 <td> <input name="cstCCardHolderName" type="text" value="<cfoutput>#FORM.cstCCardHolderName#</cfoutput>"> 
							* </td> 
					 </tr> 
					<tr class="altRowEven" > 
						 <td align="right"> <cfif IsDefined ('request.FieldErrorCT')> 
								 <span class="errorMessage">Card Type</span> 
								 <cfelse> 
								 Card Type
							 </cfif> </td> 
						 <td> <select name="cstCCardType"> 
								 <option value="forgot" selected="selected">Choose Credit Card</option> 
								 <cfoutput query="rsGetCCards"> 
									<option value="#rsGetCCards.ccard_Code#"<cfif FORM.cstCCardType EQ rsGetCCards.ccard_Code> 
 
selected</cfif>>#rsGetCCards.ccard_Name#</option> 
								</cfoutput> 
							 </select> 
							* </td> 
					 </tr> 
					<tr class="altRowOdd" > 
						 <td align="right"> <cfif IsDefined ('request.FieldErrorCN')> 
								 <span class="errorMessage">Card Number</span> 
								 <cfelse> 
								 Card Number
							 </cfif> 
							<br /> </td> 
						 <td> <input type="text" name="cstCCNumber" value="<cfoutput>#FORM.cstCCNumber#</cfoutput>"> 
							*</td> 
					 </tr> 
					<tr class="altRowEven" > 
						 <td align="right"> <cfif IsDefined ('request.FieldErrorCY') OR IsDefined ('request.FieldErrorCM')> 
								 <span class="errorMessage">Expiration Date</span> 
								 <cfelse> 
								 Expiration Date
							 </cfif> </td> 
						 <td> <select name="cstExprMonth" id="cst_ExprMonth"> 
								 <option value="forgot">--</option> 
								 <cfloop index="MonthValue" from="01" to="12"> 
									<option<cfif FORM.cstExprMonth EQ MonthValue> selected</cfif>><cfoutput>#NumberFormat(MonthValue,"09")#</cfoutput></option> 
								</cfloop> 
							 </select> 
							/
							<select name="cstExprYr" id="cst_ExprYr"> 
								 <option value="forgot">--</option> 
								 <cfloop index="YearValue" from="#DateFormat(Now(),'yyyy')#" to="#DateFormat(DateAdd('yyyy',6,Now()),'yyyy')#"> 
									<option<cfif FORM.cstExprYr EQ YearValue> selected="selected"</cfif> 
 
value="<cfoutput>#Right(YearValue,2)#</cfoutput>"><cfoutput>#YearValue#</cfoutput></option> 
								</cfloop> 
							 </select> 
							* </td> 
					 </tr> 
					<tr class="altRowEven" > 
						 <td align="right" valign="top"><cfif IsDefined ('request.FieldErrorCCV')> 
								 <span class="errorMessage">CCV Code</span> 
								 <cfelse> 
								 CCV Code
							 </cfif></td> 
						 <td><p> 
								 <input name="cstCCV" type="text" value="<cfoutput>#FORM.cstCCV#</cfoutput>" size="4" maxlength="4"> 
								 <br /> 
								<span class="smallprint">This is the 3 digit number<br /> 
								that appears on the reverse side of your <br /> 
								credit card (where your signature appears).<br /> 
								Amex cards only - the 4 digit number on <br /> 
								the front of your card.</span><br /> 
								 <br /> 
								 <img src="cw3/assets/cards/ccv.gif" width="135" height="86"></p></td> 
					 </tr> 
 
				</table> 
			      </td>
			    </tr>
			</table>
				<table id=placeorder2 style="display:none"> 
				  <tr>
				    <td><input name="placeorder" type="submit" class="formButton" value="Place Order">
				<input name="action" type="hidden" value="placeorder"></td>
				  </tr>
				</table>
	
<script type="text/JavaScript">				
function checkClick(val)
{
  if( val == 1 ) {
    document.all["tbox1"].style.display = 'block';
    document.all["sel1"].style.display = 'none';
    document.all["placeorder1"].style.display = 'block';
    document.all["placeorder2"].style.display = 'none';
    document.all["sel1"].style.display = 'none';
    document.all["asel1"].disabled = true;
    document.all["atext1"].disabled = false;
  } else {
    document.all["tbox1"].style.display = 'none';
    document.all["sel1"].style.display = 'block';
    document.all["placeorder1"].style.display = 'none';
    document.all["placeorder2"].style.display = 'block';
    document.all["asel1"].disabled = false;
    document.all["atext1"].disabled = true;
  }
}
</script>
 
 
<CFELSE>
		 <table class="tabularData"> 
					<tr> 
						 <th colspan="2">Credit Card Data</th> 
					 </tr> 
					<tr class="altRowOdd" > 
						 <td align="right"> <cfif IsDefined ('request.FieldErrorCHN')> 
								 <span class="errorMessage">Card Holder Name</span> 
								 <cfelse> 
								 Card Holder Name
							 </cfif> </td> 
						 <td> <input name="cstCCardHolderName" type="text" value="<cfoutput>#FORM.cstCCardHolderName#</cfoutput>"> 
							* </td> 
					 </tr> 
					<tr class="altRowEven" > 
						 <td align="right"> <cfif IsDefined ('request.FieldErrorCT')> 
								 <span class="errorMessage">Card Type</span> 
								 <cfelse> 
								 Card Type
							 </cfif> </td> 
						 <td> <select name="cstCCardType"> 
								 <option value="forgot" selected="selected">Choose Credit Card</option> 
								 <cfoutput query="rsGetCCards"> 
									<option value="#rsGetCCards.ccard_Code#"<cfif FORM.cstCCardType EQ rsGetCCards.ccard_Code> 
 
selected</cfif>>#rsGetCCards.ccard_Name#</option> 
								</cfoutput> 
							 </select> 
							* </td> 
					 </tr> 
					<tr class="altRowOdd" > 
						 <td align="right"> <cfif IsDefined ('request.FieldErrorCN')> 
								 <span class="errorMessage">Card Number</span> 
								 <cfelse> 
								 Card Number
							 </cfif> 
							<br /> </td> 
						 <td> <input type="text" name="cstCCNumber" value="<cfoutput>#FORM.cstCCNumber#</cfoutput>"> 
							*</td> 
					 </tr> 
					<tr class="altRowEven" > 
						 <td align="right"> <cfif IsDefined ('request.FieldErrorCY') OR IsDefined ('request.FieldErrorCM')> 
								 <span class="errorMessage">Expiration Date</span> 
								 <cfelse> 
								 Expiration Date
							 </cfif> </td> 
						 <td> <select name="cstExprMonth" id="cst_ExprMonth"> 
								 <option value="forgot">--</option> 
								 <cfloop index="MonthValue" from="01" to="12"> 
									<option<cfif FORM.cstExprMonth EQ MonthValue> selected</cfif>><cfoutput>#NumberFormat(MonthValue,"09")#</cfoutput></option> 
								</cfloop> 
							 </select> 
							/
							<select name="cstExprYr" id="cst_ExprYr"> 
								 <option value="forgot">--</option> 
								 <cfloop index="YearValue" from="#DateFormat(Now(),'yyyy')#" to="#DateFormat(DateAdd('yyyy',6,Now()),'yyyy')#"> 
									<option<cfif FORM.cstExprYr EQ YearValue> selected="selected"</cfif> 
 
value="<cfoutput>#Right(YearValue,2)#</cfoutput>"><cfoutput>#YearValue#</cfoutput></option> 
								</cfloop> 
							 </select> 
							* </td> 
					 </tr> 
					<tr class="altRowEven" > 
						 <td align="right" valign="top"><cfif IsDefined ('request.FieldErrorCCV')> 
								 <span class="errorMessage">CCV Code</span> 
								 <cfelse> 
								 CCV Code
							 </cfif></td> 
						 <td><p> 
								 <input name="cstCCV" type="text" value="<cfoutput>#FORM.cstCCV#</cfoutput>" size="4" maxlength="4"> 
								 <br /> 
								<span class="smallprint">This is the 3 digit number<br /> 
								that appears on the reverse side of your <br /> 
								credit card (where your signature appears).<br /> 
								Amex cards only - the 4 digit number on <br /> 
								the front of your card.</span><br /> 
								 <br /> 
								 <img src="cw3/assets/cards/ccv.gif" width="135" height="86"></p></td> 
					 </tr> 
				</table> 
 
				<input name="placeorder" type="submit" class="formButton" value="Place Order">
				<input name="action" type="hidden" value="placeorder">
</CFIF>
 
				 <cfelseif request.PaymentAuthType EQ "Processor"> 
				 <p>Once you click Place Order below you will receive an order number. On
				 	the next page you will need to process your payment through our third party
				 	payment processor before your order will be shipped. </p> 
			 </cfif> 
			<cfif Client.ShipPref EQ 0 AND application.enableshipping EQ 1>
				<p>You must choose a shipping method to complete your order</p>
				<cfelse>
 
			</cfif> 
			<input type="hidden" name="PickShipPref" value="<cfoutput>#Client.ShipPref#</cfoutput>">
		 </form> 
 
This is in the CWTagProcessOrder.cfm file, which is the cfmodule called when the Place Order button is clicked, in order to validate the form:
 
  <!--- Validate Credit Card Input --->
  <cfparam name="request.FieldInvalid" default="NO">
	<cfif request.PaymentAuthType EQ "Gateway" OR request.PaymentAuthType EQ "None">
	  <CFIF "<cfoutput>#FORM.cst_terms#</cfoutput>" CONTAINS "Net30">
		<cfscript>
		// Check that PO Number is not blank
		if  (FORM.cstPONumber eq "")
			{ request.FieldErrorPON = "<br />P.O. Number cannot be blank.";
			 request.FieldInvalid = "YES";
		}
		</cfscript>
	  <CFELSE>
		<cfscript>
		// Check Card holder name
		if (FORM.cstCCardHolderName eq "")
			{ request.FieldErrorCHN = "<br />Card Holder Name cannot be blank.";
			 request.FieldInvalid = "YES";
		}
		
		// Check C Card Type
		if (FORM.cstCCardType eq "forgot")
			{ request.FieldErrorCT = "<br />Please choose your credit card type.";
			 request.FieldInvalid = "YES";
		}
 
		// Check C Card Number
		thisCCNum = FORM.cstCCNumber;
		ccLength = 16;
		altccLength = 16;
		ccvLength = 3;
		if(FORM.cstCCardType EQ "amex"){
			ccLength = 15;
			altccLength = 15;
			ccvLength = 4;
		}
		
		if(Form.cstCCardType EQ "visa"){      
			altccLength = 13; // visa now accepts 13 and 16 character numbers, so allow both    
		}
		
		if (IsNumeric(thisCCNum) IS "FALSE" OR (Len(thisCCNum) NEQ ccLength And Len(thisCCNum) NEQ altccLength)){ 
			request.FieldErrorCN = "<br />You did not enter a valid credit card number.";
			request.FieldInvalid = "YES";
		}
		
		if (IsNumeric(FORM.cstCCV) IS "FALSE" OR Len(FORM.cstCCV) LT ccvLength)
			{ request.FieldErrorCCV = "<br />You did not enter a CCV code.";
			 request.FieldInvalid = "YES";
		}
		
		// Check C Card Expr Month
		if (FORM.cstExprMonth eq "forgot"){ 
			request.FieldErrorCM ="<br />Please choose the month your card expires.";
			request.FieldInvalid = "YES";
		}
		
		// Check C Card Expr Year
		if (FORM.cstExprYr eq "forgot"){ 
			request.FieldErrorCY = "<br />Please choose the year your card expires.";
			request.FieldInvalid = "YES";
		}
		</cfscript>
	  </cfif>
	</cfif>
[+][-]06.10.2008 at 09:21PM PDT, ID: 21756754

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]06.10.2008 at 10:16PM PDT, ID: 21756988

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]06.10.2008 at 11:10PM PDT, ID: 21757244

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]06.11.2008 at 12:19AM PDT, ID: 21757564

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]06.11.2008 at 10:02AM PDT, ID: 21762012

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]06.11.2008 at 10:03AM PDT, ID: 21762021

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]06.11.2008 at 10:59PM PDT, ID: 21766467

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]06.13.2008 at 03:02AM PDT, ID: 21777307

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]06.14.2008 at 09:28PM PDT, ID: 21787475

View this solution now by starting your 7-day free trial. Setting up your free trial is quick, easy, and secure. We will return you to this solution, unlocked, when you're done.

 

About this solution

Zones: JavaScript, ColdFusion Application Server
Tags: Javascript, ColdFusion
Sign Up Now!
Solution Provided By: msfletch
Participating Experts: 1
Solution Grade: A
 
 
[+][-]06.15.2008 at 11:54PM PDT, ID: 21791235

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]06.16.2008 at 12:01PM PDT, ID: 21796382

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]06.16.2008 at 05:43PM PDT, ID: 21798743

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
 
Loading Advertisement...
20080716-EE-VQP-32 / EE_QW_2_20070628