Tutorials
- ASP.NET
- C#
- C++
- Java
- JavaScript
- MySQL
- PHP
- Ruby
- SQL
- VB.NET
Code
How To
News
Forums
Pictures
Videos
Icons
Newsgroups

Building a C# Chat Client and Server

A step by step tutorial teaching you how to create your own chat client and chat server easily in C#, for local networks or the Internet.

in C# Programming Tutorials

Getting Hard Drive Information

A C# tutorial showing you how to make use of WMI to extract information on disk drives, such as model, capacity, sectors and serial number.

in C# Programming Tutorials

UPS Shipping Calculator

This tutorial will teach you how to calculate the shipping cost based on the weight, height, length and depth of the box, the distance and the UPS service type.

in PHP Programming Tutorials

Create Your Own Rich Text Editor

Creating a Rich Text Editor using JavaScript is easier to do than you might think, thanks to the support of modern browsers; this tutorial will walk you through it.

in JavaScript Programming Tutorials

Tutorials

Programming Tutorials

ActionScript (5)
ASP (7)
ASP.NET (28)
Assembly (1)
C (6)
C# (132)
C++ (33)
CSS (6)
General (4)
HTML (6)
Java (28)
JavaScript (38)
MySQL (2)
Objective C (1)
Pascal (1)
PHP (61)
Python (3)
Ruby (18)
Silverlight (1)
SQL (8)
VB.NET (5)
Visual Basic (3)

IT Jobs

From CareerBuilder

Geekpedia » PHP Tutorials » How to create an AJAX contact form

How to create an AJAX contact form

This tutorial shows users how to create an AJAX contact form. The form method in this tutorial is set to POST.

On Wednesday, May 3rd 2006 at 03:30 PM

By Nabeel Akhtar (View Profile)

(Rated 4.1 with 14 votes)

Contextual Ads

More PHP Resources

Before we begin the tutorial, view the AJAX Contact Form in action.

The AJAX Contact Form uses the POST method to transfer the data from the form to the PHP file. From thereon you can store the data in variables using "$_POST". This is also illustrated in the code.

There are two pages that you will need. The first page will show the form to the user when the user first visits the page. We will call this page "Form.php". The other page will process the data from the first page and will return a confirmation message. You can use PHP or any other language to do anything you want. We are going to call the second page "Process.php".

To get started, first create a form:

Ajax Form

There are two <span> sections defined in this page. The first one is highlighted in orange in the above image and the second span is the table that holds the input fields.

The status span will display the status of the form while it is being processed. Once all the information has been processed, the status will read "Ready".

Following is the code for the Form.php file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>AJAX Contact Form NabeelAkhtar.NET</title>
<link rel="stylesheet" type="text/css" href="../../../style.css">

<script type="text/javascript" language="javascript">
var http_request = false;

function show_hint ( p_hint_text, p_span ) {
document.getElementById(p_span).innerHTML = p_hint_text ;
}

function makePOSTRequest(url, parameters, SpanName) {
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 = function() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
//alert(http_request.responseText);
result = http_request.responseText;
document.getElementById(SpanName).innerHTML = result;
document.getElementById('status').innerHTML = 'Ready';
} else {
alert('There was a problem with the request.');
}
}
};
http_request.open('POST', url, true);
http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http_request.setRequestHeader("Content-length", parameters.length);
http_request.setRequestHeader("Connection", "close");
http_request.send(parameters);
}

function Contact(obj,SpanName) {
var curDateTime = new Date(); //For IE
var poststr = "name=" + encodeURI( document.getElementById("name").value ) +
"&email=" + encodeURI( document.getElementById("email").value ) +
"&uniqueID=" + curDateTime +
"&msg=" + encodeURI( document.getElementById("msg").value ) ;
var SpanName = SpanName;
//alert (SpanName);
makePOSTRequest('Process.php', poststr, SpanName);
}

</script>


</head>

<body>
<table width="316" border="0" cellpadding="4" cellspacing="0" class="blueBorder">
<tr>
<td colspan="2" class="title1"><a href="http://www.nabeelakhtar.net">Tutorials @ NabeelAkhtar.NET</a><a href="http://www.nabeelakhtar.net"></a> </td>
</tr>
<tr>
<td width="141" class="title1">AJAX Contact Form </td>
<td width="157" class="orange">Status: <span class="greenBold" id="status">Ready</span> </td>
</tr>
</table>

