//, PHP/AJAX and PHP Form Processing

AJAX and PHP Form Processing

AJAX and PHP Form Processing

Alright, so I’ve done a little work and decided to go through this step by step, because in all actuality everything helps when you’re trying to learn a new programming language. For this project, I needed a form to send an email to the client once it’s been validated and checked to be ok. Sounds simple enough in PHP in fact I had it working in about 15 minutes. The only problem was, it was boring. And the user had to wait for it to be submitted then after they were sent to another page rather than the home page, and I didn’t like that. So I decided to spice things up a bit with a little AJAX and a few effects from Scriptaculous. So let’s dive into exactly how I did it.

Let me first say, I’m not going to explain what AJAX is, frankly because everyone by now should know… and if you don’t take a look here. Also I’ve taken the AJAX code and modified it from This tutorial. I thank him for that (even though he doesn’t know me). You might ask why I’m doing this then if it’s already been done. I say, I’m doing it because you can’t get enough examples of things working and how they work… it’s the best way to understand and learn a few new things. So lets cut the credits and dive in.

Alright, first we need a form.

<form method="post" name="contact" id="contact_form" action="sendmail.php">
<input type="hidden" name="post" value=" Send " />
<label for="author">Name:</label><br />
<input type="text" id="author" name="author" class="required" /><br />
<label for="email">Email Address:</label><br />
<input type="text" id="email" name="email" class="validate-email required" /><br />
<label for="url">URL:</label><br />
<input type="text" name="url" id="url" /><br />
<label for="text">Comments:</label><br />
<textarea id="text" name="text" rows="6" cols="25" class="required"></textarea>
<br />
<input style="font-weight: bold;" type="submit" name="submitbutton" id="submitbutton" value=" Send " /><br />
<img id="progress" style="display:none;" align="middle" src="/blog/images/progressbar.gif" border="0" alt="Loading…" />
</form>

Alright, looks like a pretty standard form.. but there are a few things that need to be looked at. My validation script is that of wForms. In order to validate to make sure the user has inputted the correct fields, you simply add the class="required" tag to the object. Like so:

<input type="text" id="author" name="author" class="required" /><br />

For email it’s just:

<input type="text" id="email" name="email" class="validate-email required" /><br />

Another thing to note is this line:

<input type="hidden" name="post" value=" Send " />

This is because of some funky thing the wforms script does, it basically needs to be there.. Look at Mr. Buchs’ article for more explanation. Also note the img id="progress". This will be used later to show the user that the script is working. Now you’ll also notice, there’s no real call to any javascript anywhere in the form. You are half correct. The wform validation takes place because of the classes we’ve assigned certain input objects. This in turn makes a call to the validation functions within the wforms.js script. So now, adding some AJAX is as simple as splicing into the validation routine done by wforms. More on this below.

Alright so we have our form. Great, good, awesome.. but it doesn’t do anything. Well notice that the action is set to "sendmail.php". But I thought we were going to use AJAX you said? You’re right, so let’s get into that.

Our sendmail.php is pretty simple. It takes stuff from the form in $_POST[‘inputID’]; and spits it through the mail() function. Take a look at the text here:

Sendmail.php

Nothing special so far.. All pretty self explanatory. Now lets look at the AJAX stuff. Remember that we said, we were going to splice into the wforms validation. Well that’s done by creating our own js file and adding these lines to it:

wf.functionName_formValidation = "myCustomValidation";
function myCustomValidation (evt) {
if(wf.formValidation(evt)) new Ajax.Updater(‘result’, ‘sendmail.php’,{onLoading:function(request){sendmail()},
onComplete:function(request){handelrequest()},
parameters:Form.serialize(document.forms[‘contact’]),
insertion:Insertion.Bottom, asynchronous:true});
return wf.utilities.XBrowserPreventEventDefault(evt);
}

So let’s break what those 4 lines of code actually do. The first line is creating our own validation routine. This tells the wforms that we’ve also go something else in mind during validation. The next few lines say "If you’re going to validate, do this stuff as well". Well this "stuff" is our glorious AJAX. This is the part I ganked from Mr. Buchs. Give him the credit for finding the syntax for the new Ajax.Updater. This function is provided by the Prototype libray. The unfortunate thing about all of this is the prototype library has absolutely no documentation. So let’s look at this line more closely.

new Ajax.Updater(‘result’, ‘sendmail.php’,{onLoading:function(request){sendmail()},
onComplete:function(request){handelrequest()},
parameters:Form.serialize(document.forms[‘contact’]),
insertion:Insertion.Bottom, asynchronous:true})

Alright, so the first parameter is ‘result’. This tells the updater what div id you’re going to put the… result in. Basically if you are returning anything (text, number, and xml) it’s going to be added to this div. The second param. is what page you’re going to run, in this cause its our sendmail.php. The next slew of brackets and parenthesis give us the ability to show the user what’s happening. Now I’m sure there’s more to it, but we only need to let the user know when the script is in the process of running "{onLoading:function(request){sendmail()}" and when its complete "onComplete:function(request){handelrequest()}". I’ll dive more into the two functions they call later. I’m not certain but I’m sure there’s probably more you could do there, i.e. the 4 stages of xmlhttprequest. Moving on we see that we then supply the function with our parameters from our form. These are the values that the user has typed in. The are passed along to our sendmail.php via the POST method. The last to parameters of the function say where to insert the "result" and if it’s to be asynchronous (which we want it to be so that’s "true"). The last line of the "myCustomValidation" function is crucial.

return wf.utilities.XBrowserPreventEventDefault(evt);

It basically says, if your form doesn’t validate… don’t do all this fancy Ajax stuff. Alright now lets take a look at what those onLoading(sendmail()), and onComplete(handelrequest()) functions look like.

function sendmail() {
//Make the Progress Bar Appear
new Effect.Appear(‘progress’);
}
function handelrequest() {
new Effect.Fade(‘progress’);
new Effect.BlindUp(‘form’);
new Effect.Appear(‘result’);
}

Here we add all the "effects". All provided to us by prototype as well as scriptaculous. Pretty simple stuff. The effects are called simply by saying "new Effect.effectname(‘div_id’)". Notice the progress effect. This was for our progress bar that we had mentioned earlier. That and our result are set to "appear". This makes the div ‘s style go from "display:none;" to "display: ;" thus showing the div.

Alright, so we have a plain form, your php script does its job, and the ajax is all ready to go. Now all you need to do is set up your HTML so that your div id’s match those of your ajax script. Also make sure you include these files at the top:

Prototype Library
Scriptaculous
wForms
And dont forget your own .js file: sendemail.js

So thats pretty much it. Here is everything, all scripts and pages included. Hope this helped out a few of you, and furthered your understanding of ajax.

Sendmail.php
sendmail.js

2010-05-25T22:44:50+00:00 January 10th, 2008|AJAX, PHP|0 Comments

About the Author:

 

Leave A Comment