Home Tutorials Forums Articles Blogs Movies Library Employment Press
Old 09-22-2007, 10:02 PM   #1
yell0wdart
jordanrift.com
 
Join Date: Sep 2007
Location: Phoenix, AZ
Posts: 366
Default Contact Form in AS3.0

Hey all,

I've been looking high and low lately for a good way to set up a basic contact form in ActionScript 3.0. I've dug around a good bit here, at FlashKit.com, and at Kirupa.com. I've worked through several tutorials, flipped through AS/Flash development books, checked out the pre-formatted template forms that come with Flash CS3 Pro. Every single one of them uses AS2.0. Hell, even lynda.com's tutorial on form interactivity uses AS2. I can't find a single one that utilizes AS3.0. Does AS3.0 just not handle forms and working with server-side script very well?

I was looking at Senocular's tutorial on kirupa.com, and Cota's here on the actionscript.org site for some examples of how to set things up. Both have been very helpful so far. But they, of course, use AS2.

Before I go and change my current project to AS2.0 and rewrite my navigation code, can anybody point me to an example or two of some AS3 forms? Do they exist?

I appreciate any insight you guys can offer. Just kind of starting out learning AS3... and OOP in general, really.
yell0wdart is offline   Reply With Quote
Old 09-23-2007, 07:58 PM   #2
yell0wdart
jordanrift.com
 
Join Date: Sep 2007
Location: Phoenix, AZ
Posts: 366
Default

OK, so I found some workable examples and I've got my form working. Right now, I'm working to validate my text fields with a conditional statement. I'm getting a little stuck here. Here's my code:

Code:
var variables:URLVariables = new URLVariables();
var varSend:URLRequest = new URLRequest("email.php");
var varLoader:URLLoader = new URLLoader;
varSend.method = URLRequestMethod.POST;
varSend.data = variables;

stop();

//sets focus to the Name text box
stage.focus = textName;

//sets value of status_txt
status_txt.text = "";

//method to submit form
send_btn.addEventListener(MouseEvent.CLICK, sendActions);

//function called from method, contains validation logic and var data to be sent to form
function sendActions(event:MouseEvent):void{
	
	//conditional logic to validate form fields
	if(textName.length = "") {
		status_txt.text = "Please enter your name.";
	} else if(textEmail.length = "" || textEmail.indexOf("@") == -1 || textEmail.indexOf(".") == -1) {
		status_txt.text = "Please enter a valid email address.";
	} else if(textBody.length = "") {
		status_txt.text = "Please enter a message.";
	} else {
		
		//sends the text box variables to email.php by calling the varSend method
   		//variables.textName = textName.text;
   		//variables.textEmail = textEmail.text;
   		//variables.textBody = textBody.text;
   		//varLoader.load(varSend);
		trace("Form validated");
	}
	
	//moves mc timeline to frame 2
        gotoAndStop(2);
}
The code after my else statement has been commented out atm for testing purposes. I've uploaded it to my web server, and confirmed that it works flawlessly. I'd just like to set up some validation.

My goal is to have this conditional statement check for empty string values in my text boxes (textName and textEmail) and text field (textBody). Also, I'd like to check for the substring "@" and "." within the textEmail field. If they're absent, or any of the other fields contain empty strings, I'd like it to have my status_txt field (dynamic text) display the appropriate error.

Once the form data has been passed through my validation conditional statement, and sent to my email.php file, I've set the movieclip to gotoAndStop(2), which just displays a "Thank you" message in frame 2 of the mc.

When I run this code, I get 2 types of compiler errors.

The first, is "1059: Property is read-only". The error references the actual if statements in my code. I get 3 instances of this error. One for each if statement.

The second is "1061: Call to a possibly undefined method indexOf through a reference with static type fl.controls:TextInput." I get 2 instances of this error. One for each time I use the indexOf method to look for substrings.

I must be missing something. Perhaps something I'm not importing or declaring outside of my function? Are my errors generated due to scope? Once again, any assistance would be tremendously appreciated.
yell0wdart is offline   Reply With Quote
Old 09-23-2007, 08:18 PM   #3
yell0wdart
jordanrift.com
 
Join Date: Sep 2007
Location: Phoenix, AZ
Posts: 366
Default

OK, I think I may have solved my read-only issues by restructuring my if statements.