<span id="ContactFormSpan">
<table width="316" border="0" cellpadding="4" cellspacing="0" class="blueBorder">
<form action="javascript:Contact(document.getElementById('ContactForm'),'ContactFormSpan'); show_hint('Sending Data, Please Wait...', 'status');" method="post" name="ContactForm" id="ContactForm">

<tr>
<td width="141" align="right" class="normal">Name:</td>
<td width="157"><input name="name2" type="text" class="inputBlack" id="name" size="20" maxlength="50" /></td>
</tr>
<tr>
<td align="right" class="normal">Email:</td>
<td><input name="email2" type="text" class="inputBlack" id="email" size="20" maxlength="50" /></td>
</tr>
<tr>
<td align="right" class="normal">Message:</td>
<td><input name="msg2" type="text" class="inputBlack" id="msg" size="20" maxlength="50" /></td>
</tr>
<tr>
<td align="right" class="normal"> </td>
<td><input name="Submit2" type="submit" class="buttonBlue" value="Submit" /></td>
</tr>
<tr>
<td colspan="2" align="left" class="normal">Note: This is a demo form. This form will NOT send out emails. </td>
</tr>

</form>
</table>
</span>
</body>
</html>

Following is the code for the "Process.php" file:

<?php

$name = stripslashes($_POST['name']);
$email = stripslashes($_POST['email']);
$msg = stripslashes($_POST['msg']);

echo "
<table width=\"316\" border=\"0\" cellpadding=\"4\" cellspacing=\"0\" class=\"blueBorder\">
<tr>
<td align=\"left\" class=\"title1\">Your Information has been processed</td>
</tr>
<tr>
<td align=\"left\" class=\"normal\">Name: $name <br> Email: $email <br> Message: $msg</td>
</tr>
<tr>
<td align=\"left\" class=\"normal\">Note: This is a demo form. This form will NOT send out emails. </td>
</tr>
<tr>
<td align=\"left\" class=\"normal\"><a href=Form.php>Try Again</a></td>
</table>";

Rate this tutorial

Current Comments

by necenzurat on Tuesday, May 16th 2006 at 10:33 AM

veary nice, do u know that with ajax u can save veary much of your bandwitch

by Nabeel Akhtar on Tuesday, May 16th 2006 at 10:55 AM

Well it depends what you are doing with AJAX... For example the auto-refresh pages end up using more bandwidth... If pages are refreshed at even a higher rate, the page will just eat up your bandwidth.

by cdcdscscdc on Saturday, July 1st 2006 at 07:38 AM

by Johan on Saturday, August 19th 2006 at 05:47 AM

It is indeed a very nice example, but there is one thing that should also be mentoined.

