User Registration - Part 4
The basics of developing a user registration system using ASP
Next, we will focus on preloading the form for the duplicate login display and the modification display. We may use the same code to do both as the values we need are loaded into just one set of variables irrespective of whether the request is for the duplicate user display or the modify display.
First, we add a Javascript function that will preload the from. Note that the ASP compiler treats HTML markup and Javascript the same way. Anything not enclosed in <% %>" is simply ignored. We can use the response.write shorthand to load the variables into respective value fields in the case of text input controls. Preloading radio groups, checkbox groups, and lists is not as easy; using a Javascript function that only gets printed out if the request is for a duplicate user page or a modification page is the neatest solution. All ASP code is in red. The source of the HTML output will only contain string values of the ASP variables
<%if login <> "" or session("loginduplicate") <> "" then%>
function preLoadForm()
{
var favString = "<% =favflowers%>";
var gender = "<% =gender%>";
document.forms.register.day.selectedIndex = <%= bday%>;
document.forms.register.month.selectedIndex = <%= bmonth%>;
for (i=0;i<document.forms.register.likes.length;i++)
{
if (favString.indexOf(document.forms.register.likes[i].value) != -1)
{
document.forms.register.likes[i].checked = true;
}
}
if (gender == "F") document.forms.register.gender[0].checked = true;
if (gender == "M") document.forms.register.gender[1].checked = true;
}
<%end if%>
To compliment the preLoadForm function, we add a doStuff function that is called on the load event of the HTML document as follows:
<body onload="doStuff()">
The doStuff() function contains two calls to other functions. It calls the function that preloads the form if the display is for duplicate login or modification in addition to calling the function that displays a flower image based on the value of the favorite flower cookie.
function doStuff()
{
displayFav();
<%if login <> "" or session("loginduplicate") <> "" then %>
preLoadForm();
<%end if%>
}
The following tags and html should be added just before the first row of the table that contains the from. The code displays either a welcome or a duplicate login inline message to the user based on the type of request.
<% if operationtype = "update" then %>
<tr><td colspan=2>Welcome <%= login%></td></tr>
<input type=hidden name=operation value="update"/>
<%elseif session("loginduplicate") <> "" then %>
<tr><td colspan=2>Sorry, that login is already taken.
Choose another and enter password again.</td></tr>
<%end if%>
The login and password fields should be displayed only for new users. The following ASP code should be added to existing HTML markup to add this functionality. Note that we preload form fields using the '<% = variableName %> shorthand.
<%if operationType <> "update" then %> <tr><td>Select a Login Name:</td> <td><INPUT TYPE="text" NAME="login" size=20 maxlength=10></td></tr> <tr><td>Choose a password: </td> <td><INPUT TYPE="password" NAME=password1></td></tr> <tr><td>Enter Password Again: </td> <td><INPUT TYPE="password" NAME=password2></td></tr> <%end if%>
The following ASP tags should also be added to fully preload the form using the '<% = variableName %> shorthand. These statements are not enclosed in conditional (IF) statements. This is because the variables simply contain an empty string if they are not initialized; therefore, for a new user with no preload values, they will simply initialize form fields to empty strings.
<tr><td>Last Name: </td> <td><INPUT TYPE="text"
NAME="lname" size=30 value="<% =lname %>"></td></tr>
<tr><td>First Name: </td> <td><INPUT TYPE="text"
NAME="fname" size=30 value="<% =fname %>"></td></tr>
<tr><td>Phone Number: </td><td><INPUT TYPE="text"
NAME="phone" size=30 value="<% =phone %>"></td></tr>
.
.
(some HTML markup for check boxes, lists etc.)
.
.
<tr><td>Please enter a message<br>to send with
your<br>flowers: </td> <td><TEXTAREA NAME="message"
ROWS="4" COLS="30">
<%= message%>
</TEXTAREA></td></tr>
Add all the above code to register.asp in the appropriate places and save the file. An 'alert=yes' query string was added to the florist.html URL in the saveuser.asp file when the response was redirected to the home page after successful registration or modification. A couple of lines of Javascript in the florist.html file will make a window with a 'Registration Success' message pop up. These lines check the querystring using the DOM string object contained window.location.search. The substring function simply recovers the querystring without the leading question mark symbol.
var queryString = window.location.search.substring(1);
if (queryString.length > 0)
{
alert("Registration Success!");
}
As you can see, the same alert is displayed for both a new user and an existing user who has modified his or her information. You can try to alter the application so that a more appropriate alert is displayed for each case. At the very end of the file, we reset the "duplicatelogin" session variable. This is important - if this variable is not reset, the user will keep getting a 'choose new login' registration page as long as the session lasts even after he or she has entered a unique login ID and has registered successfully.
<%session("loginduplicate") = "" %>
We are now ready to test our new registration page. Use the URL http://localhost/florist/register.asp to get into the new registration page. Enter a valid set of values and click submit. You will get a success message and be redirected to the home page. Now, navigate back to the registration page by typing the URL (do not use the link - it points to the old HTML page!). You will see a preloaded form with a welcome message for the loginID you chose. you can try changing data and submitting your form. Your changes will be reflected in the form when you navigate back to it.
Screenshot 8a: Returning User's View
Now, close all browser windows to end the current session. Open a fresh window and go to http://localhost/florist/register.asp once more. Enter a new set of information. However, the login ID should be identical to the one you entered the last time. You will get a duplicate login message with a preloaded form. Once you enter a new ID, you will get a success message and be redirected to the home page.
Screenshot 8b: Duplicate Login View
Finally, if you open the 'users' table in the database, you will see a new row for each user you added. Be sure to close the database before you submit the form. If the database is open when you submit the form, an error will be displayed on the browser window. If you get errors that you cannot resolve, check to make sure that you have added all the code correctly. Alternately, you can compare the tested ASP scripts in the included Zip File to make sure they match yours.
