Many people always create login page using the classic method where we submit a form and send the post value, etc etc. However, we keep having problem with header location to redirect the page. The script below uses prototype.js , so remember to include your file.

<script src=”js/prototype.js”></script>

Here is the script on how to create a login box and submit it using ajax.

First, let’s have the form

   <form name=”login” id=”login”>
     <table>
        <tr><td colspan=”4″><div id=”result”></div></td></tr>
        <tr><td>EMAIL ADDRESS :</td><td><input type=”text” name=”email”></td></tr>
        <tr><td>PASSWORD: </td><td><input type=”password”  name=”password”></td></tr>
         <tr><td colspan=”2″><img src=”images/submit.gif” onclick=”submitform();”>Login</td></tr>
    </table>
   </form> 

This is our login box. Not that there is a div results. This div is to display the result after login, whether there is any login or user has already login.

After that, this is our javascript :

<script>
function submitform( ) {
  new Ajax.Updater( ‘result’, ‘loginform.php’, { method: ‘post’,
    parameters: $(’login’).serialize() } );
  $(’login’).reset();
}
</script>

The ‘result’ refers to which div to display the result. We will have a form named loginform.php which I will show you later. $(’login’) refers to our form id, which we will submit.

In our loginform.php , we will have :

<?php
if(!isset($_POST['email']) || $_POST['email']==” || !isset($_POST['password']) || $_POST['password']==”) {
echo “Please enter your email and password”;
} else {
//check from database
$email=$_POST['email'];
$password=md5($_POST['password']);
$result=mysql_query(”SELECT * FROM user WHERE user_email=’$email’ and user_password=’$password’”) or die(mysql_error());
$row=mysql_fetch_array($result);
  if($row) {
  echo “Welcome “.$email;
   session_register(’username’);
   $_SESSION['username'] = $email;
   echo “<meta http-equiv=\”refresh\” content=\”0;url=index.php\” />”;
  } else {
  echo “The email and password you entered does not match”;
  }
}
?>               

There you go. It’s done.

 

Before we can start to do ajax in drupal, we need to know how  we can include external javascript files in drupal. Below is the guideline to add in.

To import an external JavaScript file , put in this line :
drupal_add_js($path_to_file);  OR

drupal_add_js(drupal_get_path(’module’, ‘my_module_name’).’/js/my_javascript.js’)); 
 OR

drupal_add_js(
   drupal_get_path(’module’, ‘drupal_sample’).’/js/javascript.js’)
 );