Submit A Form - 11submit.fla

This implements a data entry form and submits the entered data to another web page.

  1. Start Flash MX
  2. Create a new file.
  3. Set the canvas size to 400x200
  4. Set the colour to some pale pastel shade.
  5. Right click on frame 25 and select Insert Frame
  1. Click on the Text Tool.
  2. Set it to Input Text
  3. Set the font name and size if you wish.
  4. Set the font colour if you wish.
  5. Click the "Show Border" button on.
  6. Place four text input boxes onto the canvas.
  7. Click the Arrow tool and select the top input box.
  8. Set its X and Y properties to 20 and 20.
  9. Set its width property to 200.
  10. Repeat this procedure for the rest of the input boxes but set their Y properties to 50, 80 and 110 to space them out properly.
  1. Use the arrow tool to select the top Input Text.
  2. Set the Var (variable name) to title.
  3. Repeat the procedure for the other Input Text boxes and set their names to firstName, lastName and dob (date of birth).
  1. Right click on Layer 1 and select "Insert Layer".
  2. Right click on Layer 2 Frame 2 and select "Convert to Keyframes".
  3. Place a Static Text control onto Layer 2 Frame 2. Make sure the correct frame is selected!
  4. Place an error message into this text control. "Error : Title is blank."
  1. Select Layer 1 Frame 1
  2. Click on a blank area of the canvas to ensure no control is selected.
  3. Click on Actions Frame.
  4. Click to select advanced mode.
  5. Enter this code stop();

    
  1. Place a Submit button onto Layer 1 Frame 1.
  2. Change the Button label to "Submit.
  3. Select the button and click on "Actions-Movie Clip".
  4. Enter this code.
  5. on (release)
    {
        if (_root.title == Null)
        {
            _root.gotoAndStop(2);
        }
        else
        if (_root.firstName == Null)
        {
            _root.gotoAndStop(3);
        }
        else
        if (_root.lastName == Null)
        {
            _root.gotoAndStop(4);
        }
        else
        if (_root.dob == Null)
        {
            _root.gotoAndStop(5);
        }
        else
        {
            // ALL OK
            url = "foo.php";             // web page url
            url = url + "?";             // start "get" parameters
            url = url + "title=";        // field name equals
            url = url + _root.title;     // some value
            url = url + "&";             // separator
            url = url + "firstName=";    // field name equals
            url = url + _root.firstName; // some value
            url = url + "&";             // separator
            url = url + "lastName=";     // field name equals
            url = url + _root.lastName;  // some value
            url = url + "&";             // separator
            url = url + "dob=";          // field name equals
            url = url + _root.dob;       // another value
    
            getUrl (url);                // navigate to url		
        }
    }
    
  1. Add the rest of the error messages ...
  2. Right click on Layer 2 Frame 3 and select "Convert to Blank Keyframes".
  3. Select Layer 2 Frame 3 and place a Static Text control onto the canvas.
  4. Set the text to "Error : First Name must not be Blank."
  5. Right click on Layer 2 Frame 4 and select "Convert to Blank Keyframes".
  6. Select Layer 2 Frame 4 and place a Static Text control onto the canvas.
  7. Set the text to "Error : Last Name must not be Blank."
  8. Right click on Layer 2 Frame 5 and select "Convert to Blank Keyframes".
  9. Select Layer 2 Frame 5 and place a Static Text control onto the canvas.
  10. Set the text to "Error : Date of Birth must not be Blank."
  1. Right Click on Layer 1 Frame 2 and select "Convert to Blank Keyframe."
  2. Click on Layer 1 Frame 2 and place a button onto the canvas.
  3. Set the button label to "Reset".
  4. Open up "Actions - Movie Clip" and attach this code to the Reset Button.
  5. on (release)
    {
        _root.gotoAndStop(1);
    }
    
  1. Add static text labels to make the UI more friendly.
  2. Add graphics for the error messages to make the UI more friendly/interesting/ammusing.
 

 


 

You need a web page to recieve the data submitted by your Flash application.

This assumes you have a database called "foo" and a table named "customer".

Here is an example ...


<?php
  $title     = $_GET['title'];
  $firstName = $_GET['firstName'];
  $lastName  = $_GET['lastName'];
  $dob       = $_GET['dob'];
  
  $link = mysql_connect("localhost",    // Host name
                        "root",         // User name     (never use root in real life - Too insecure!)  
                        "")             // User password (never have a blank password in real life - Insecure!)
  or die("<h5>Could not connect: </h5>" . mysql_error());
  
  if (mysql_select_db ("foo")) // Use your own database and table name
  {
    $sql = "INSERT INTO customer        
    (title, last_name, first_name, date_of_birth) 
    VALUES 
    (\"$title\", \"$lastName\", \"$firstName\", \"$dob\")";
	  
    mysql_query($sql, $link);

    mysql_close($link);
} ?> <html> <head> <title>Example Page</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <h4><strong>Execute :</strong> <?php echo $sql; ?></h4> </body> </html>

 

© C N Bauers (2004) - You may use these materials for your self education. Educational institutions may use these materials too.