Javascript Tutorials

JavaScript Zone

Script Tutorials

Introduction
Pre-requisites
Installation
Notes

Screen shot of visitor registration

Visitor Registration (v1.1)

Introduction

Related Links

Greetings message tutorial
The JavaScript Source

Updates

[08.08.01] Over 18 check and Unregister added

This Javascript allows a visitor to your site to record a userid, password, password reminder and e-mail address. The old password field is used if the visitor wishes to change their password.

The password can be used to restrict access to certain parts of your site.

The related links show some sample tutorials that make use of information registered by visitors.

Visitor Registration Demo

Pre-requisites

there are no pre-requisites for this tutorial

Installation

Cut and paste the following code to your html page as indicated:

1. Add the following code to the <head> part of the page: <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> 2. Add the following to the <BODY> part of the page: <form name="f_register" !method=get !action="javascript:void(0)" !onsubmit="register(this); return false;"> <table width=100%> <tr><td width=30% valign="top"> <small>Your nickname: <td width=30% valign="top"> <!div align="center"> <input type=text name=regname value=""> <!/form> <!/div> <td width=40% valign="bottom"> <small><small> Enter the nickname you wish to be known by. <tr><td width=30% valign="top"> <small>Old password: <td width=30% valign="top"> <!div align="center"> <input type=text name=oldpassword value=""> <!/form> <!/div> <td width=40% valign="bottom"> <small><small> Enter your old password. This is required if you have previously registered with this site and you wish to change your password. <tr><td width=30% valign="top"> <small>Password: <td width=30% valign="top"> <!div align="center"> <input type=text name=password value=""> <!/form> <!/div> <td width=40% valign="bottom"> <small><small> Enter a password. This is optional, and this feature will only be used to access certain areas of this site which may become restricted in the future. <tr><td width=30% valign="top"> <small>Password reminder: <td width=30% valign="top"> <!div align="center"> <input type=text name=reminder value=""> <!/form> <!/div> <td width=40% valign="bottom"> <small><small> If you have entered a password, you may enter a question here that can be used to prompt you for your password. If you do use this, please choose a question that will only have meaning to you. <tr><td width=30% valign="top"> <small>E-mail address: <td width=30% valign="top"> <!div align="center"> <input type=text name=email value=""> <!/form> <!/div> <td width=40% valign="bottom"> <small><small> Enter your e-mail address. This is optional, but will save you having to re-enter it if requested. <tr><td width=30% valign="top"> <small><br>Optional details...<br><br> <td width=30% valign="top"> <td width=40% valign="bottom"> <tr><td width=30% valign="top"> <small>Over 18: <td width=30% valign="top"> <!div align="center"> <input type=checkbox name=over18 value=""> <!/form> <!/div> <td width=40% valign="bottom"> <small><small> Click here if you are 18 years or older. This is because parts of this site contain adult content, and access is restricted (note: old password is also requried). <tr><td><br><td><td> <tr><td width=30% valign="top" align="center"> <small><b><a href="javascript:register(this);">Register</a><hr> <td width=30% valign="top" align="center"> <small><b><a href="javascript:getdata(this);">Restore</a><hr> <td width=40% valign="top" align="center"> <small><b><a href="home.html">Cancel</a><hr> <tr><td width=30% valign="top" align="center"> <td width=40% valign="top" align="center"> <td width=30% valign="top" align="center"> <small><b><a href="javascript:unregister(this);">UnRegister</a><hr> </table> </form>
Add text on this page explaining the benefits of registering on your site, and notes on the data you are storing.

Notes

this tutorial demonstrates:
- how to design forms with user prompts and help
- how to use cookies
- how to capture and save data from a form
- how to validate e-mail addresses
the code for maintaining cookies is taken from the original date last visitied / number of visits javascript from the JavaScript Source - thanks
the code for validating e-mail addresses is taken from the JavaScript Source - thanks again!
if you use this script, amend the variable names' prefix from pt_ to something meaningful to your site

Page last updated 8th August 2001