At the Forge - JavaScript, Forms and Ajax

Dynamic user detection and registration made easy via Ajax.

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

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

Webinar
One Click, Universal Protection: Implementing Centralized Security Policies on Linux Systems

As Linux continues to play an ever increasing role in corporate data centers and institutions, ensuring the integrity and protection of these systems must be a priority. With 60% of the world's websites and an increasing share of organization's mission-critical workloads running on Linux, failing to stop malware and other advanced threats on Linux can increasingly impact an organization's reputation and bottom line.

Learn More

Sponsored by Bit9

Webinar
Linux Backup and Recovery Webinar

Most companies incorporate backup procedures for critical data, which can be restored quickly if a loss occurs. However, fewer companies are prepared for catastrophic system failures, in which they lose all data, the entire operating system, applications, settings, patches and more, reducing their system(s) to “bare metal.” After all, before data can be restored to a system, there must be a system to restore it to.

In this one hour webinar, learn how to enhance your existing backup strategies for better disaster recovery preparedness using Storix System Backup Administrator (SBAdmin), a highly flexible bare-metal recovery solution for UNIX and Linux systems.

Learn More

Sponsored by Storix