mail form

source: http://www.thegoldenmean.com

Page Four: The ActionScript

Let’s review what we need ActionScript to do. It’s pretty basic and boils down to:

Perform a simple check to make sure no fields have been left empty
Send data contained in the input text fields to the PHP script in a way the script will understand
Recall that the PHP script’s primary purposes are to validate a submitted email address, attempth to send the email if the validation passes, and report back what has happened. Accordingly the ActionScript needs to
Receive the script’s response, deal with it accordingly and inform the user

We will use two LoadVars objects and the LoadVars.sendAndReceive method to accomplish items 2 and 3.

Building Blocks

Let’s look at the ActionScript in logical blocks. Remember the “logic” layer spans three frames. We begin by creating two crucial LoadVars objects which will be the vehicles for sending and receiving data:

//create the LoadVars objects which will be used later
//one to send data...
dataSender = new LoadVars();
//and one to catch what comes back
dataReceiver = new LoadVars();

Submit Button Code

The most complex element in the whole movie is the submit button. We’ll take it a chunk at a time. Begin by giving the movie clip a button-like behavior with an onRelease function:

/*DEFINE SUBMIT BUTTON BEHAVIOR*/
submit_mc.onRelease = function() {

The submit button can be clicked at any time. However, we don’t want to attempt to send an email if the form is incomplete. The first thing the onRelease function does is check to see if all fields contain some kind of content. It won’t advance the playhead past frame one until that condition is met, and it writes a testy little note to the alert text field if you attempt to send an incomplete form. Assuming there is content in all fields, it moves to frame two.

	//final check to make sure fields are completed
if (name_txt.text != '' &&
   email_txt.text != '' &&
   subject_txt.text != '' &&
      message_txt.text != '') {
   alert_txt.text='';//clear any previous error messages or warnings
   //advance playhead to frame 2 - the "processing" message
   _root.play();

Now to put those LoadVars objects to use. First we assign properties to “dataSender” (name, email, subject and message), and attach values to those properties from the contents of the input fields:

	//assign properties to LoadVars object created previously
   dataSender.name = name_txt.text;
   dataSender.email = email_txt.text;
   dataSender.subject = subject_txt.text;
   dataSender.message = message_txt.text;

Now it’s time to tell Flash what to do with the response. You need to declare the onLoad callback before actually performing the load; otherwise the data might come back before Flash figures out what to do with it.

	//callback function - how to handle what comes back
dataReceiver.onLoad = function() {
   if (this.response == "invalid") {
      _root.gotoAndStop(1);
      alert_txt.text = "Please check email address - does not appear valid."
   } else if (this.response == "error") {
      _root.gotoAndStop(3);
   } else if (this.response == "passed") {
      _root.gotoAndStop(4);
   }
}

Just about there. We have given the sender something to send and told the receiver what to do with what comes back. The LoadVars “sendAndLoad” method makes giving and getting all part of the same transaction! The method requires three arguments: what script to communicate with, what object gets the response and how the data is sent (GET or POST).

	//now send data to script
   dataSender.sendAndLoad("processEmail.php", dataReceiver, "POST");

Note that the example above assumes that the Flash .swf file is in the same directory on the server as the processEmail.php script is. If you elect to put your PHP script in a directory other than the one the .swf is in you need to modify the path to the script so Flash can find it. For instance, on my own sites I try to keep all scripts (including css and JavaScript) together in a directory named “scripts” so I can locate them easily if need be. In my case then, the code provided in the previous example would fail to find the script. I would have to modify the path Flash uses to locate the PHP file.

Prevent caching:
This reader-provided tip might save you some headache. A thoughtful reader named Phil pointed out that if a user of your form submits a malformed e-mail address and then goes back to correct it, the "bad" version may remain cached and thus even the corrected version will return "invalid" by the script.

Phil's solution was to append what is sometimes called a "cache-buster" to the URL of the PHP script. Let's assume you have followed along and have a PHP script named "processEmail.php". Phil recommends creating a new variable named targetPHP, and giving it a value as follows:
targetPHP = "processEmail.php?now="+getTimer();

What this does is to tack a new date on to the end of the URL as a query string. The date will effectively be a unique number because it extends out to milliseconds. This forces the server to reload the data instead of using cached data. The code block above would now be modified as follows:

var targetPHP = "processEmail.php?now="+getTimer();
	//now send data to script
	dataSender.sendAndLoad(targetPHP, dataReceiver, "POST");

Thanks Phil!

All that remains now is the “else” part of the if statement that began all this — what to do if the four fields aren’t completed.

	} else {
   //warning if user tries to submit before completing form
   alert_txt.text = "Please complete all fields before submitting form.";
   }
}

Stops

Thanks to the “stop();” statements we added to the “stops” layer, the movie starts out paused on frame one. Assuming the script advances to frame two it is similarly paused there depending on the outcome of running the PHP script.

That’s it!

You can quit here if you like, because this is all it takes to make the movie functional. If you would like to make it a little more interactive, please continue to Page Five for some fun user interface refinements (plus some tips on debugging problems), and Page Six which concludes the tutorial with a discussion of how to expand your form, enabling it to send additional text input items.

--top--