| |
LiveMotion Forms - Part II
Setting up our Form Scripts.
If you are using the simpleForm.liv Library Item from LiveMotionCentral.com,
simply skip to Part III unless you want to read on.
Now we need to add some scripts to our form. Our scripts will validate
the form fields and make sure we have content in them. We will
also be adding a script that will reset the form. We will cover
our form reset script first. Open up your form MCG by double clicking
on it. When it opens, make sure the form MCG is selected at the
top, and open the script editor. To do so hit CMD + J on MAC or
CTRL + J on PC. You should see that the onLoad even it selected
for the MCG Form. If it is not, make sure that the "Handler
Script" button is depressed. You should now see the onLoad
event is selected. Now, in the code window, copy and paste the
following code. Make sure to remove the line numbers when you
add our script. The line numbers are used for the description
below.
--- CODE ---
00
// Set a function to Reset the form.
01 function resetForm(){
02 _root.form.txtName="";
03 _root.form.txtEmail="";
04 _root.form.txtURL="";
05 _root.form.txtComments="";
06 _root.form.txtStatus = "The form has
been reset.";
07 Selection.setFocus('_root.form.txtName');
08 }
--- CODE ---
Line 00: This is a comment, anything that has a double forward
slash will not be processed as a part of the script.
Line 01: Here we call a function, and name it resetForm.
Functions can hold blocks of code that we want to process, and
we can call a function at any time.
Line 02: Lines 02 - 05 will reset our form fields to nothing,
which is what we want.
Line 06: Here we write to the status field and let the
user know that the form has been reset.
Line 07: Here we set the mouse cursor focus to the first
field, which is the name field.
Line 08: Closes the function. You need to do this or the
script will not run correctly.
Now hit the return key several times to give us some space for
our next script. Now copy and paste the code below, again, remember
to remove the line numbers before you run the script. The line
numbers are for the description below.
--- CODE ---
00
// Set a function to Validate and Send the form.
01 function submitForm(){
02 var pass = true;
03 if(_root.form.txtName == ""){
04 pass = false;
05 _root.form.txtStatus
= "Please complete the Name field.";
06 Selection.setFocus('_root.form.txtName');
07 _root.form.errorSound.gotoAndPlay('b');
08 }
09 else if (!_root.form.txtEmail.length || _root.form.txtEmail.indexOf("@")
== -1 || _root.form.txtEmail.indexOf(".") == -1){
10 pass = false;
11 _root.form.txtEmail
= "";
12 _root.form.txtStatus
= "Please enter a valid E-mail address.";
13 Selection.setFocus('_root.form.txtEmail');
14 _root.form.errorSound.gotoAndPlay('b');
15 }
16 else if(!_root.form.txtURL.length || _root.form.txtURL.indexOf("http://")
== -1 || _root.form.txtURL.indexOf(".") == -1){
17 pass = false;
18 _root.form.txtStatus
= "Please enter a valid URL.";
19 _root.form.txtURL
= "http://";
20 Selection.setFocus('_root.form.txtURL');
21 _root.form.errorSound.gotoAndPlay('b');
22 }
23 else if(_root.form.txtComments == ""){
24 pass = false;
25 _root.form.txtStatus
= "Please complete the Comments field.";
26 Selection.setFocus('_root.form.txtComments');
27 _root.form.errorSound.gotoAndPlay('b');
28 }
29 else{
30 pass = true;
31 }
32 if(pass){
33 _root.form.txtStatus
= "Sending the form, one moment please...";
34 loadVariables("lmcMail.asp",
"_root.form", "POST");
35 }
36 return pass;
37 }
--- CODE ---
Line 00: Again, line 00 is a comment line.
Line 01: Again, here we name our function.
Line 02: Here we name a variable by using var. We make
the name pass, and we give pass a value of true. We will use this
variable to to prevent the form from being submitted when a field
does not pass its validation.
Line 03: Here we check the field named "Name"
for content. If the field has nothing in it, the pass will fail,
if something is in the field, it will pass the validation. When
you run an if statement, it will return TRUE or FALSE. When our
if statement returns false, it will run the lines below, if it
returns true, it will run the next else if statement.
Line 04: Here we set the pass to false, because the validation
has failed, and nothing is in the text field, Remember, setting
the variable pass to false, will prevent the form from being submitted
unless the validation passes.
Line 05: Because our validation has failed, we want to
let the user know what's wrong, we write a message to that status
field letting them know they need to complete the name field.
Line 06: Now we select the name field, letting the user
enter there name in the text field.
Line 07: Remember the sound we added to use when our form
has an error? Here we play the sound, giving the user an Audible
message that there was a problem.
Line 08: Here we close the if statement. Like a function,
an if statement must be opened { and then must be closed }
Line 09: With JavaScript, you can use something called
a logical or. The logical or is two pipes like this || what this
says is if this or this, or this, return false, run the script
below, if they return false, run the next if statement. Line 09
and Line 16 do exactly the same thing. All checks have to return
true to pass the script, if ANY of the logical OR's fail, the
test will fail, and the users will get an alert message.
A. First they check to make sure that the field has something
in it.
B. Next they check index of a special character, for Email, we
look for the @ sign, for the URL we look for HTTP://. Notice we
use the indexOf to do this. When you check for the index of a
string ("anything between these quotes") if the string
is found, the indexOf returns a number of the strings position.
If the string is not present, it will return -1. So, what we are
saying is as follows; if the Email does not have any content,
or does not have an @ sign, or does not have a . period, fail
the validation test. This is the same in Line 16, the only difference
is that it checks for the HTTP:// and a period.
In every instance when a validation fails, we always set the
pass variable to false, we write to the status text field
to let the user know they have to complete the field, we put
the mouse cursor in THAT specific field, and we play the error
sound. EVERY field is setup this way. You will also notice
that on Line 23, the comments field is setup the exact same
way as the Name field, we simply check to make sure the field
is not empty.
Another important thing to remember is that our first line
is a standard "IF" the other fields use the "ELSE
IF" This is why. We know that an If statement will return
true or false, so, if the statement returns true, it will
run the code under the if statement, if the code returns false,
it will run either the next statement which would be else
if or it would run an else statement if it were present.
Example:
if(statement){
returns true;
}
else{
returns false;
}
To provide a further example:
if(1
+ 1 == 2){
return true;
Yaup, you can add!!!
}
else{
return false;
You got to get out more!
}
Now else if is NOTHING like else. Although both require
a first if statement, else is the FALSE part to an
if statement, while else if is simply another if statement
that follows an if statement. If your script requires multiple
if statements, in the same line, the first will be if, there
after they are else if.
Line 29: We run an else statement, that simply sets the
pass to true, we do this because all of the validation has passed,
so now we set the pass to true to allow the form to be sent.
Line 32: if(pass) Now we should know what we are doing
here. We are double checking to see if our variable pass is true.
Line 33: We write to our status text field and tell the
user that we are sending the form.
Line 34: loadVariables("lmcMail.asp", "_root.form",
"POST"); loadVariables will load all of out text field
variable names. lmcMail.asp is the name of our ASP script that
will process our form. _root.form is the location of where we
are loading our variables. POST is how we will be sending the
form, we are POSTING our data to the ASP script.
Line 36: Returns the pass variable, which is true, which
will finally submit our form!
Now that you are PULLING your
hair out, we have one last script to add, and we will almost be
done. In our event list, we need to change it from onLoad to onKeyDown
and add the following code.
--- CODE ---
//
Reset the Status Window to nothing when a key is pressed.
_root.form.txtStatus = "";
--- CODE ---
Here we are simply resetting the status field any time some one
types something. The reason is, you don't want that red status
message there constantly, ya could confuse some one!
Making our form buttons run our functions!
1. Select our submit button, select its down state, open the script
editor by clicking on the script icon in the states palette, and
add the following code.
_root.form.submitForm();
2. Now do the same for the reset button and add the following code.
_root.form.resetForm();
The two above steps are simply calling the function names we setup
for our functions. Remember, we have to provide the location of
the functions when calling them.
Next we need to decide to use either an ASP - CFML or PHP Script. To find out what you can use, you may need to contact your hosting provider and ask which they support. Once you have figured that out, you can skip to either of the sections that cover your needed language. Remember, our SWF / LIV file by default is setup to run the ASP Script. If you use the CFML or PHP example, make sure to update and re-export the form so it will work with YOUR script.
ASP Setup | CFML Setup | PHP Setup
part
1
• 2
• 3
• 4
• 5
• 6
|
