AjaxForm

After a long break in the development process of those Ajax components I promised to release here, I eventually, convinced myself to put the latest but still incomplete version of AjaxForm (the first component I decided to design and develop) here. I hope you enjoy its design and ease of use, that let you ajaxify a form by creating an object and calling some methods of that object from both client side scripts and the script which is coming from the server side result.
e.g.

var ajaxForm = new AjaxForm("frmEditUser", "edituser.act.php", "loader1.gif", "editBoard");
ajaxForm.focusForm();

But don't forget that all of these components which I'm working on are based on Prototype.js framework.

So in all examples I assume that you have the following line in your document's head section.

<script type="text/javascript" src="prototype.js"></script>

You can download the current version of AjaxForm here.

The design is based on the idea that each form has 4 main elements to be working as an web 2.0 form. (it is my idea, you may disagree with that)

1. The form itself - HTML element (tag) of form, so we need to pass the ID of the form element to the AjaxForm object.
   
2. The server side script which the forms's data will be sent to, so we pass the URL of the script to the object.
3. The image that should be displayed as a loading animation while the user is waiting to receive the server result. We need to pass the URL of the image file to the AjaxForm object.
4. The exact portion of the page that the animation image should be displayed, and also the place that other potential messages to the users should be displayed. So we pass the ID of an HTML element to the object.

The 4th factor could be divided to 2 separated factors, one HTML element for the animation image and one for the user messages, but I decided to have one for both, in order to keep the concept simple. I may add the feature in the final version. Anyway, according to these 4 factors, we can create an object of AjaxForm class like the following codes.

Example1

First add the followings to the head section of your page:

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="ajaxform.js"></script>

The HTML form.

<form id="form1">
username:
<input type="text" id="username" name="username" />
<br />
password:
<input type="password" id="password" name="password" />
<br />
<input type="submit" value="send" />
<input type="reset" value="reset" />
</form>

The place-holder for messages and the animation image.

<div id="board"></div>

Main part (instantiating the object)

<script type="text/javascript">
<!--
var ajaxForm = new AjaxForm("form1", "action1.php", "loader1.gif", "board");
ajaxForm.focusForm();
//-->
</script>

Don't forget to locate the following files in the same directory as your page directory:

• prototype.js - you can download it here.
  
• ajaxform.js - download it here.
  
• loader1.gif - any gif animation
• action1.php - a php file that will handle the request data

Now it's time to write the server side code. The server side script could be developed in any technology such as Java servlet, JSP, PHP, PERL, Python, ASP, ASP .NET and ...
In this example I write it using PHP (action1.php).

action1.php

<?php
$username = $_POST['username'];
$password = $_POST['password'];

$login = false;

if (empty($username)) {
$message = "You should enter your username!";
$color = "red";
} else if (empty($password)) {
$message = "You should enter your password!";
$color = "#FF7000";
} else if($username == 'ehsun' && $password == '7') {
$login = true;
$message = "You have logged in successfully.";
$color = "#335599";
} else {
$message = "Your username or password is incorrect!";
$color = "#9F9000";
}

echo "<script>";
echo "ajaxForm.showMessage('$message', '$color');";

if ($login) {
echo "ajaxForm.hideForm();";
} else {
echo "ajaxForm.focusForm();";
}

echo "</script>";

sleep(3);
?>

The sleep command is for simulating the delay! you don't need it in the real codes.

As you may noticed you have access to the AjaxForm object which has been created in the client side from the JavaScript code which is coming from server side script, that is very useful feature!
The AjaxForm has some other methods that I will explain in the next posts. Please give me your suggestions.