C and S Design.
Search Friendly Programming and Design

ASP Code Articles

Maintain the values of a form

Something that can be done to make forms user friendly is to ensure that it keeps the submitted values should there be a user error and you need to present the form back to the user.
Here is some ASP code to achieve that. On this demonstration page there is just one text box and a select (drop down) box, the select presents a small problem in that the code has to match the submitted value and add the selected attribute into the appropriate option element. To get around that you can hard code an array (as here) with the values for the select or, and a more likely scenario is that you would be retrieving the values from database. The principle is the same, Simply looping through the array or recordset and writing the HTML code and values out, each iteration requires a check of the current value against the submitted value and if a match is found write selected (for HTML) or selected="selected"> (for XHTML) into the option tag

There are another couple of "tricks" employed here. The text box has an action attached to the onFocus event to clear the default text when the form is first opened (onFocus="this.value = '' ").
This however would not be very user friendly if this happened after the form nas been submitted and the inputted data was wiped out, So ASP code to the rescue again. When the form has been submitted the variable is set the the new action required, this time to select all the text in the text box (onFocus="this.select()")
The second is to give the means to set the values back to defaults. You may assume that adding a reset button <input type="reset" ... /> would accomplish this but, a reset is a client side operation and would only clear the form rather than the server side variables. So two submit buttons are employed and some ASP code to decide which was clicked.

01: frmAction = lcase(request.form("submit"))

02: if frmAction = "" or frmAction = "cancel" then
03: 	frmJS = "this.value=""
04: 	text_value = "Text Input"
05: 	select_value = 0
06: elseif frmAction = "accept" then
07: 	select_value = request.form("test_select")
08: 	text_value = request.form("test_txt_input")
09: 	frmJS = "this.select()"
10: end if

The code first transfers the value of the submit key to a variable and converts it to lowercase for comparison, If the value is blank (not submitted) or is equal to "cancel", The default values for the page are set and the javascript event is set to clear the input object.value = ''. If it is equal to "accept" then the submitted values are transfered into variables and the javascript event is set to object.select().

01: <div class="cell">
02: <input type="text" name="test_txt_input" _ 
	id="test_txt_input" _ 
	onfocus="<%=frmJS%>" _ 
	value="<%=text_value%>" />

03: </div> <!-- cell -->
04: <div class="cell">
05: <select name="test_select" id="test_select">
06: <option value="0">Select From</option>
07: <%
08: with response
09: for i = 1 to ubound(value_array)
10: 	.write "<option value="
11: 	.write chr(34)
12: 	.write i
13: 	.write chr(34)
14: if i = cint(select_value) then
15: 	.write " selected ="
16: 	.write chr(34)
17: 	.write "selected"
18: 	.write chr(34)
19: end if
20: 	.write ">"
21: 	.write value_array(i)
22: 	.write "</option>"
23: next
24: end with

25: %>
26: </select>

This second block of code is part of the form generation code. On line 2: can be seen where the javascript event is added <%=frmJS%> and how the submitted value is shown <%=text_value%>.
The code loop to write and set the select box begins at line 8: and is simply a for...next loop that write out an <option> tag for each element in the array (or recordset). the if ... then ... end if construct at lines 14: to 19: compares the loop value 'i' against the submitted value (converted to an integer) cint(select_value). If a match is found, it writes in the selected attribute to put the list selector in the correct position.