Creating a Facebook like Signup or Registration Form for website with jQuery

Facebook-like Registration Form with jQuery

This tutorial will show you how to make a Facebook style Registration Form using css,php, html and jQuery.So go ahead and download the files to start learning!

The XHTML

We start off by laying down the XHTML backbone, as seen in index.php in the demo files:

<div id="div-regForm">

<div class="form-title">Sign Up</div>
<div class="form-sub-title">It's free and anyone can join</div>

<form id="regForm" action="submit.php" method="post">
<table>
<tbody>
<tr>

 <td><label for="fname">First Name:</label></td>
 <td><div class="input-container">
 <input name="fname" id="fname" type="text" />
 </div></td>

</tr>
<tr>

 <td><label for="lname">Last Name:</label></td>
 <td><div class="input-container">
 <input name="lname" id="lname" type="text" />
 </div></td>

</tr>
<tr>

 <td><label for="email">Your Email:</label></td>
 <td><div class="input-container">
 <input name="email" id="email" type="text" />
 </div></td>

</tr>
<tr>

 <td><label for="pass">New Password:</label></td>
 <td><div class="input-container">
 <input name="pass" id="pass" type="password" />
 </div></td>

</tr>
<tr>

 <td><label for="sex-select">I am:</label></td>
 <td>
 <div class="input-container">
 <select name="sex-select" id="sex-select">
 <option value="0">Select Sex:</option>
 <option value="1">Female</option>
 <option value="2">Male</option>
 </select>

 </div>
 </td>
</tr>
<tr>
 <td><label>Birthday:</label></td>
 <td>

 <div class="input-container">

 <select name="month">
 <option value="0">Month:</option>
 <?=generate_options(1,12,'callback_month')?>
 </select>

 <select name="day">
 <option value="0">Day:</option>
 <?=generate_options(1,31)?>
 </select>

 <select name="year">
 <option value="0">Year:</option>
 <?=generate_options(date('Y'),1900)?>
 </select>

 </div>

 </td>

</tr>
<tr>

 <td>&nbsp;</td>
 <td><input type="submit" class="greenButton" value="Sign Up" />
 <img id="loading" src="img/ajax-loader.gif" alt="working.." />
 </td>

</tr>

</tbody>
</table>

</form>

<div id="error">
&nbsp;
</div>

</div>

The CSS

In order to convert our plain XHML coding into something eye-catching and facebook-likey, we need some serious styling.

Lets take a look at our CSS, as defined in demo.css

/* Page styles */

body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label{
 margin:0px;
 padding:0px;
}

body{
 margin-top:20px;
 font-family:Arial, Helvetica, sans-serif;
 color:#51555C;
 height:100%;

 font-size:11px;
}

/* Form styles */

input,select{
 padding:3px;
 color:#333333;

 border:1px solid #96A6C5;
 margin-top:2px;
 width:200px;
 font-size:11px;
}

select{
 width:auto;
 padding:2px;
}

.formline{
 padding:3px;
}

label{
 font-size:11px;
 text-align:right;
}

table{
 width:300px;
}

td{
 font-size:11px;
}

.input-container{
 padding:1px;
}

#div-regForm,.registered{
 border:3px solid #eeeeee;
 padding:15px;

 background:url(img/bg.jpg) repeat-x #cbd4e4;
 color:#203360;

 margin:30px auto 40px auto;
 width:400px;
}

.form-title,
.form-sub-title{
 font-size:20px;

 font-family:"Lucida Grande",Tahoma,Verdana,Arial,sans-serif;
 font-size:20px;
 font-weight:bold;
}

.form-sub-title{
 font-weight:normal;
 padding:6px 0 15px 0;
}

.greenButton{
 width:auto;
 margin:10px 0 0 2px;
 padding:3px 4px 3px 4px;
 color:white;
 background-color:#589d39;
 outline:none;
 border:1px solid #006600;
 font-weight:bold;
}

.greenButton:active{
 background-color:#006600;
 padding:4px 3px 2px 5px;
}

#loading{
 left:10px;
 position:relative;
 top:3px;
 visibility:hidden;
}

#error{
 background-color:#ffebe8;
 border:1px solid #dd3c10;
 padding:7px 3px;
 text-align:center;
 margin-top:10px;
 visibility:hidden;
}

The PHP Code

Remember, when a few minutes ago I mentioned about the generate_options PHP function?
Here it is, taken right from our functions.php file:

function generate_options($from,$to,$callback=false)
{
 $reverse=false;

 if($from>$to)
 {
  $tmp=$from;
  $from=$to;
  $to=$tmp;

  $reverse=true;
 }

 $return_string=array();
 for($i=$from;$i<=$to;$i++)
 {
  $return_string[]='
  <option value="'.$i.'">'.($callback?$callback($i):$i).'</option>
  ';
 }

 if($reverse)
 {
  $return_string=array_reverse($return_string);
 }

 return join('',$return_string);
}

