In this article, I'll explain demonstrate the fundamental steps to creating an Ajax form. In this demo, there are two files, one is index_demo.php and the other is add_url_demo.php

1, Create a form

<form action="javascript:;" name="myform" >Reciprocal URL: <br>
<input type="text" name="my_url" size="50"><br>
Your name: <br>
<input type="text" name="your_name" size="50"><br>
Your Email: <br>
<input type="text" name="your_email" size="50"><br>
Your URL:
<br>
<input type="text" name="your_url" size="50"><br>
Your web site description (At most 3 lines or 300 characters):
<br>
<textarea name="site_desc" cols="60"></textarea><br>

<input type="button" name="button" value="Submit" onclick="javascript:get(this.parentNode);">

</form>

2, Add JavaScript code

<script type="text/javascript" language="javascript">
var http_request = false;
function makeRequest(url, parameters)
{
http_request = false;
if (window.XMLHttpRequest)
{ // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType)
{
http_request.overrideMimeType('text/xml');
}
}
else if (window.ActiveXObject)
{ // IE
try
{
http_request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
}
}
}
if (!http_request)
{
alert('Cannot create XMLHTTP instance');
return false;
}
http_request.onreadystatechange = alertContents;
http_request.open('GET', url + parameters, true);
http_request.send(null);
}

function alertContents()
{
if (http_request.readyState == 4)
{
if (http_request.status == 200)
{
//alert(http_request.responseText);
result = http_request.responseText;
document.getElementById('myspan').innerHTML = result;
}
else
{
alert('There was a problem with the request.');
}
}
}

function get(obj)
{
var getstr = "?";
for (i=0; i<obj.childNodes.length; i++)
{
if (obj.childNodes[i].tagName == "INPUT")
{
if (obj.childNodes[i].type == "text")
{
getstr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&";
}
}
if (obj.childNodes[i].tagName == "TEXTAREA")
{

getstr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&";

}

}


makeRequest('add_url_demo.php', getstr);
}
</script>

3, Server side PHP code

<?php
include '../includes/db_connect.php';

$your_url = $_GET["your_url"] ;
$site_desc = $_GET["site_desc"] ;
$my_url = $_GET["my_url"] ;
$your_name = $_GET["your_name"] ;
$your_email = $_GET["your_email"] ;

print ("<p align=center><h3>Thank you for your submission. It will be reviewed as soon as possible.</h3></p>");
print ("<p align=center>Reciprocal URL: $my_url</p>");
print ("<p align=center>Your name: $your_name</p>");
print ("<p align=center>Your Email: $your_email</p>");
print ("<p align=center>Your URL: $your_url</p>");
print ("<p align=center>Your web site description: $site_desc </p>");

$user_active = 0;

if (( $your_url == '' ) || ( $my_url == '') || ( $your_name == '')|| ( $your_email == '') )
{
header("Location: http://www.myhouseinfo.com/link_to_us/");
}

if (( $your_url <> '' ) && ( $my_url <> '') )
{
$sql = "replace into link_exchange (my_url, your_name , your_email , your_url , site_desc , active , approve , session_id )
values ('$my_url', '$your_name', '$your_email', '$your_url','$site_desc', 'No' , 'No' , '$user_session' ) ";

$result = mysql_query($sql) or die("Add URL Query Failed." . mysql_error() . " ". $sql);
}
?>