World Of Mine

I am that geek who is working in the programming field, in love with poetry, always appreciate good lyrics and addicted to loud music.

[PHP + MySQL + Javascript]: Dynamic AJAX Form

A simple tutorial on how to create a dynamic AJAX form. As usual, for this tutorial, I’ll be using jQuery, a javascript framework. Other components will be used here are PHP and MySQL, not to forget a little of CSS.

Before we start with the programming part, lets create a table with the following SQL:

CREATE TABLE IF NOT EXISTS `new_users` (
`users` varchar(60) NOT NULL
);

We begin by creating the most important section, the processing file. (File name: process.php):

<?php
/**
* Created on 14 Apr 2008, 23:36:01
* @author Mohd Rashidi Bin Mohd Zin
*/
$level = $_GET[‘level’];
$name = $_GET[‘name’];
<span id="more-62"></span>
if ($level == "admin")
{
$admin_password = $_GET[‘admin_pwd’];
if($admin_password == "helloWorld")
{
$register = registerNewUser($name);
}
else
{
echo 2;
}
}
else if ($level == "user")
{
$register = registerNewUser($name);
}
echo $register;
function registerNewUser($user)
{
$link = mysql_connect("localhost","root","") or die(mysql_error());
mysql_select_db("test",$link) or die(mysql_error());
$sql = "INSERT INTO new_users VALUES(‘".$user."’)";
$query = mysql_query($sql) or die(mysql_error());
if ($query)
{
return 1;
}
else
{
return 0;
}
mysql_close($link);
}
?>

Next is to create the Javascript file, which handles and process the form on the front end. (File name: dynaForm.js):

$(document).ready(function() {
$("#admin_pwd_span").hide();
$("input[@name='level']").click(function() {
if ($("input[@name='level']:checked").val() == ‘admin’) {
$("#admin_pwd_span").show(’slow’);
}
else {
$("#admin_pwd_span").hide(’slow’);
}
});
$("input[@name='submit']").click(function(result) {
var level = $("input[@name='level']:checked").val();
var input = ”;
var name = $("input[@name='name']").val();
if (level == ‘admin’)
{
var password = $("input[@name='admin_pwd']").val();
if (password == ”)
{
$("#warning").html(‘Error: Admin password is required’);
return false;
}
else
{
input = "&admin_pwd="+password;
}
}
if (name == ”)
{
$("#warning").html(‘Error: Name is required!’);
return false;
}
$.get("process.php?level="+level+"&name="+name+input, function(result) {
if (result == 2)
{
$("#warning").html(‘Registration failed. Invalid Admin password’);
}
else if (result == 1)
{
$("#warning").html(‘Registration completed.’);
}
else if (result == 0)
{
$("#warning").html(‘Registration failed. System failure’);
}
});
return false;
});
});

As you can see, in this script. At the beginning, the password box is hidden. It will only be display when the user choose to add new user as administrator.

It’s always fun to add a little of design to our page. This is where CSS comes into action. (File name: dynaForm.css):

body {
font-family: Arial, sans-serif;
font-size: 12px;
}
.label {
padding-right: 25px;
}
#warning {
padding-left:30px;
color:red;
}

Finally is the HTML page:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Dynamic Form Demo</title>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript" src="dynaForm.js"></script>
<link rel="stylesheet" href="dynaForm.css" type="text/css" media="screen" />
</head>
<body>
<div>
<form>
<div id="warning"></div>
<br>
<span class="label">Name:</span><input type="text" name="name" id="name">
<br>
<span class="label">Levels:</span>
Admin<input type="radio" name="level" id="level" value="admin">
User<input type="radio" name="level" id="level" value="user">
<br>
<span id="admin_pwd_span">
Password: <input type="password" name="admin_pwd" id="admin_pwd">
</span>
<br>
<input type="submit" value="Submit" name="submit" id="submit">
</form>
</div>
</body>
</html>

Notice that for this tutorial, the admin password is helloWorld. Please change it to any words or phrases you desires. Also, remember to change related entities such as database name, username, password, and database host.

That’s all for this tutorial. Pretty quick, I guess. Happy coding