Escape Beauty Salon
Yvonne Maher Make up artist
Leonie's Fashion Boutique
Fitness Freak
Tom Geraghty Tyres
Ti Adora Bridal Shop

and more will be added shortly, and you can also view the recent work section for more.

In this contact form there will be three fields: Name, Email and the message. The values from the fields will be sent to a PHP script and tested. The results will be sent back dynamically to the user. So let's get started.

First, create a html page and we will add a html form containing the 3 fields and the a submit button.

The code for the form is as follows:

 
<form action="scripts/contactsend.php" method="post">
    <label for="name">Name</label>
<input id="name" name="name" type="text" />
    <label for="email">Email</label>
<input id="email" name="email" type="text" />
    <label for="info">Comment</label>
        <textarea id="info" cols="30" rows="10" name="info">
      </textarea>
<div id="contact-loader">
<input onclick="sendContact();" type="button" value="submit" />
</div>
</form>
 

The result will be a simple form that looks like this:

The next step is to write the JavaScript, to keep it tidy it is better to create a new .js file and just add a link to it in the head of the html file.

The first function is the one called from our form in the html page, this simply sets a timeout of 1 second and shows an image to let the user know something is happening. You can generate an animated loader gif at ajaxload.info. It also calls the main JavaScript function called 'ajaxContact' :

function sendContact(){
  window.setTimeout("ajaxContact()", 1000);
  document.getElementById("contact-loader").innerHTML =
   '<img src="images/ajax-loader.gif" alt="loading" />
   checking details... ';
}
 

The next function does all the work.

Here is the code that will need and after I will explain it line by line:

function ajaxContact()
{	
 
   try
   {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
   }
   catch (e)
  {
   // Internet Explorer
  try
  {
     xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
  catch (e)
   {
    try
    {
     	xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch (e)
    {
       alert("Your browser does not support AJAX!");
      	return false;
    }
  }
 }
 
 var email = document.getElementById('email').value;
 var name = document.getElementById('name').value;
 var info = document.getElementById('info').value;
 
 xmlHttp.onreadystatechange=function()
 {
 
   if(xmlHttp.readyState==4)
    {
 
    document.getElementById("contact-info").innerHTML =
        xmlHttp.responseText;
 
   }
 }
xmlHttp.open("GET","sendcontact.php?email="+email+
"&name="+name+"&info="+info,true);
  	xmlHttp.send(null);
}
 

Because Internet Explorer handles a request differently to modern browsers like Safari or Firefox we need to check which browser is being used.

The next step is simply getting the information from the html form. We get the values for each field and assign them to variables.

Next is checking the ready state of the page. There are 5 states that the page will be in as the page is requested.

• » 0: Request is initialised
• » 1: Request set up
• » 2: Request sent
• » 3: Request in Process
• » 4: Complete

Once we have reached ready state 4 we are ready to get our data.

Finally we send our data to our php script called sendcontact.php and return the result to our page.

Below is the PHP that we will need to receive and send our data

 
< ?php
   $to = "you@yoursite.com";
   $subject = "Contact from website";
   $email = $_GET['email'] ;
   $info = $_GET['info'] ;
   $name = $_GET['name'] ;
 
    $messages = 'Contact:';
    $messages .= '<strong>Name:  '.$name;
    $messages .= '<strong>Question:</strong>  '.$info;
 
   //headers for the message
   $headers .= "Content-Type: text/html; charset=iso-8859-1\r\n";
   $headers .= "Content-Transfer-Encoding: 8bit\r\n";
   $headers .= "".$messages."\n";
   $headers .= "--".$num."\n";
 
   $sent = mail($to, $subject, $messages, $headers) ;
 
   if($sent)
   {print "Thank You"; }
   else
   {print "We encountered an error sending your mail"; }
 
?>
 

And that's that, you now have a fully functional AJAX Contact form. If you have any questions or remarks, please leave a comment below.

The Problem:

When you register for a google maps api key it can be only used with one URL. I have came across the problem with a number of sites that I have developed that the client wants 2 or more URLs and google maps integration. There is a very simple way to get around this with just a small piece of Javascript.

Solution:

Firstly, register your URLs and get the API key for each and follow the steps provided on the introduction to get a map up and running.

Once you have it working for one URL then all is needed for the others to work is a simple piece of JavaScript code.


<script type="text/javascript">


function checkURL(){
if(document.URL == 'http://www.yoursite.com/yourpage'){
locationKey = "key_for_one_url";
}
else{
locationKey = "key_for_other_URL";
}
var part1 = '<script src="http://maps.google.com/maps?file=api&v=2&key=';

var part2 = '" type="text/javascript">'+ '';

document.write(part1+locationKey+part2);
}
checkURL();

So Basically, all you have is a function that checks what URL is accessing the site and then switching the keys, we will look at it line by line.

Firstly, document.URL checks the URL of the accessed document, this returns the full URL.

Next, we declare the variables we will be using, I found it easier to break up the text. 'part1' is everything up to the declaring the key. After that we add the 'locationKey', the API key that needs to be used and the the final part of text, 'part2'.

The final step is to write the result to the document using document.write() and then call the function.

Hope this helps, leave a comment and let me know how you get on or if you have any more tips I would love to hear them.

Hi There, it has been a long time coming but eventually lemon and lime design is online. If you want to find out a bit about the company view the about page. You can also check out some of our recent work or contact us.

In this blog I will mainly be discussing the trials and tribulations of being a freelance web developer living in Ireland. I will also be giving some tips and tricks to help others who are following in the same line of business.

This is my first experience with WordPress and I am still putting the finishing touches on this site. If you see anything that needs to be changed please leave a comment below. I would also love to hear your thoughts on the site, so why not leave a comment?