AJAX contact form

AJAX contact form

Hello again, my friends!
I have decided to come back with a new tutorial, this time a more simple one.
I will show you how to create a contact form using AJAX

First, let's see what AJAX is.
The term, AJAX stands for Asynchronous JavaScript and XML and is a group of interrelated techniques used to create interactive web applications.
A big problem of client side languages like JavaScript is interacting with the server without reloading the whole page. Solutions to this problem came from recent browsers which have implemented ways of sending requests to the server and receive information back without having to reload the page. The process is asynchronous which means that the request is passed and the script doesn't wait for the reply but gets on with something else. When the reply from the server comes back it triggers some further instructions that completes the process.

As I said, AJAX is composed of JavaScript, XML and you also need a server side programming language that processes the request sent by the client side script language. In the following example we will use PHP as server language (note that through asynchronous requests you can access static pages like HTML only pages, but not in this case).

Basically, the whole structure works like this:



So, we said that JavaScript does not wait to the answer from the server but gets on with something else in the meanwhile. After the answer gets back, we trigger further actions. Check the illustration bellow to have an idea.



In order to perform the other actions, we need to verify some HTTP statuses and responses to make sure that we got back the expected response.
1: We must be sure that the server ready state is 4. This means that the request is completed and we can go on. The other HTTP ready states are:
0: The request is uninitialized (before you've called open()).
1: The request is set up, but not sent (before you've called send()).
2: The request was sent and is in process (you can usually get content headers from the response at this point).
3: The request is in process; often some partial data is available from the response, but the server isn't finished with its response.
After checking the ready state, we must check the request status. If we get back a 200 request status it means that everything is ok. Other request statuses can be 404 (page not found), 400 (bad request), 401 (unauthorized) and so on.
In the example provided I chosen to display an alert message with the response received from server, but this is just an example.
The code is:




Let's see now how to create the XML instance that performs the request.



Very good!
This tutorial is about a contact form, so I will use POST as method to send data to the server.
This means, that we will have to build the function that creates the string to be posted and that calls the function which sends the request to the server.

Take a look at the code bellow:



Now, we have all the pieces necessary to build the whole block.
This is the resulting code:



We have learned what asynchronous request means, and how to make a POST request to a server through JavaScript.
Now, let's see the structure of the HTML code of the page.
Inside the HEAD we will insert the JavaScript code that we just saw.
Inside the BODY of the page we will have a DIV that will contain the form.
Take a look at the image bellow:



We will have to give the div an id in order to be able to manipulate the HTML content of the div.
This is the HTML code of the BODY:




At this point, there are two things left to do:
1: When submitting the form, it calls the function that launches the composes the string to be posted.
2: Change the parameter names in the get(); function according to our needs.
3: Implement the code that updates the content of the DIV when the response of the server is received.

The first one of these questions looks like this:




The second one is done like this:




The third one must be inserted inside the alertContents() function. We will replace the alert(http_request.responseText); code with this one:




Now, the HTML page looks like this:




Congratulations! You have created the page that sends the asynchronous request to another page located in the server.

Now, let's see how the PHP page is built.
The php page will be a very simple one, that only checks the presence of the requested form values, validates the inserted data and sends an e-mail to the administrator of the site.

Now, let's remember the name of the posted variables by the JavaScript function and see how the code looks like:



The response from the server will be the HTML code itself returned by the mypage.php
Among the HTML code, there will always be a message (on top of the form) that will inform the user about the previous action.

For example, this is how the content of the div will look like after the user send a message:




This content will be first stored inside the result variable from the alertContents() function. After that, the content of the DIV is updated by the document.getElementById('contactform').innerHTML = result; instruction, and you have sent a message using an asynchronous JavaScript & XML request without having to reload the entire page.

I think this is all, my friends and i hope my tutorial was well explained.
I have created a ZIP file out of the two pages so you can download the end result of this tutorial for your own use. You are free to modify it as you wish, and for further questions just drop a comment.

See you next time!

Download Resource

Download

9 Responses to this Post!

  1. mitle says:

    Great Tutorial!!!

  1. crazyprogrammer1 says:

    ThX very good tut!

  1. mike_e says:

    Thanks for the tutorial. Often though when I hit the "Download" button I get a .zip file that won't open/unzip?

  1. wibbe says:

    Nice tutorial, easy to follow and easly to follow

  1. mrakodol says:

    Great script

  1. Ercole says:

    Nice man very nice.

  1. bubu says:

    I am glad you like it

  1. shalini says:

    thnks this is very useful to me

  1. j_stout24 says:

    Very nice tutorial. ajax owns!

Leave a comment and earn 1 credit

Log In to post a comment.
Sign Up if you are not yet a member