Home ›

At the Forge - JavaScript, Forms and Ajax

Issue 150

From Issue #150
October 2006

Oct 01, 2006  By Reuven M. Lerner
 in
Dynamic user detection and registration made easy via Ajax.

Listing 1. register.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head><title>Register</title>
  </head>
  <body>
    <h2>Register</h2>
    <form action="/cgi-bin/register.pl" method="post">
        <p>Username: <input type="text" name="username" /></p>
        <p>Password: <input type="password" name="password" /></p>
        <p>E-mail address: <input type="text" name="email_address" /></p>
        <p><input type="submit" value="Register" /></p>
    </form>
  </body>
</html>

Listing 2. register.pl


#!/usr/bin/perl
use strict;
use diagnostics;
use warnings;
use CGI;
use DBI;
# ------------------------------------------------------------
# # Connect to the database
# ------------------------------------------------------------
# my $dbname = 'atf';
my $dbuser = 'reuven';
my $dbpassword = '';
my $dbh = DBI->connect("DBI:Pg:dbname=$dbname",
                              $dbuser, $dbpassword,
{
                        AutoCommit => 1, RaiseError => 1,
PrintError => 1, ChopBlanks => 1}) ||
    print "<p>Error connecting: '$DBI::errstr' </p>";

# ------------------------------------------------------------
# CGI startup
# ------------------------------------------------------------
my $query = new CGI;
print $query->header("text/html");
print $query->start_html(-title => "Site registration");

my $username = $query->param("username");
my $password = $query->param("password");
my $email_address = $query->param("email_address");

# ------------------------------------------------------------
# Check the parameters
# ------------------------------------------------------------
my @missing_data = ();

push @missing_data, "The username"
    unless $username;

push @missing_data, "A password"
    unless $password;

push @missing_data, "The e-mail address"
    unless $email_address;

if (@missing_data)
{
    foreach my $missing_field (@missing_data)
    {
        print "<p>Sorry, but you are missing:</p>\n";
        print "<ul>\n";
        print "<li> $missing_field</li>\n";
        print "</ul>\n";
        print "<p>Please back up and try again.</p>\n";
        exit;
    }
}


# ------------------------------------------------------------
# Try to register the user
# ------------------------------------------------------------
my $select_sql = "SELECT COUNT(*) FROM Users WHERE username = ?";
my $select_sth = $dbh->prepare($select_sql);
$select_sth->execute($username);

my ($username_is_taken) = $select_sth->fetchrow_array();

# Is this username taken?  If so, give an error
if ($username_is_taken)
{
    print "<p>Sorry, but the username '$username' was already taken.
Please back up and try again.</p>\n";
}

# Otherwise, insert the new trio into the
database
else
{
    my $insert_sql = "INSERT INTO Users (username, password,
email_address)
                                    VALUES (?, ?, ?)";
    $dbh->do($insert_sql, {}, $username, $password, $email_address);

    print "<p>Added the username '$username' to the system!</p>\n";
}

print $query->end_html;

The HTML form has three text fields, in which the user is requested to enter a user name, a password and an e-mail address. (I personally prefer to use e-mail addresses as user names, but I realize many people don't, so I'll add it this month.) We know from the database definition that the user name must be unique in the system, but the name and e-mail address can each exist multiple times.

The registration program (in Listing 2) is a relatively simple CGI program. It connects to the database using Perl's DBI interface, then uses the standard start of CGI programs, grabbing parameters and generally getting ready. The program then checks the database to see if the user name already exists, returning the number of rows it matches in the database. If no rows match, we can assume that the user name is available. (There is something of a race condition here, but we're not going to complicate things with transactions for this small example.)

Making the Form Dynamic

This is the type of registration form with which most of us are familiar. Moreover, this is the type of registration form many of us continue to implement on various sites. It's easy for the programmer to build, it's easy to understand and debug, and it's compatible with all browsers out there.

The problem is not in the technical underpinnings of the program, but rather in the user interface. From nontechnical users' perspectives, it doesn't make sense for them to enter a user name, password and e-mail address, then submit it, and only then find out that the user name is unacceptable. Surely there must be a way to fix this!

The only way for forms to be checked before they are submitted to a server is to use a client-side language—that is, a language embedded within the Web browser, which can attach itself to browser window events. The universal standard for such a language is ECMAScript, because it was ECMA International (formerly known as the European Computer Manufacturers Association) that approved and published the standard. However, most people refer to ECMAScript by the language that inspired the standard, namely JavaScript.

JavaScript is almost always found within the pages of an HTML document. We can define and invoke functions inside of the document, triggering the invocations with event handlers. Thus, we can check the contents of a form when someone clicks the submit button, before the contents are sent to the server. We can change styles when the mouse moves on (or off) particular text and graphics. And, we can execute functions when someone enters or exits an HTML form element.

Listing 3 contains js-register.html, a modified version of register.html. The basic idea in this file is that as soon as the username text field is modified by the user, the browser executes the checkUsername function.

______________________

Comments

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

is that can do for mysql and for long title of artiles

seodigger's picture
Submitted by seodigger (not verified) on Sun, 01/07/2007 - 20:18.

HI
this is very good post
but i wonder you can help for the one wwork with mysql and
special in case of record have long title
eg: when some one posting articles the Ajax will check for its title ( may be long ) and find in data, is some realy similar articles exiting with that title .. so poster do not make double post ..
if have any solution please pm mail me yahoo binhaus
thanks
kind regards

White Paper
More Resources
Fabric-Based Computing Enables Optimized Hyperscale Data Centers

Today’s modular x86 servers are compute-centric, designed as a least common denominator to support a wide range of IT workloads. Those generic, virtualized IT workloads have much different resource optimization requirements than hyperscale and cloud applications. They have resulted in a “one size fits all” enterprise IT architecture that is not optimized for a specific set of IT workloads, and especially not emerging hyperscale workloads, such as web applications, big data, and object storage. In this report, you will learn how shifting the focus from traditional compute-centric IT architectures to an innovative disaggregated fabric-based architecture can optimize and scale your data center.

Learn More

Sponsored by AMD

White Paper
More Resources
Red Hat White Paper: Using an Open Source Framework to Catch the Bad Guy

Built-in forensics, incident response, and security with Red Hat Enterprise Linux 6

Every security policy provides guidance and requirements for ensuring adequate protection of information and data, as well as high-level technical and administrative security requirements for a system in a given environment. Traditionally, providing security for a system focuses on the confidentiality of the information on it. However, protecting the data integrity and system and data availability is just as important. For example, when processing United States intelligence information, there are three attributes that require protection: confidentiality, integrity, and availability.

Learn more about catching the bad guy in this free white paper.

Learn More

Sponsored by DLT Solutions