Using the LoadVars() Class to Send and Receive Form Data
The LoadVars class is similar to loadVariables and loadVariablesNum, but it gives you more control over dynamic data being sent and received. Here, we’re going to describe how to use LoadVars to send information from a form to a server-side script, and to load a response from the script back into our Flash movie. But we encourage you to explore the other methods available to LoadVars.
You create a LoadVars object to wrap up the information being sent in a way a server-side script can process, and then you create another LoadVars object to wrap up the server’s response in a way Flash can process.
Back to our form. Before we create our LoadVars objects, we should add a means of displaying the server’s response:
- Somewhere at the bottom of the form, add a dynamic text field using the Text tool. Give it an instance name of “status_txt”. If the form is successfully sent and a response received, the “status_txt” text field will display a “success” message; otherwise, it will display a “failure” message. We’re going to write that into the code of our function in the next step.
- We’re going to add a listener to our submit button to listen for the click event and call a function named “sendFeedback”. Add the sendFeedback function now, below where you defined the text of your labels, and above the stop action:
function sendFeedback() {
//Create a LoadVars object instance for sending the data
var formData:LoadVars = new LoadVars();
//Create a LoadVars object instance for receiving the server’s response
var respData:LoadVars = new LoadVars();
//Variable for storing the URL for the server-side script
var siteAddress:String = “http://localhost/Projects/processform.asp”;
//Specifies the actions to execute when the response is received from the server
respData.onLoad = function() {
if (this.resp==”succeeded”) {
status_txt.text = “Success”;
} else {
status_txt.text = “Failed”;
}
};
//initialize formData variables
formData.username = “”;
formData.useremail = “”;
formData.usercomments = “”;
formData.resp = “”;
//Wrap up the data inside the formData variables
formData.username = name_txt.text;
formData.useremail = email_txt.text;
formData.usercomments = comments_txt.text;
formData.resp = “false”;
//Send the data
formData.sendAndLoad(siteAddress, respData, “POST”);
}
The first two lines create our two LoadVars objects, one for sending (called “formData”) and one for receiving the server’s response (called “respData”). The third line simply assigns the URL of the server-side script to a variable, to make the code easier to work with. For testing purposes, we’re using a script in an ASP file on a local machine running IIS.
The next block of code uses the onLoad method of the LoadVars object to test whether or not the data is sent and received back successfully. If it is, our dynamic text field will display the word “Success”; if it isn’t, it will display “Failed”. Notice the condition we’ve used: if(this.resp==”succeeded”). If you scroll down a bit in the code, you’ll see that “resp” is a variable we’ve assigned to our formData object—the LoadVars object sending the data to the ASP file. We’ll tell you more about this in a few minutes.
The next block of code initializes variables we’re assigning to the formData object. You can assign any variables you like here. Each variable is used to store the contents of our form fields and send it to the server-side script. In the last block of code, the values of the form fields (the .text property of our TextInput component instances) are assigned to these variables. Check the appropriate syntax for the components you’re using; for example, if we’d used a ComboBox component, we’d have assigned its value using: formData.someItem = myMenu.getValue or myMenu.selectedItem.
The last variable is, as we mentioned, a variable to store the response sent back by the server. We’ve given it some default text that’s essentially meaningless, but is there to remind us that at this point in the code, nothing has happened, so there’s no response.
The final line actually sends and receives the data using the sendAndLoad method of the LoadVars object. If you were just sending data (without receiving a response back), you could use the send method. The sendAndLoad method has 3 arguments: the URL of the server-side script, which we’ve assigned to our siteAddress variable; the target object, which is our LoadVars object receiving the server’s response (respData), and the method used for sending the form (“GET” or “POST”).
- Finally, we need to add our listener to call the function when the submit button is clicked. Outside the function and before the stop action, add:
submit_btn.addEventListener(“click”, this.sendFeedback);
Again, we’re adding an event listener to listen for the click event of the submit_btn and, when the event happens, to call the sendFeedback function.
- We’re not quite done, unless you have a good foundation in server-side scripting. We’ve used an ASP page as an example here, since ASP is fairly simple to explain and understand. This is the code in our processform.asp page:
<%
Dim resp_username, resp_useremail, resp_usercomments, resp
resp_username = Request.Form(“username”)
resp_useremail = Request.Form(“useremail”)
resp_usercomments = Request.Form(“usercomments”)
response.write “resp=succeeded”
%>
The script resides within the script (<% %>) tags and simply declares some variables which are then used to store the values being sent. Because the POST method was used, the Request.Form statement was used in the ASP file to request form information; if the GET method had been used, the Request.QueryString statement would have been used. Each value being received from the form is stored in a LoadVars variable (assigned to our sending LoadVars object, formData). So this is essentially equivalent to: Request.Form(formData.username). Or, more accurately: resp_username = formData.username.
So in our ASP page, the resp_ variables (resp_username, etc.) are given the values of our LoadVars variables. At this point, your script could do whatever you need it to do with this information—it doesn’t matter to Flash. What matters is the last line, which uses the ASP Response object to send a response back to the movie. Normally, the response.write statement in ASP is used to write text to the page—text that the user sees. In this case, we’re writing information back to Flash instead, beginning with the resp variable we assigned to the formData object. This is just like when we loaded a text file using loadVariables; the text file declared the variable first, then paired it with its value after an equal sign.
If you look back now at the conditional statement that tests whether or not the data was communicated successfully, it should make sense. We’re testing whether or not the respData object received the message “resp=succeeded”. If it did, “succeeded” is assigned to the resp variable and the statement evaluates to true, displaying our “Success” message in the dynamic text field.
- Save the movie. If you encounter problems when you test it, try publishing it and then testing it from the HTML page containing the movie. Place the movie, the HTML page, and the server-side script in the same domain.
All our code for the form appears in the same frame (Frame 3) of the Actions layer. This is the complete version:
name_lbl.text = “Name:”;
email_lbl.text = “E-mail:”;
comments_lbl.text = “Comments:”;
name_lbl.setStyle(“color”, 0xFFFFFF);
name_lbl.setStyle(“fontWeight”,”bold”);
email_lbl.setStyle(“color”, 0xFFFFFF);
email_lbl.setStyle(“fontWeight”,”bold”);
comments_lbl.setStyle(“color”, 0xFFFFFF);
comments_lbl.setStyle(“fontWeight”,”bold”);
function sendFeedback() {
//Create a LoadVars object instance for sending the data
var formData:LoadVars = new LoadVars();
//Create a LoadVars object instance for receiving the server’s response
var respData:LoadVars = new LoadVars();
//Variable for storing the URL for the server-side script
var siteAddress:String = “http://localhost/Projects/processform.asp”;
//Specifies the actions to execute when the response is received from the server
//Note: You could also use a generic function like:
//resp.Data.onLoad = function(success) {
//if (success) {
respData.onLoad = function() {
if (this.resp==”succeeded”) {
status_txt.text = “Success”;
} else {
status_txt.text = “Failed”;
}
};
//initialize formData variables
formData.username = “”;
formData.useremail = “”;
formData.usercomments = “”;
formData.resp = “”;
//Wrap up the data inside the formData variables
formData.username = name_txt.text;
formData.useremail = email_txt.text;
formData.usercomments = comments_txt.text;
formData.resp = “false”;
//Send the data
formData.sendAndLoad(siteAddress, respData, “POST”);
}
submit_btn.addEventListener(“click”, this.sendFeedback);
stop();
Although we didn’t do it here, it’s good practice to create different screens for varying states of communication—a send screen (with the form), a wait screen, where the movie takes the user while the data is being transmitted and received, and which provides for a timeout if it takes too long, and an output screen, where the final status and message are displayed. You can do this fairly easily by adding new keyframes with appropriate text on the screen for each one (and a little code to test for a timeout).
