ASP beginner’s tutorial

PART SIX

Forms

How can I make use of user input?

The main way to process information selected by your site visitors is using HTML forms. A form is a wrapper that allows you to capture a visitor’s responses for processing. In the previous examples, you may have noticed that the <select> tag had the attribute name="". This is an identifier that can be used by the ASP script to read data passed to it by a form.

What do you mean by "passed by a form"?

When you create a form, you add certain elements to it, such as text boxes and lists, where the site visitor can enter text, select options, etc. the user will then submit that form, using a submit button, and their selections will be “passed” to the sever. Using ASP script, you can then find out the information entered or selected by the visitor.

How do I create a form?

The HTML you need to use is, helpfully, the <form> tag. The opening/closing tag must surround the input fields you want to pass to the server. Using our previous date of birth example, the page may look like:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<html>
<head>
<title>Date of birth</title>
</head>
<body>
<form>
Select your DOB (day/month/year):
<select name="day">
<%
Dim i ' declare loop count variable

… etc …

Next
%>
</select>
</form>
</body>
</html>

Is that it?

Not quite! You also need to tell your visitor and their browser what to do with the form! You can add a submit button, for example:

<input type="submit" name="Submit" value="Submit form">

Note: the <input> element can appear in more than one format, depending on the type="" attribute. For example, type=”submit” will allow the visitor to submit a form via a button, and type="text" allows the visitor to type text in to a box. In this case, the value will appear as the text on the button.

It is advisable to give the form a name, especially if you have more than one form on a page.

Two more attributes are needed to complete the form. The first is the action="" attribute, where you tell the server where to send the data for processing. If you want to process the data on the same page, you can miss out this attribute, although is advisable to include it. The second is the method="" attribute. This attribute can take one of two values: post or get.

The post method sends the information invisibly to the visitor and the get method send the information in the browser address bar. You may well have seen the get method if you have used any of the main search engines. If you search for “ASP tutorial” in Google and press the “search” button, the address bar will contain (amongst other things) the term q=ASP+tutorial

There are good reasons for using the get method, but where possible you should use the post method as it hides the form data and allows more data to be passed to the server.

How do I get the information passed by the form?

This depends on the form method used! If the form uses the post method, then you use the Request.Form("element name") method to retrieve an element value. For the get method, you use the Request.QueryString("element name") method. The querystring is the bit you can see in the address bar and, if Google used ASP, you would retrieve the search term using Request.QueryString("q").

For our date of birth example, depending on the form method used, we would use either Request.Form("day") or Request.QueryString("day") to retrieve the day value selected by the visitor.

Setting up the form to send the server to the same page (which we shall name “dob.asp”) and for the form to use the post method, we could set the page code as follows:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<html>
<head>
<title>Date of birth</title>
</head>
<body>
<form method="post" action="dob.asp">
Select your DOB (day/month/year):
<select name="day">
<%
Dim i ' declare loop count variable

… etc …

Next
%>
</select>
<input type="submit" name="Submit" value="Submit form">
</form>
</body>
</html>

How do we know that the form has been submitted?

Whilst it is obvious that we will expect to receive the date of birth selections, the other element in the form is the submit button. This gets passed to the server with the other elements, so we can test to see if the form has been submitted.

We can use a conditional statement to change the screen depending on whether the form has been submitted or not:

If Len(Request.Form("Submit")) = 0 Then
… the form has not been submitted, so do something …
Else
… the form HAS been submitted, so do something else …
End If

The new bit is the Len(string) function which counts the number of characters (it's length) in the string, or text, between the brackets. Thus, the statement means "if the length of the value of the form element called Submit is zero, then do something. If it is not (i.e. it is has a value), then do something else." The End If part just indicates where this conditional statement ends.

When a visitor submits the form, the value (i.e. the string in the value="Submit form" attribute) of the button gets passed and this text string has a length (i.e. 11 characters including the space). If the form has not been submitted then the value is "" (empty string) and has a length of zero.

How can this be used?

What we will do now is use this property to display the date of birth selectors if the form has not been submitted or tell the visitor their date of birth when they submit it.

The code could be:

1. <%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
2. <html>
3. <head>
4. <title>Date of birth</title>
5. </head>
6. <body>
7. <form method="post" action="dob.asp">
8. <%
9. Dim i ' declare loop count variable
10. If Len(Request.Form("Submit")) = 0 Then
11. ' show dob selectors
12. %>
13. Select your DOB (day/month/year):
14. <select name="day">
15. <%
16. ' output day options
17. For i = 1 To 31
18. Response.Write("<option>" & i & "</option>")
19. Next
20. %>
21. </select>
22. <select name="month">
23. <%
24. ' output month options
25. For i = 1 To 12
26. Response.Write("<option value="& i & ">")
27. Response.Write(MonthName(i))
28. Response.Write("</option>")
29. Next
30. %>
31. </select>
32. <select name="year">
33. <%
34. ' output year options
35. For i = 1901 To Year(Now())
36. Response.Write("<option>" & i & "</option>")
37. Next
38. %>
39. </select>
40. <input type="submit" name="Submit" value="Submit">
41. <%
42. Else
43. ' output dob
44. Response.Write("Your date of birth is: ")
45. Response.Write(Request.Form("day") & " ")
46. Response.Write(MonthName(Request.Form("month")) & " ")
47. Response.Write(Request.Form("year"))
48. End If
49. %>
50. </form>
51. </body>
52. </html>

Try this using the demonstration file: date-of-birth.asp

Your turn to try something!

  1. If you run this script, you will notice that you cannot get back to the opening screen without clicking on your browsers back button. How could you remedy this?
  2. Re-write the code using a get form.

    (An answer to question 2 is in the demonstration file date-of-birth-2.asp)
 
  Next: You have reached the end - happy programming!
© 2005 Index: Part 1 | Part 2 | Part 3 | Part 4 | Part 5 | Part 6