Nawaka: Sending An Enquiry Form Using Ajax Technology With Php

Before we begin let me introduce you to Ajax.AJAX is about updating parts of a web page, without reloading the whole page.

What is AJAX?

AJAX = Asynchronous JavaScript and XML.
AJAX is a technique for creating fast and dynamic web pages.
AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.
Classic web pages, (which do not use AJAX) must reload the entire page if the content should change.
Examples of applications using AJAX: Google Maps, Gmail, Youtube, and Facebook tabs.

How Ajax Works

AJAX

Now we will create a very basic enquiry form using a combination of AJAX, PHP and the Javascript library jQuery. I use jQuery to deal with the AJAX functionality in a simple manner but you could use another Javascript framework or even try to deal with this manually.

Step 1
Create a new file called ‘enquiry_form.html’ and place the below code into it:

<html>
<head>
<title>My Enquiry Form</title>
<script src="jquery.js" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
function send_enquiry() {
$.post("process_enquiry.php", $("#frmEnquiry").serialize(),
function(returnData){
if (returnData=="success") {
$("#enquiry-form").html("Thank you. Your enquiry has been sent successfully");
}else{
alert("An error occured whilst trying to send your enquiry. Please try again shortly\n\n"+returnData);
}
}
);
}
</script>
</head>
<body>
<div id="enquiry-form">
<form id="frmEnquiry">
<table>
<tr>
<td>Name</td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td>Enquiry</td>
<td><textarea name="enquiry"></textarea></td>
</tr>
<tr>
<td> </td>
<td><input type="button" name="send" value="Send Enquiry" onclick="send_enquiry()" /></td>
</tr>
</table>
</form>
</div>
</body>
</html>

<html>
<head>
    <title>My Enquiry Form</title>
    <script src="jquery.js" language="javascript" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        function send_enquiry() {
            $.post("process_enquiry.php", $("#frmEnquiry").serialize(),
                function(returnData){
                    if (returnData=="success") {
                        $("#enquiry-form").html("Thank you. Your enquiry has been sent successfully");
                    }else{
                        alert("An error occured whilst trying to send your enquiry. Please try again shortly\n\n"+returnData);
                    }
                }
            );
        }
    </script>
</head>

<body>

<div id="enquiry-form">
    <form id="frmEnquiry">
        <table>
            <tr>
                <td>Name</td>
                <td><input type="text" name="name" /></td>
            </tr>
            <tr>
                <td>Enquiry</td>
                <td><textarea name="enquiry"></textarea></td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td><input type="button" name="send" value="Send Enquiry" onclick="send_enquiry()" /></td>
            </tr>
        </table>
    </form>
</div>

</body>
</html>

At the top of the code we are including the jQuery library and the Javascript that will send the users input to a separate file, process_enquiry.php, that we will create in Step 2. In this Javascript we also deal with the outcome of sending the email; If successful remove the enquiry form and display a success message or alternatively, output an error message if for some reason the email could not be sent.
The code above also generates a simple form containing two fields, ‘Name’ and ‘Enquiry’ and should look like the below image:

Simple AJAX/PHP Enquiry Form Step 1

Step 2
Now that we have our form we need a PHP script to actually send the email that contains the user’s details. To do so, create another new file called ‘process_enquiry.php’ and copy the below code into it:

<?php
$to = "your@address.com";
$subject = "Enquiry Received";
$body = "A new enquiry has been received:\n\n";
$body .= "Name:\n".$_POST['name']."\n\n";
$body .= "Enquiry:\n".$_POST['enquiry'];
mail($to, $subject, $body);
echo 'success';
?>
Simply change the email address on line 3 to your own address, upload the three files to a webserver (enquiry_form.html, process_enquiry.php and jquery.js) and you’ve just finished creating a very simple AJAX enquiry form. Go on, give it a go. With any luck once you click ‘Send Enquiry’, the form should disappear and present you with a message and an email should drop into your inbox containing the information you entered.
Please note, this tutorial has shown how to create an AJAX enquiry form in it’s most simplest format to show the core processes involved. In order to maintain simplicity and focus on the key elements there has been no validation or security efforts put into the code provided. Adding these once you have the code working is highly recommended.Note that you can use the Secure Email PHP script in the previous tutorial on the above Email PHP script.

Nawaka

Friday, 6 January 2012

Sending An Enquiry Form Using Ajax Technology With Php

What is AJAX?

1 comment:

About Me

Blog Archive