Ajax Form

Note: The is a rewrite from an earlier post (originally published Mar 8 , 2006). The original post has been replaced with this one.

Ever since the phrase “Web 2.0″ and AJAX (Asynchronous JavaScript and XML), Webmaster have looked for ways to make websites more dynamic. AjaxTutorial.net was created back in 2006 to help provide some useful information making websites a little more dynamic.

AJAX was originally coined to describe transmitting XML data using JavaScript. However, the same term has also been used when describing transmitting non-xml data with JavaScript. In fact, most times the data send and received using JavaScript will be HTML or JSON (i.e. not XML). In this post we will NOT be using XML either.

One of the most common active feature a website is the contact form. I’m going to show you how to create a contact form using AJAX (without XML).

The complete AJAX contact form example will consist of four files. Below’s a brief description of these files.

• ajaxform.htm – The main HTML form code
• ajaxform.js – The main JavaScript file which will send the form data to the PHP script (ajaxform.php) for processing
• ajaxform.php – The PHP file which will take the submitted form data, email it and return a thank you message to the form.
• ajaxsettings.php – This is the file to configure the form

Here is a screen capture of how the form will appear (this is an image, not a function form!).

File: ajaxform.htm

<style>
#ajax_form {width:410px;font-family:verdana,arial;font-size:12px}
#ajax_form td{font-family:verdana,arial;font-size:12px}
#ajax_form_header {font-family:verdana,arial;font-size:1.3em;font-weight:bold;text-align:center}
#returned_value{font-family:verdana,arial;text-align:center;font-size:12px;color:#000000}
#go {border:1px solid #CCCCCC;background:#FFF}
</style>
<script type="text/javascript" src="ajaxform.js"></script>

<div id="ajax_form">
<form>
<div id="ajax_form_header">Contact Us Form</div>
<br />
<table width="350" border="0" align="center" cellpadding="4" cellspacing="0">
  <tr> 
    <td><label>Your Name:</label></td>
    <td><input type="text" id="name" style="width:100%" /></td>
  </tr>
  <tr> 
    <td><label>Your Email:</label></td>
    <td><input type="text" id="email" style="width:100%" /></td>
  </tr>
  <tr> 
    <td><label>Your Subject:</label></td>
    <td><input type="text" id="subject" style="width:100%" /></td>
  </tr>
  <tr> 
    <td colspan="2">
    	<label>Your Message:</label><br /><br />
    	<textarea name="body" style="width:100%;height:160px" id="body"></textarea>
    </td>
  </tr>
  <tr align="center"> 
    <td colspan="2"><input type="button" value="Submit" id="submit" onClick="return check_values();"></td>
  </tr>
</table>
</form>
  <br />
</div>

File: ajaxform.js

var http = createRequestObject();
var areal = Math.random() + "";
var real = areal.substring(2, 6);

function createRequestObject() {
  var xmlhttp;
  try {
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
    try {
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (f) {
      xmlhttp = null;
    }
  }
  if (!xmlhttp && typeof XMLHttpRequest != "undefined") {
    xmlhttp = new XMLHttpRequest();
  }
  return xmlhttp;
}

function sendRequest() {
  var rnd = Math.random();
  var name = escape(document.getElementById("name").value);
  var email = escape(document.getElementById("email").value);
  var subject = escape(document.getElementById("subject").value);
  var body = escape(document.getElementById("body").value);

  try {
    http.open('POST', '/ajaxform/pform.php');
    http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    http.onreadystatechange = handleResponse;
    http.send('name=' + name + '&email=' + email + '&subject=' + subject + '&body=' + body + '&rnd=' + rnd);
  } catch (e) {} finally {}
}

function check_values() {
  var valid = '';

  var name = document.getElementById("name").value;
  var email = document.getElementById("email").value;
  var subject = document.getElementById("subject").value;
  var body = document.getElementById("body").value;
  if (trim(name) == "" || trim(email) == "" || trim(subject) == "" || trim(body) == "") {
    alert("Please complete all fields");
  } else {
    if (isEmail(email)) {
      document.getElementById("submit").disabled = true;
      document.getElementById("submit").value = 'Please Wait..';
      sendRequest();
    } else {
      alert("Email appears to be invalid\nPlease check and try again");
      document.getElementById("email").focus();
      document.getElementById("email").select();
    }
  }
}

function handleResponse() {
  try {
    if ((http.readyState == 4) && (http.status == 200)) {
      var response = http.responseText;
      document.getElementById("confirmation").innerHTML = response;
      document.getElementById("confirmation").style.display = "";
      document.getElementById("form_contents").style.display = "none";
    }
  } catch (e) {} finally {}
}

function isUndefined(a) {
  return typeof a == 'undefined';
}

function trim(a) {
  return a.replace(/^s*(S*(s+S+)*)s*$/, "$1");
}

function isEmail(a) {
  return (a.indexOf(".") > 0) && (a.indexOf("@") > 0);
}

File: ajaxform.php

<?php
error_reporting(0);
  
include 'cform_config.php';

if(!isset($rnd) || !isset($name) || !isset($email) || !isset($subject) || !isset($body)) {
	echo $error_message;
    die();
}

$email_from = $email;
$email_subject = "Ajax Contact Form: ".stripslashes($subject);
$email_message = "Please find below a message submitted by '".stripslashes($name);
$email_message .="' on ".date("d/m/Y")." at ".date("H:i")."\n\n";
$email_message .= stripslashes($body);
$headers = 'From: '.$email_from."\r\n" .
'Reply-To: '.$email_from."\r\n" .
'X-Mailer: PHP/' . phpversion();

mail($email_it_to, $email_subject, $email_message, $headers);

echo $confirmation;
die();
?>

File: ajaxsettings.php

<?php
 error_reporting(0);
  
// configuration
$page_title = "Ajax Contact Form";
$email_it_to = "you@domain.com";
$error_message = "Please complete the form first";
$confirmation = "
<br /><br />
Thank you, your message has been successfully sent.
<br /><br />";
?>

After you’ve had a chance to look through the above code, you should notice how things hang together.
Here’s a brief description of how it works.

[will update this soon]