function callback_month($month)
{
 return date('M',mktime(0,0,0,$month,1));
}

/* and here is how we use it (taken from our XHTML code above):
generate_options(1,31);    // generate days
generate_options(date('Y'),1900);   // generate years, in reverse
generate_options(1,12,'callback_month');  // generate months
*/

This is a neat little peace of code. Now lets explain what it does.

The first thing you notice in our generate_options function are the parameters $from and $to for the range of options to be generated (days, months and years in our case), and an optional parameter $callback, which is a callback function (more on that in a moment).

Inside the function, we define $reverse as false. If we use the function in the following manner: generate_options(1,31), we are just generating a series of option elements and outputting them in the same order. If we switch the positions of the parameters the output is in reverse order.

This is exactly what we do in line 5. We check if the range of $from and $to is reversed and setting $reverse to true. But in the same time, we are exchanging their values, so that we use the same for construct as in our normal generation. If we haven’t done this we would have had to write another for to do this job.

Next we fill an array called $return_string with the generated options, reversing it if necessary and outputting it as string by joining the array elements.

Remember the $callback I talked about earlier? Here comes its part. On line 18 we check if a $callback was supplied – as in generate_options(1,12,’callback_month’), and if it was, we execute the function and supplying the current $i counter’s value. In practice, it is the same as if we were doing callback_month($i).

Later we have the callback_month function, which we use as a callback in the month generation. It basically takes an integer parameter (our $i above), and returns the month name as string.

The jQuery source

Ok, now that we have completed the form’s looks, we need to be able to send the data over to the PHP backend where it is processed. For this purpose, we are using jQuery, which you can include in page by putting these lines of code in your page’s head section:

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>

The library is automatically included from Google’s CDN. After that you can use jQuery’s ajax method.

Here is the code located in script.js.

$(document).ready(function(){

 // UPDATE: commented out because the submit() method was added below instead
 //$('.greenButton').click(function(){
 // register();

 //});

 $('#regForm').submit(function(e) {

  register();
  e.preventDefault();

 });

});
function register(){
 hideshow('loading',1);
 error(0);

 $.ajax({
  type: "POST",
  url: "submit.php",
  data: $('#regForm').serialize(),
  dataType: "json",
  success: function(msg){

   if(parseInt(msg.status)==1)
   {
    window.location=msg.txt;
   }
   else if(parseInt(msg.status)==0)
   {
    error(1,msg.txt);
   }

   hideshow('loading',0);
  }
 });

}
function hideshow(el,act){
 if(act) $('#'+el).css('visibility','visible');
 else $('#'+el).css('visibility','hidden');
}
function error(act,txt){
 hideshow('error',act);
 if(txt) $('#error').html(txt);
}

The first lines of code in $(document).ready get executed after the page has loaded and bind our register() function with the form’s onsubmit event utilizing the preventDefault() method in order to stop the form from being submitted.

And here is the simplicity of the $.ajax method (line 23) – in a few lines of code we send to submit.php by POST all of regForm‘s fields (regForm is the ID of our registration form). We receive a response in JSON format (for more on that later) which gets processed by the function given in success. In this example (lines 30-37) we process the returned object and decide whether to show an error, or redirect to a registered-user-only page.

Later we have the hideshow() function which hides or shows an element on the page (for example the rotating gif animation on our form) and the error function which manages the displaying of errors on the form.

But how do we decide whether the information in the form is correct, and where to redirect the user if it is?

This is done in submit.php:

// we check if everything is filled in
if(empty($_POST['fname']) || empty($_POST['lname']) || empty($_POST['email']) || empty($_POST['pass']))
{
 die('{status:0,txt:"All the fields are required"}');
}
// is the sex selected?
if(!(int)$_POST['sex-select'])
{
 die('{status:0,txt:"You have to select your sex"}');
}
// is the birthday selected?
if(!(int)$_POST['day'] || !(int)$_POST['month'] || !(int)$_POST['year'])
{
 die('{status:0,txt:"You have to fill in your birthday"}');
}
// is the email valid?
if(!(preg_match("/^[\.A-z0-9_\-\+]+[@][A-z0-9_\-]+([.][A-z0-9_\-]+)+[A-z]{1,4}$/", $_POST['email'])))
 die('{status:0,txt:"You haven\'t provided a valid email"}');
echo '{status:1,txt:"registered.html"}';

Here we check some of the most typical error situations. Every message, that we output, has to be formatted as a javascript object with status and txt properties. They are accessible in our AJAX as msg.txt and msg.status. The main idea here is that errors return a status with a value of 0 and a successful registration returns a status 1, with txt being a URL of a resource accessible only for registered users.

*Note that you’ll have to add code for inserting new database records, creating sessions and a few more error checks on your own, depending on your needs.

And with that our form is finished.

Conclusion

Today we created a fancy looking and functional registration page, inspired by no other than facebook itself. We successfully used jQuery and the $.ajax method to create a real time, asynchronous registration form, complete with error checking and browser redirects.