I changed my approach a little bit, and instead of saying:
Code:
if (textName.length = "")
I tried using the NOT operator there and stating:
Code:
if(!textName.length)
That seemed to solve that issue for me. I'm still seeing the undefined method error. I must be missing something somewhere. I'll keep digging.

/edit

I tried removing the text input components in my form and replacing them with strait text input fields. Didn't seem to help. The error just changes to say that it's referencing flash.text:TextField. Doing some research around here. I'm thinking it might be a casting issue. Is it that the compiler is expecting a string value from the indexOf method? How can I effectively cast it to expect a -1 in that conditional expression?

Here's the specific line of code in it's most recent state:
Code:
} else if(!textEmail.length || textEmail.indexOf("@") == -1 || textEmail.indexOf(".") == -1) {

Last edited by yell0wdart; 09-23-2007 at 09:07 PM.
yell0wdart is offline   Reply With Quote
Old 09-24-2007, 03:03 AM   #4
yell0wdart
jordanrift.com
 
Join Date: Sep 2007
Location: Phoenix, AZ
Posts: 366
Default

OK, so no casting necessary to avoid the method errors. Here's where I'm at now:

Code:
var variables:URLVariables = new URLVariables();
var varSend:URLRequest = new URLRequest("email.php");
var varLoader:URLLoader = new URLLoader;
varSend.method = URLRequestMethod.POST;
varSend.data = variables;

var emailContents:String = textEmail.text;
var indexAt:int = emailContents.indexOf("@");
var indexDot:int = emailContents.indexOf(".");

stop();

//sets focus to the Name text box
stage.focus = textName;

//sets value of text boxes
status_txt.text = "";
textEmail.text = emailContents;

//function called from method, contains validation logic and var data to be sent to form
function sendActions(event:MouseEvent):void{
	
	//conditional logic to validate form fields
	if(!textName.length) {
		status_txt.text = "Please enter your name.";	
	} else if(!textEmail.length, indexAt == -1, indexDot == -1) {
		status_txt.text = "Please enter a valid email address.";
	} else if(!textBody.length) {
		status_txt.text = "Please enter a message.";
	} else {
		
		//sends the text box variables to email.php by calling the varSend method
                //these lines are commented out for testing purposes
   		//variables.textName = textName.text;
   		//variables.textEmail = textEmail.text;
   		//variables.textBody = textBody.text;
   		//varLoader.load(varSend);
		trace("Form validated");
		
		//moves mc timeline to frame 2
    	gotoAndStop(2);
	}
}
//method to submit form
send_btn.addEventListener(MouseEvent.CLICK, sendActions);


//clear button
function clearFields(evt:MouseEvent):void {
	status_txt.text = "";
	textName.text = "";
	textEmail.text = "";
	textBody.text = "";
	
	//resets cursor in name text box
	stage.focus = textName;
}
clear_btn.addEventListener(MouseEvent.CLICK, clearFields);
I've just got a couple more issues with that conditional statement that I can see. When I test the movie, it seems to skip over this statement:

Code:
if(!textBody.length) {
		status_txt.text = "Please enter a message.";
textBody is set up as a multiline text field. I've appended the UIScrollBar to it from the default Flash components.

Any thoughts on this one? Should I not be referencing the "length" text property on this statement, since it's a multi-line text field? Does that make a difference? Like I said, it skips right over the textBody statement.

Secondly, the movie seems to get stuck on the indexOf methods in there. I don't get the compiler error anymore, since I declared the variables above my function. Even if I include "@" and "." in my textEmail field, it won't continue on to the next step in my script. Should I be going about it a different way if I'm trying to check for indexes of two separate substrings within my textEmail field?

/edit

I've tried separating my indexOf methods in two separate ways:

Code:
if(!textEmail.length, indexAt == -1, indexDot == -1)
and

Code:
if(!textEmail.length, indexAt == -1 || indexDot == -1)
Neither of them seems to work.

Last edited by yell0wdart; 09-24-2007 at 03:44 AM.
yell0wdart is offline   Reply With Quote
Old 09-24-2007, 07:39 PM   #5
yell0wdart
jordanrift.com
 
Join Date: Sep 2007
Location: Phoenix, AZ
Posts: 366
Default

OK brainstorming a little bit here...

Since my textBody field is a multiline input text field, I'm understanding that it won't return a value when I ask for textBody.length. So I'm thinking it might be better to use the getLineLength method here. Something along the lines of:

Code:
...

//should return the length of the first line of text
var bodyIndex:int = textBody.getLineLength(1);

...

function sendActions(event:MouseEvent):void{
	
	//conditional logic to validate form fields
	if(bodyIndex == 0) {
		status_txt.text = "Please enter a message.";	
	}
...
Think I'm barking up the right tree here? Anybody?
yell0wdart is offline   Reply With Quote
Old 09-25-2007, 05:05 AM   #6
yell0wdart
jordanrift.com
 
Join Date: Sep 2007
Location: Phoenix, AZ
Posts: 366
Default

Well, I got it working. It was just a matter of making sure I was assigning the correct properties of my variables within the function. I decided to scrap the body text box validaion. I figured, if somebody's going to send me a message through my swf, they'll more than likely type something int here. :P
yell0wdart is offline   Reply With Quote
Old 09-26-2007, 03:29 AM   #7
robol921
Registered User
 
Join Date: May 2006
Posts: 1
Default

I'm new to Actionscript 3 and I was looking a way to mail from AS3 and your post was so helpful,
thanks

but I think you sholud use :

if(textName.text.length == "") (with text property) instead of
if(textName.length = "")

or if(!textName.text.length) instead of
if(!textName.length)

because you are testing length of text

I think so

thanks Again
robol921 is offline   Reply With Quote
Old 09-26-2007, 03:14 PM   #8
yell0wdart
jordanrift.com
 
Join Date: Sep 2007
Location: Phoenix, AZ
Posts: 366
Default

Actually, if(!textName.length) works fine. Not sure that textName.text.length would work, since both are properties of the textName variable... so I'm not sure that the compiler would like you telling it go check the property of a property of a variable... but then again, I'm new to AS too.

My problem with using the indexOf methods was due to improperly declaring my variables. I ended up just declaring emailContent as a new string and indexAt and indexDot as new ints. Then within my function, I assigned emailContent = textEmail.text, and indexAt/indexDot = emailContents.indexOf("@"), or ("."), depending on the variable, of course.

In my conditional statements, I just said:

if(!textEmail.length, indexAt == -1 || indexDot ==-1)

It works great now. Though, I never did worry about the multiline text field (textBody) again. I was playing around with the getLineLength method, but I was having trouble getting it to do what I wanted it to. heh

I just ended up scrapping that portion of my validation. I could probably revisit it and play with detecting string values... but meh... I figure, if anybody is wanting to send me a message through the email form, they're going to type *something* in that box.

/edit

Yea, and looking back at it, just saying if(textName.text = "") would have probably worked too. I didn't realize, at the time, that the length property of textName would return an int... yet I'm asking the computer to look for an empty string. The more you know...

Last edited by yell0wdart; 09-26-2007 at 05:00 PM.
yell0wdart is offline   Reply With Quote
Old 09-29-2007, 02:54 PM   #9
gh0st123
Registered User
 
Join Date: Sep 2007
Posts: 1
Default Can I have a copy of your Fla file, please?

Quote:
Originally Posted by yell0wdart View Post
Actually, if(!textName.length) works fine. Not sure that textName.text.length would work, since both are properties of the textName variable... so I'm not sure that the compiler would like you telling it go check the property of a property of a variable... but then again, I'm new to AS too.

My problem with using the indexOf methods was due to improperly declaring my variables. I ended up just declaring emailContent as a new string and indexAt and indexDot as new ints. Then within my function, I assigned emailContent = textEmail.text, and indexAt/indexDot = emailContents.indexOf("@"), or ("."), depending on the variable, of course.

In my conditional statements, I just said:

if(!textEmail.length, indexAt == -1 || indexDot ==-1)

It works great now. Though, I never did worry about the multiline text field (textBody) again. I was playing around with the getLineLength method, but I was having trouble getting it to do what I wanted it to. heh

I just ended up scrapping that portion of my validation. I could probably revisit it and play with detecting string values... but meh... I figure, if anybody is wanting to send me a message through the email form, they're going to type *something* in that box.

/edit

Yea, and looking back at it, just saying if(textName.text = "") would have probably worked too. I didn't realize, at the time, that the length property of textName would return an int... yet I'm asking the computer to look for an empty string. The more you know...
I have been looking through the forums, and your approach seems to be quite the ticket. Can you tell me where I can download your file from, please?
gh0st123 is offline   Reply With Quote
Old 10-04-2007, 11:13 PM   #10
glenn
Registered User
 
Join Date: Oct 2007
Posts: 2
Default Try this, it's cleaner

I couldn't get this form to validate no matter how I tried. I don't know how you got it to work. I traced everything and indexAt and indexDot come up -1 every time. I looked at the help file in CS3 and found an email validator as an example that works great. See the code. I've also included a phone number validator just for future use (although it's not used here). Also, the textBody validator works fine, even with multiline and scrollbar. One caveat however, I could NOT get the validation to work when I used one of Flash's preinstalled components for the text fields. I dragged instances of dynamic text out with the text tool instead and viola!

Code:
var variables:URLVariables = new URLVariables();
var varSend:URLRequest = new URLRequest("email.php");
var varLoader:URLLoader = new URLLoader;
varSend.method = URLRequestMethod.POST;
varSend.data = variables;

stop();

//sets focus to the Name text box
stage.focus = textName;

//sets value of text boxes
status_txt.text = "";
//textEmail.text = emailContents;

//method to submit form
send_btn.addEventListener(MouseEvent.CLICK, sendActions);

clear_btn.addEventListener(MouseEvent.CLICK, clearFields);

//function called from method, contains validation logic and var data to be sent to form
function sendActions(event:MouseEvent):void{
	
	//conditional logic to validate form fields
	if(!textName.length) {
		status_txt.text = "Please enter your name.";	
	} else if(!textEmail.length) {
		status_txt.text = "Please enter an email address";
	} else if(!validateEmail(textEmail.text)) {
		status_txt.text = "Please enter a VALID email address";
	} else if(!textBody.length) {
		status_txt.text = "Please enter a message.";
	} else {
		
		status_txt.text = "Thank You!";
		
		//sends the text box variables to email.php by calling the varSend method
                //these lines are commented out for testing purposes
   		//variables.textName = textName.text;
   		//variables.textEmail = textEmail.text;
   		//variables.textBody = textBody.text;
   		//varLoader.load(varSend);
		trace("-----");
		trace("Valid email: "+validateEmail(textEmail.text));
		trace("Email: "+textEmail.text);
		trace("Text length: "+textBody.length);
		trace("Form validated");
		
		//moves mc timeline to frame 2
    	//gotoAndStop(2);
	}
}

//clear button
function clearFields(evt:MouseEvent):void {
	status_txt.text = "";
	textName.text = "";
	textEmail.text = "";
	textBody.text = "";
	
	//resets cursor in name text box
	stage.focus = textName;
}

function validateEmail(str:String):Boolean {
	var pattern:RegExp = /(\w|[_.\-])+@((\w|-)+\.)+\w{2,4}+/;
	var result:Object = pattern.exec(str);
	if(result == null) {
		return false;
	}
	return true;
}
		
function validatePhoneNumber(str:String):Boolean {
	var pattern:RegExp = /^\d{3}-\d{3}-\d{4}$/;
	var result:Object = pattern.exec(str);
	if(result == null) {
		return false;
	}
	return true;
}
glenn is offline   Reply With Quote
Reply


Thread Tools
Display Modes Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
POST Variables - Contact form with Radio Buttons HoustonMatrix ActionScript 1.0 (and below) 4 07-25-2008 07:03 AM
HTML contact form awg HTML and JavaScript 4 07-05-2008 08:32 PM
Flash Contact Form Problems kirkwood79 ActionScript 2.0 2 12-26-2007 05:22 PM
Contact Form not advancing to correct frame thenewguy ActionScript 2.0 0 05-08-2007 01:58 PM
[AS2] help in Flash X1Commander Gaming and Game Development 1 11-26-2005 10:34 PM


All times are GMT. The time now is 06:57 PM.

///
Follow actionscriptorg on Twitter

 


Powered by vBulletin® Version 3.8.5
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
Ad Management plugin by RedTyger
Copyright 2000-2013 ActionScript.org. All Rights Reserved.
Your use of this site is subject to our Privacy Policy and Terms of Use.