Creating an AJAX Web Form from scratch with Jquery and PHP

It was a long time since my last post, so I thought of posting something interesting today: A tutorial that will show you how to use AJAX with Jquery to call PHP scripts. Take a coffee, it’ll be a long read You may want to check what we are going to build before diving into this tut.

Designing the form

First step is to design a nice looking form. The form has 3 inputs: Two text boxes and one button. We can either user tables or lists. But I prefer to use lists and labels since they are SEO friendly.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ajax Web Form</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrap"> <form id="ajaxform"> <div class="form_description"> <h2>Ajax Web Form</h2> <p> This is an example Ajax form. It checks if the username is available or create a new username. </p> </div> <ul> <li id="username_check"> <label class="lbl"> User Name (Availibility) </label> <div> <input class="txt_input" id="txt_checkuser" type="text" maxlength="255" value=""/><p class="hint"> <img src="img/ok.png" /> User name Available</p><p class="hint"><img src="img/no.png" /> User name already used</p> </div> </li> <li id="username_add"> <label class="lbl"> Add UserName </label> <div> <input class="txt_input" id="txt_adduser" type="text" maxlength="255" value=""/> <p class="hint"> <img src="img/ok.png" /> User name added successfully</p><p class="hint"><img src="img/no.png" /> Error while adding User name</p> </div> </li> <li class="buttons"> <input id="submit_form" class="btn" type="submit" value="ADD" /> </li> </ul> </form> </div> </body> </html>
Now let’s add some CSS code to make it look a little better and more inducing.
#wrap { width: 550px; height: 250px; margin: 75px auto; } .btn { float: right; width: 150px; height: 35px; border: 1px solid #000004; background-color: #A8CBFE; cursor: pointer; } BODY { margin: 0; font-family: "Lucida Grande", Tahoma, Arial, Verdana, sans-serif; font-size: small; padding: 0; } H2 { clear: left; font-size: 160%; font-weight: 400; margin: 0 0 3px; } #ajaxform { padding: 10px 25px 50px; border-top: 40px solid #A8CBFE; margin: 0; border-left: 1px solid #B9B9C5; border-bottom: 1px solid #B9B9C5; border-right: 1px solid #B9B9C5; } .form_description { border-bottom: 1px dotted #999999; margin: 0; padding: 0; } FORM LI { display: block; margin: 0; padding: 4px 5px 2px 9px; position: relative; } #username_add:hover { background-color: #DAFCBF; } #username_check:hover { background-color: #DAFCBF; } #username_check { } FORM UL { font-size: 100%; list-style-type: none; margin: 0; padding: 0; width: 100%; } .btn:hover { background-color: #A9DAFD; }
Our form should look like this (Oh, for the icons they are the famous FAMFAMFAM icons )

