16 Replies Latest reply on Mar 29, 2011 7:11 AM by XRayABC

    Help with Contact Form using Textfields

    XRayABC

      I am trying to write a contact form.
      It consists of Textfields.  I am new to Actionscript so I created
      them by placing each field on a form in Frame 1 of a layer called data_fields.
      Because it is long I am just going to place part of it in the forum.
      If anyone can help and needs more information let me know.

      The very first thing I do is execute a function to init the fields.
      Example:
      FullName.text = "";
      FullName.background=true;
      FullName.backgroundColor=0xffffff;
      .
      .
      Comments.backgroundColor=0xffffff;
      Then:

      FullName.onSetFocus = function(oldFocus:Object)
      {
      FullName.background=true;
      FullName.backgroundColor=0xCCCCCC;
      var keyListener:Object = new Object();
      keyListener.onKeyDown = function()
      {
        if (Key.getCode() == Key.ENTER)
        {
         Selection.setFocus("Address");
            Key.removeListener(keyListener);
           }
      };
      Key.addListener(keyListener);
      }
      FullName.onKillFocus = function(oldFocus:Object)
      {
      FullName.background=true;
      FullName.backgroundColor=0x65ffff;
      }
      //---------------------------------------------------
      The pattern continues just like the -FullName- thru
      Address
      City
      State
      Zip
      Phone
      Email
      Subject
      Comments

      Everything works just fine except I don't know how to
      programatically give focus to the first field.
      If I click in it it turns gray (as it should) and everything works
      as long as I am doing no error checking.  That is problematic as (some of)
      the fields need to be validated and standardized
      (Example: Phone should be (999) 999-9999.


      Code for Phone:
      Phone.onSetFocus = function(oldFocus:Object) {
      trace("oldFocus1=" + oldFocus._name);
      Phone.background=true;
      Phone.backgroundColor=0xCCCCCC;
      var keyListener:Object = new Object();
      keyListener.onKeyDown = function()
      {
        if (Key.getCode() == Key.ENTER)
        {
          Selection.setFocus("Email");
             Key.removeListener(keyListener);
           }
      };
      Key.addListener(keyListener);
      }
      Phone.onKillFocus = function(oldFocus:Object)
      {
      trace("oldFocus2=" + oldFocus._name);
      // Define variables
      var i:Number;
      var phoneTest:String = new String();
      var tempChar:String = new String();

      // Initialize variables
      phoneTest = "";
      tempChar = "";

      // Loop thru the "Phone" string eliminating all non numeric characters.
      for (i = 0; i <= Phone.length; i++)
      {
      tempChar = Phone.text.substr(i,1);
      // trace("DATA=" + Phone.text.substr(i,1));
      // trace("tempChar=" + tempChar);
      if (tempChar < "0" || tempChar > "9")
      {
      }
      else
      {
        phoneTest = phoneTest + tempChar;
      //  trace("phoneTest=" + phoneTest);
      } // end if
      } // end for
      //  trace(">>>phoneTest=" + phoneTest);
      // If there are not exactly 10 characters
      //  tell the user
      if (phoneTest.length != 10)
      {
      Phone.htmlText = "<font color='#ff0000'>Invalid Phone Number</font>";
      Phone.background=true;
      Phone.backgroundColor=0xcccccc;
      Email.background=true;
      Email.background=0xffffff;
      Selection.setFocus("Phone");
      Key.removeListener(keyListener);
      }
      else
      {
      Phone.htmlText = "<font color = 0xffffff></font>"
      Phone.text = "(" + phoneTest.substr(0,3) + ") " + phoneTest.substr(3,3) + "-" + phoneTest.substr(6,4);
      Key.removeListener(keyListener);
      }
      Phone.background=true;
      Phone.backgroundColor=0x65ffff;
      Key.addListener(keyListener);
      }
      //---------------------------------------------------
      I have two questions:
      1. How do I give focus to the FullName field to start with?
      2. I am trying to do the error checking in the Phone.onKillFocus (event?)
      I need to know how to give focus back to the Phone Textfield after
      finding an error in the field just like it was the first time thru. If there are
      no errors it works fine.(Will rip out non numeric characters,make sure there are 10 digits,and
      format it.)
      I apologize if there is a CODE style and I missed it.

       

      Thanks for any assistance,

      Ray Glover

        • 1. Re: Help with Contact Form using Textfields
          kglad Adobe Community Professional & MVP

          you can use the selection class to set focus.  however, you can't set focus on a flash element until flash has focus.

           

          Selection.setFocus(Phone)

          • 2. Re: Help with Contact Form using Textfields
            XRayABC Level 1

            kglad,

             

            I appreciate your response but I don't quite understand.

             

            If you are talking about the initial field (FullName) getting focus, I tried, in the Init routine, setting

            Selection.setFocus(FullName);

            but it still would not get focus when I tested the movie.  I had to click in the fieldthen

            it got focus, changed the bg to gray, allowed me to enter data, then when I hit enter

            it turned the bg cyan, and went to the Address field.

             

            I know my code for editing is probably awful but it works for what I need.

            (I come from a COBOL/Fortran background.)

            Hopefully I will learn better techniques as I gain experience in Actionscript.

             

            If you look at my code, in the Phone.onKillFocus I did use

            Selection.setFocus(Phone);

            It still did not give focus back to Phone.

             

            By the way, these are instance names and not vars.

             

            If you or someone could tell me what "you can't set focus on a flash element until flash has focus" means.

            When does Flash get focus?

             

            Thanks again,

            Ray

            • 3. Re: Help with Contact Form using Textfields
              kglad Adobe Community Professional & MVP

              XRayABC wrote:

               

              kglad,

               

              I appreciate your response but I don't quite understand.

               

              If you are talking about the initial field (FullName) getting focus, I tried, in the Init routine, setting

              Selection.setFocus(FullName);

              but it still would not get focus when I tested the movie.  I had to click in the fieldthen

              it got focus, changed the bg to gray, allowed me to enter data, then when I hit enter

              it turned the bg cyan, and went to the Address field.

              again, you can't set focus on a flash element until flash has focus.

               

              I know my code for editing is probably awful but it works for what I need.

              (I come from a COBOL/Fortran background.)

              Hopefully I will learn better techniques as I gain experience in Actionscript.

               

              If you look at my code, in the Phone.onKillFocus I did use

              Selection.setFocus(Phone);

              It still did not give focus back to Phone.

              yes, it did.  but onKillFous() executes on mousedown, you set the focus back to Phone, then you mouse up and reset the focus wherever the mouse is located.

               

              one way to remedy is to use onKillFocus to add a mouseup listener, reset your focus on mouseup and remove the listener.

              • 4. Re: Help with Contact Form using Textfields
                XRayABC Level 1

                kglad,

                 

                I have placed:

                 

                var mouseListener:Object = new Object();
                Mouse.addListener(mouseListener);

                as the first thing in the Phone.onKillFocus function.

                 

                I placed:

                 

                mouseListener.onMouseUp = function()
                {
                  Selection.setFocus("Phone");
                }
                Mouse.removeListener(mouseListener);

                within the if statement

                 

                if (phone.length != 10)

                 

                as the last thing before the else clause.

                 

                I tested it again and it made no difference in the outcome

                my error message gets put in the Phone Textfield

                Email has focus and bg is changed to cyan (it should only change color after leaving the Email field).

                 

                I do not mean to be dense, but repeating

                you can't set focus on a flash element until flash has focus.

                still does not tell me when Flash gets focus.

                 

                Thanks for your help and your patience.  I'll keep at it untill I can see what you are trying to tell me.

                I don't have the depth of experience that you do in Flash.  I am a programmer but in all the OLD languages

                COBOL, FORTRAN, VB, and several nobody has ever heard of.

                 

                Ray Glover

                • 5. Re: Help with Contact Form using Textfields
                  kglad Adobe Community Professional & MVP

                  flash gets focus when a user clicks on the stage.

                   

                  use:

                   

                  var tl:MovieClip = this;
                  tf.onKillFocus=function(){
                  tl.onMouseUp=function(){
                  delete this.onMouseUp;
                  Selection.setFocus(tf)
                  }
                  }

                  • 6. Re: Help with Contact Form using Textfields
                    XRayABC Level 1

                    kglad,

                     

                    I replaced my Phone.onKillFocus with the code you suggested.

                    I replaced "tf" with "Phone" because I assumed you meant "tf" to be "Textfield".

                    When I ran the test, It made no difference, in results.

                     

                    Phone.onKillFocus = function(newFocus:Object)
                    {
                          var tl:Movieclip = this;
                          tl.onMouseUp=function(){
                               delete this.onMouseUp;
                               Selection.setFocus("Phone");

                           }
                    }

                     

                    I have tried many variations and I still can't get it to work.

                    My code works well if there are no errors in the Phone field.

                    It reformats 10 digits to the form (999) 999-999, then

                    goes on to the Email field.

                    On error it puts my error mesage in the field,but will not

                    change focus back to Phone field.

                     

                    Any other suggestions?  I am totally perplexed by what it is doing

                    as opposed to what I think it's supposed to do based on my code.

                     

                    Thanks,

                    Ray

                    • 7. Re: Help with Contact Form using Textfields
                      kglad Adobe Community Professional & MVP

                      that's not the code i suggested.  substitute the name of your textfield for tf but change nothing else.  in particular, the tl reference needs to be the curent timeline, not the textfield.

                      • 8. Re: Help with Contact Form using Textfields
                        XRayABC Level 1

                        My modified code. (I have put the validation code in a function.)

                         

                        Phone.onSetFocus = function(oldFocus:Object) {

                        trace("oldFocus1=" + oldFocus._name);

                        Phone.background=true;

                        Phone.backgroundColor=0xCCCCCC;

                        var keyListener:Object = new Object();

                        keyListener.onKeyDown = function()

                        {

                          if (Key.getCode() == Key.ENTER)

                          {

                           testPhone(_global.phoneOK);

                           if (_global.phoneOK == 1)

                           {

                            trace("PhoneOK-T=" + _global.phoneOK);

                            Selection.setFocus("Email");

                               Key.removeListener(keyListener);

                           }

                           else

                           {

                            trace("PhoneOK-F=" + _global.phoneOK);

                            Selection.setFocus("Phone");

                               Key.removeListener(keyListener);

                              }

                          }

                        }

                         

                          Key.addListener(keyListener);

                         

                        }

                         

                         

                        Phone.onKillFocus = function()

                        {

                        if (_global.phoneOK = 0)

                        {

                        var tl:MovieClip = this;

                        trace("tl=" + tl);

                        tl.onMouseUp=function()

                        {

                        delete this.onMouseUp;

                        Selection.setFocus("Phone")

                        }

                        }

                         

                        }

                         

                        Your suggested code:

                         

                        var tl:MovieClip = this;
                        tf.onKillFocus=function(){
                        tl.onMouseUp=function(){
                        delete this.onMouseUp;
                        Selection.setFocus(tf)
                        }
                        }

                         

                        The only mods were:

                        1. Used "Phone" insteas of "tf"

                        2. Put if around your code to only execute when data was invalid

                         


                        Results:

                         

                        For good phone number:

                             works exactly as expected.

                         

                        For invalid phone number

                             cursor remains on "Phone" field.
                             "Phone" field has my error message in it.
                             I can type over the error message with good data.
                                  However, when I hit enter nothing happens.
                                       Data is not re-validated/reformatted.
                                       If I hit TAB focus goes to the next field (Email),

                                       I expected it to re-verify/reformat phone number upon keying good data
                                       Then go to the next field as if error never occured.

                         

                        I hope I have explained well enough.  I want you to know that I have not been idle.

                        I have tried many things, been reading the online docs, etc.

                        Thanks for your patience with me; I am trying.

                        Ray

                         

                        PS: Can you suggest some good books on AS (2 or 3)?

                        • 9. Re: Help with Contact Form using Textfields
                          kglad Adobe Community Professional & MVP

                          :

                           

                          var tl:MovieClip = this;

                           

                          Phone.onKillFocus = function()

                          {

                          if (_global.phoneOK = 0)

                          {

                           

                          trace("tl=" + tl);

                          tl.onMouseUp=function()

                          {

                          delete this.onMouseUp;

                          Selection.setFocus(Phone)

                          }

                          }

                           

                          }

                          • 10. Re: Help with Contact Form using Textfields
                            XRayABC Level 1

                            OK,

                             

                            I realize you are telling me that I had not put your code in exactly like you showed me.

                             

                            1.     I have tried putting var tl:MovieClip = this;  just prior to the Phone.onKillFocus function which means it was in the main body of the AS.

                                    trace of tl returned (tl=_level0)

                             

                            2.       I have tried putting var tl:MovieClip = this;in the function Phone.onSetFocus (because that is where I really want to go back to, made sense to me)

                                      trace of tl returned (tl=_level0.Phone)

                             

                            3.     I also noticed that your code did not have quotes around Phone in the Selection.setFocus

                                    I tried it with quotes and without quotes, it made no difference.

                             

                            I don't know if I am just that inexperienced in Flash or if I am just ignorant of the new language paradigms.

                            I thought what I was trying to do was simple.  Obviously it is not (for me).

                             

                            Do you think that I trying to solve the problem the wrong way?  I wanted to get the data clean before I sent it to PHP.

                             

                            I would be extremely grateful if you would not give up on me just yet, but, if you do, I understand.

                             

                            Thanks again,

                            Ray

                            • 11. Re: Help with Contact Form using Textfields
                              kglad Adobe Community Professional & MVP

                              download this fla and find why it works and whatever you're doing does not:  www.kglad.com/Files/forums/Untitled-1.fla

                              1 person found this helpful
                              • 12. Re: Help with Contact Form using Textfields
                                XRayABC Level 1

                                Kglad,

                                 

                                I am receiving an unexpected file format error when I try to open the file.

                                I am using Flash CS4

                                 

                                Ray

                                • 13. Re: Help with Contact Form using Textfields
                                  XRayABC Level 1

                                  kglad,

                                   

                                  if you get the time would you please re-post the file you suggested that I compare with mine to see whay I am doing wrong?

                                  I would greatly appreciate it.

                                  Thanks again,

                                  Ray

                                  • 14. Re: Help with Contact Form using Textfields
                                    kglad Adobe Community Professional & MVP

                                    here's that file saved for cs4:   www.kglad.com/Files/forums/Untitled-1.fla

                                    • 15. Re: Help with Contact Form using Textfields
                                      XRayABC Level 1

                                      kglad,

                                       

                                      Thanks for all your help.  I will study your code to find out where I am going wrong.

                                      I admire your depth of knowledge and your willigness to help us "old guys" learn

                                      the newer OOP style languages.  If I can't figure it out with your example, I may

                                      have to do the validation in PHP!

                                       

                                      Ray Glover

                                      • 16. Re: Help with Contact Form using Textfields
                                        kglad Adobe Community Professional & MVP

                                        you're welcome.