When you insert text that is none english like the french é, ç, à, è then you get weird results if you save your form output in to a database (when you don't save that as utf-8). Displaying it in on a page (with echo) doesn't reveal this but if you look at your decoded url data (http header) then you'll see that the text was encoded in utf-8. This is absolutely normal because the xmlhttprequest object always sends this encoded data as utf-8.

So when you save characters like é, ç, à you get the following results in your database (column collation is in latin1):

é => Ã©

This is not expected because when you want to search for a field that contains this character you will get no results because the database doesn't see this character as é.

Displaying it on a webpage with you header set to iso-8859-1 is no problem, but your data is saved wrongfully.

To avoid this you should always save data in utf-8, but the bigest problem is that php internally doesn't support utf-8 and then you loose the ability to perform string functions on the requested data. There are librarys and functions out there to perform these string functions on utf8 data but they require extra process time (greater script execution time) and extra coding.

I wanted to write this because it's important to see all the aspects of using ajax with php.

by Johan on Saturday, August 19th 2006 at 08:44 AM

I also posted a topic on this on the phparch website.

You can view the topic by following this url: http://www.phparch.com/discuss/index.php?t=msg&th=4203

by ajaxlines on Saturday, January 27th 2007 at 06:27 PM

At <a href="http://www.ajaxlines.com">Ajaxlines</a> you can find a full list of Ajax tutorials, services and presentations.

by ajaxlines on Saturday, January 27th 2007 at 06:28 PM

At Ajaxlines you can find a full list of Ajax tutorials, services and presentations.

I think you have to visit it now ... http://www.ajaxlines.com

by O_o on Monday, February 12th 2007 at 11:48 PM

No security

by Vivian on Thursday, December 13th 2007 at 10:56 AM

rtrter

by Bober on Friday, February 8th 2008 at 04:42 AM

<a href="http://www.digitalcamerainfo.com/bbs/member.php?u=1860">buy viagra online</a><br><a href="http://www.dealdatabase.com/forum/member.php?u=68538">Buy levitra</a><br><a href="http://www.gamecareerguide.com/forums/member.php?u=2520">buy cialis online</a><br><a href="http://extjs.com/forum/member.php?u=24461">buy cialis</a><br><a href="http://extjs.com/forum/member.php?u=24461?generic+cialis">generic cialis</a><br><a href="http://www.gamecareerguide.com/forums/member.php?u=2478">cheap cialis</a><br><a href="http://forum.springframework.org/member.php?u=34111">generic viagra</a><br><a href="http://www.layersmagazine.com/forum/member.php?u=4276">buy viagra</a><br><a href="http://forum.springframework.org/member.php?u=34111?cheap+viagra">cheap viagra</a><br><a href="http://ringtones.forum5.com">download free ringtones</a><br><a href="http://forum.springframework.org/member.php?u=34397">buy valium</a><br><a href="http://forum.springframework.org/member.php?u=34397?buy+valium+online">buy valium online</a><br><a href="http://forums.ipodhacks.com/member.php?u=35372">buy tramadol</a><br><a href="http://forums.ipodhacks.com/member.php?u=35372?cheap+tramadol">cheap tramadol</a><br><a href="http://forums.ipodhacks.com/member.php?u=35372?buy+tramadol+online">buy tramadol online</a><br><a href="http://www.layersmagazine.com/forum/member.php?u=4313">replica watch</a>

by Yaro on Thursday, July 17th 2008 at 05:57 AM

This shit only works in UTF-8! Fuck!

by Alexander DÃaz on Tuesday, July 22nd 2008 at 12:49 PM

Well, actually I manage to make this works with those special characters, Even I use this for sending a mail it quite works.

look at the form here!! www.dmpardo.com

By the way. If you have any inqueries email me!

by cosmin on Wednesday, July 23rd 2008 at 04:29 AM

Hi, i tried your example and it works, but if i put instead of email input, a select with the same name/id it doesn't work, the $_POST['email2'] or $_POST['email'] are BLANK, why ? :|

by john on Sunday, October 26th 2008 at 07:46 AM

jjjj

by Dave on Thursday, March 26th 2009 at 02:09 AM

Re: tutorial/28.php

Form.php is just HTML and should be called Form.html.

It fails validation by HTMLTidy.

Suggest removing table layout to simplify, it isn't needed for a demo.

But that's all minor - this demo was exactly what I wanted and took some hunting. I like that it's bare, and doesn't advertise any Ajax or PHP framework, just gives raw code.

by on Monday, July 6th 2009 at 07:05 AM

by sanjay on Saturday, December 5th 2009 at 11:34 AM

Hello sir my name is sanjay kumar i am currently operation http://www.moneyinhands.com i don't idea about how i create php form for my website with spam protection. Current i am using php form from emailmeform.com but i need my own php form code. Please tell me or suggest me how i create php form to i use for my all website. I am waiting for kind suggestions...

by sczdcsdc on Monday, February 1st 2010 at 01:45 AM

dfdfdfdfd

by Jake Carner on Friday, June 11th 2010 at 12:27 PM

Seo /Increase leads/traffic/Link Building/ Web site Development

Hi Website Administrator,

Have you ever searched your company’s website with different keywords related to your business? On which page does it appears?

We can place your website on top 10 of the Natural Listings on Google, Yahoo and MSN. Our Search Engine Optimization team delivers more top rankings then anyone else and we can prove it. We do not use "link farms" or "black hat" methods that Google and the other search engines frown upon and can use to de-list or ban your site. The techniques are proprietary, involving some valuable closely held trade secrets. Our prices are less then half of what other companies charge.

We would be happy to send you a proposal using the top search phrases for your area of expertise. Please contact me at your convenience so we can start saving you some money.

Sincerely,
Jake Carner
Marketing Manager
Professional Lists, Inc.
www.seo-links-building.co.in
jake.ibs11@gmail.com

by Vitalizer on Monday, June 14th 2010 at 08:59 AM

Nice manual, thank you. As I know AjaX keeps in touch with php form. You may know more about it with php form.
http://phpforms.net/tutorial/html-basics/php-forms.html

by mohit on Saturday, July 31st 2010 at 01:42 AM

hiiiiiiii

by Yaro on Saturday, July 31st 2010 at 05:34 PM

Well, it was 2 years ago, but I did my AJAX form with UTF-8 great support for cyrilic with this tool: http://en.dklab.ru/lib/JsHttpRequest/