You should have noticed the hints. They are visible since we are going to hide/show them using Jquery.
So we’ll add some additional code to load the library and hide the hints.
Add this code to the “head” of the page. Don’t forget to download Jquery, I used version 1.3.2 as of the release of this tutorial.
<script src="jquery.js" type="text/javascript"></script> <script src="script.js" type="text/javascript"></script>
After, create a new javascript file called “script.js” and add the following code. It’ll hide the hints when the page loads.
$(document).ready(function() { // Hide all the hints $('.hint').hide(); });
Later on, you’ll discover that we’ll load the hints from the PHP script using Jquery. Nevertheless, we’ll need a hint stored on HTML in case AJAX can’t connect to the server.

The database and the PHP code

Next we need to set up a database and a table to store the user names. I named my data base “mydatabase” and the table “users”. Here’s the SQL code to generate the table. It’ll create two rows.
-- phpMyAdmin SQL Dump -- version 3.2.1 -- http://www.phpmyadmin.net -- -- Host: localhost -- Generation Time: Aug 18, 2009 at 08:13 AM -- Server version: 5.1.37 -- PHP Version: 5.3.0


SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
--

-- Database: `mydatabase`

--
-- --------------------------------------------------------
--

-- Table structure for table `users`

--
CREATE TABLE IF NOT EXISTS `users` (

  `ID` int(4) unsigned NOT NULL AUTO_INCREMENT,

  `username` text NOT NULL,

  PRIMARY KEY (`ID`)

) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=0 ;
--

-- Dumping data for table `users`

--

INSERT INTO `users` (`ID`, `username`) VALUES ('omarabid'), ('anotheruser');

In order for the query to work correctly, log in to PHPmyadmin, select a database and then click “SQL” tab. Paste the code and hit the “Go” button.

Now we need to create a PHP script. It will be called later using Jquery. We’ll use the OOP methodology. So we’ll create a user class and two function “checkuser” and “adduser” that return either true or false.
The user Class
// User Class class user {


    var $_un;

    function user($un) {

        $this->_un = $un;

    }

    function adduser() {

        // Checks if user exists

        if ($this->checkuser() == true) {

            return false;

        } else {

            // Try to add the user

            $qr = mysql_query("INSERT INTO users (username) VALUES( '".$this->_un."' ) ");

            // Return True or False

            if ($qr == 1) {

                return true;

            } else {

                return false;

            }

        }

    }

    function checkuser() {

        // Query the DB

        $qr = mysql_query("SELECT username FROM users WHERE username = '".$this->_un."'");

        $res = mysql_fetch_array($qr);
        if ($res == NULL) {

            return false;

        } else {

            return true;

        }

    }

}

The PHP script
The script is composed of three parts: The Class, the Mysql Connection and the code (that will execute the transactions).
In the top, we’ll place the user class. Next, we’ll connect to the database. After, we’ll grab HTTP post information and execute actions from them.
// Add the user class here // Disable caching to prevent unwaited results header("Cache-Control: no-cache");


// Connect to Mysql

$conn = mysql_connect('localhost', 'root', 'your-password') or die('Could not connect to mysql');

mysql_select_db('mydatabase') or die('Could not connect to DB');
// Retrieve data from HTTP Post

$action = $_GET['action'];

$username = $_GET['username'];
// Create a new user object

$newuser = new user($username);
// Parse HTTP header information
if ($action == 'add') {

    if ($newuser->adduser()) {

    	// User Added

        echo '<p class="hint"> <img src="img/ok.png" /> User name added successfully</p>';

    } else {

        echo '<p class="hint"> <img src="img/no.png" /> User name was not added</p>';

    }

} elseif ($action == 'check') {

    if ($newuser->checkuser()) {

    	// User Already exists

        echo '<p class="hint"> <img src="img/no.png" /> User name already exists</p>';

    } else {

        echo '<p class="hint"> <img src="img/ok.png" /> User name available</p>';

    }

} else {

    echo "No Action Is defined";

}

// Close Connection mysql_close($conn);
To make the script work, you need first PHP and Mysql running either on a host or on your local machine.
After, create a Mysql database and add the “users” table to it (as described above).
Now, it’s time to tweak the script. Change the host, username, password and database values. Next, place the script in your host root or a folder and execute it. If nothing “No Action Is defined” shows, then the connection worked correctly.
To try the script and check if it functions correctly, type “script.php?action=check&username=typehere”.

Ajax Calls

It’s time we implemented the AJAX feature. We have two inputs to check: The first one after the user completes typing, the next when the user clicks the “Add” button.
$(document).ready(function(){ // Disable caching to prevent unwaited results $.ajaxSetup({ cache: false });


    // Check un availability after typing a name

    $("#txt_checkuser").change(function(){

        // Store the username in a variable

        var jq_username = $("#txt_checkuser").val();

        // Prepare the link

        var link = 'http://localhost/AJAX/user.php';

        $('div #checkuser_hint').load(link, "action=check&username=" + jq_username);

    });

// Add a user name $("#submit_form").click(function(){ // Store the username in a variable var jq_username = $("#txt_adduser").val(); // Prepare the link var link = 'http://localhost/AJAX/user.php'; $('div #adduser_hint').load(link, "action=add&username=" + jq_username); }); });

As you see, first we disabled the cache. Second, we bind the change event to the txt_checkuser input. This will make the code run when the user change focus from the input. Third, we bind the button to the click event.
Now everything is working correctly and as it should.

Optimization and security

Security
The script and form works, but we didn’t take care of malicious people and hackers in the web. We need to secure our form against SQL injections.
If you are new to them, here’s a simple example.
This code queries the database using the variables directly.
// Query database to login any matching user $query = "SELECT * FROM users WHERE user='{$_GET['username']}' AND password='{$_GET['password']}'"; mysql_query($query); ?>
Now, let suppose someone entered the following.
Username: topuser
Password: ' OR ''='
The mysql query will become
$query = “SELECT * FROM users WHERE user=’topuser’ AND password='' OR ''=''”
Resulting in full access to any accout!
To prevent SQL injection, PHP offers a function called “mysql_real_escape_string”. Here’s how we can implement it.

// First query $qr = mysql_query(sprintf("INSERT INTO users (username) VALUES( '%s' ) ",mysql_real_escape_string($this->_un))); // Second query $qr = mysql_query(sprintf("SELECT username FROM users WHERE username = '%s' ",mysql_real_escape_string($this->_un)));

Optimization
We can optimize our form a little bit. We can for example check for user input, server availability or any other thing.
For example, while I was trying it; I noticed that when I check for an available username and then add it, the available notice don’t change to unavailable even if you edit the username and retype it.

As you see, the “User name available” doesn’t change since text didn’t changed. So Jquery don’t fire the function another time.
To fix this little issue, we can add this conditional block when the user hit the add button
// If the username is the same as checked, change the notice if (jq_username == $("#txt_checkuser").val()) { var link = 'http://localhost/AJAX/user.php'; $('div #checkuser_hint').load(link, "action=check&username=" + jq_username); }
We can never finish optimizing and securing our scripts and code; but we try to do our best

The End

In this tutorial, you learned how to create a simple web form, write PHP code to query a database and use AJAX with Jquery to dynamically link between the form and the script.
I tried to explain Step-By-Step, I also made an online example available for preview; you can also download the source code.
Now let me hear critics, suggestions, bugs....

Tagged as: ajax, jquery, php, web form

Recently

Blogroll

Last Comments