<pedrocorreia.net ⁄>
corner
<mySearch ⁄> <mySearch ⁄>

corner
 
corner
<mySnippets order="rand" ⁄> <mySnippets order="rand" ⁄>

corner
 
corner
<myContacts ⁄> <myContacts ⁄>

<email ⁄>


pc@pedrocorreia.net

<windows live messenger ⁄>


pedrojacorreia@hotmail.com

<myCurriculum type="pdf" ⁄>


Download
corner
 
corner
<myBlog show="last" ⁄> <myBlog show="last" ⁄>

corner
 
corner
<myNews show="rand" ⁄> <myNews show="rand" ⁄>

corner
 
corner
<myNews type="cat" ⁄> <myNews type="cat" ⁄>

corner
 
corner
<myQuote order="random" ⁄> <myQuote order="random" ⁄>

corner
 
corner
<myPhoto order="random" ⁄> <myPhoto order="random" ⁄>

<pedrocorreia.net ⁄>
corner
 
corner
<myAdSense ⁄> <myAdSense ⁄>

corner
 
corner
<myVisitorsMap ⁄> <myVisitorsMap ⁄>

corner
 
 

<Actionscript Form Default Values ⁄ >




clicks: 8335 8335 2010-07-28 2010-07-28 goto mySnippets mySnippets actionscript  Download  Bookmark This Bookmark This



Here's a quick snippet that implements form field defaults, i. e., if you don't want to label your form textboxes you can, for instance, add a default textbox value, so that your visitor sees what that textbox's for, but if he selects that textbox the default text will be erased so that it allows inserting the text.

If the textbox's doesn't have any value inserted by the user it'll show a default value; as soon as the user selects the textbox the default text will be cleared; in case that the user inserts something the textbox will keep its value, if not, the default value will be shown up again.

All the textboxes should have a description, so that the user knows what to insert, some textbox are required, some are not, I won't get in the detail, in this snippet, about form validation, I'll leave to another snippet, however it's a common use (or it should be) the form validation.

Since our form will have default value, let's suppose that we have a field called phone number that it's not strictly necessary, the textbox will have a default value "Phone Number" and it'll be called "phone_number".

Since we store the value in a textbox itself, when we submit the form, the textbox "phone_number" will send "Phone Number" to our script, obviously this is wrong, it the user wants to add information he can, however regarding that that field's not required, it the user doesn't add values, it should be blank when submitting the form.

Taking this in mind, we'll add a validation before submitting the form, we'll iterate all over our textbox and check it they're filled with de default values or not, if it has a default value than let's clear it.

You can only add the form default values to some textboxes, you can specify it when creating the object



Of course that a form can have multiple field types, such as radio buttons, checkboxes, textboxes, dropdowns, etc, however in this snippet I only implemented the textboxes script, in near future I'll add more options



This snippet's in Actionscript 2



I build a simple interface with just two textboxes, here's a the interface screenshot:










As you'll also see we have a line of code in the previous screenshot, it'll include "Init.as", which will take care of the all process for us, if you don't write Actionscript


FormFieldDefaults.as, our main class, it will add the form default value and correspondent event handlers to all the textboxes we specified.

  1. /**
  2. * This class will create form field default captions
  3. *
  4. * @author pedrocorreia.net
  5. */
  6. class FormFieldDefaults {
  7. private var $this:Object;
  8. private var $path:Object;
  9. private var fields:Object;
  10.  
  11. /**
  12. * Constructor
  13. *
  14. * @param Object Field defaults
  15. * @param Object Form "this"
  16. * @param Object Path to Form
  17. */
  18. public function FormFieldDefaults(_fields:Object, _this:Object, _path:Object) {
  19. this.$this = _this;
  20. this.$path = _path;
  21. this.fields = _fields;
  22.  
  23. if (typeof String.prototype.trim !== "function") {
  24. /**
  25. * String trim prototype
  26. */
  27. String.prototype.trim = function() {
  28. for(var i = 0; this.charCodeAt(i) < 33; i++);
  29. for(var j = this.length-1; this.charCodeAt(j) < 33; j--);
  30. return this.substring(i, j+1);
  31. };
  32. }
  33. } //end constructor FormFieldDefaults
  34.  
  35. /**
  36. * Reset Form to its defaults
  37. */
  38. public function Reset():Void {
  39. for (var field in this.fields) {
  40. this.$path[field].text = this.fields[field];
  41. }
  42. } //end ResetValues
  43.  
  44. /**
  45. * Clear default values
  46. */
  47. public function Clear():Void {
  48. for (var field in this.fields) {
  49. if (this.$path[field].text === this.fields[field]) {
  50. this.$path[field].text = "";
  51. }
  52. }
  53. } //end ClearDefaultValues
  54.  
  55. /**
  56. * Create and manage Event Handlers
  57. */
  58. public function EventHandlers():Void {
  59.  
  60. /**
  61. * EventHandler onFieldFocus
  62. */
  63. var
  64. //cache FormFieldDefaults "this"
  65. $self = this,
  66.  
  67. /**
  68. * EventHandler onSetFocus
  69. *
  70. * @param Object
  71. */
  72. __onSetFocus = function(e:Object):Void{
  73. if (e.text.length > 0 && e.text === $self.fields[e._name]) {
  74. e.text = "";
  75. }
  76. }, //end __onSetFocus
  77.  
  78. /**
  79. * EventHandler onKillFocus
  80. *
  81. * @param Object
  82. */
  83. __onKillFocus = function(e:Object):Void {
  84. if (e.text.trim() === "") {
  85. e.text = $self.fields[e._name];
  86. }
  87. }, //end __onKillFocus
  88.  
  89. /**
  90. * Create an EventHandler
  91. *
  92. * @param String Name
  93. * @param String Event Name
  94. * @param Function Callback
  95. */
  96. _CreateEvent = function(obj:String, evt:String, callback:Function):Void {
  97. $self.$path[obj]["on" + evt] = callback;
  98. },
  99.  
  100. /**
  101. * Iterate fields Object and
  102. * add field EventHandlers
  103. */
  104. _SetEventHandlers = function():Void {
  105. for (var field in $self.fields) {
  106.  
  107. //Add EventHandler Field on Focus
  108. _CreateEvent(field, "SetFocus", function():Void{ __onSetFocus(this); });
  109.  
  110. //Add EventHandler Field on Lost Focus
  111. _CreateEvent(field, "KillFocus", function():Void{ __onKillFocus(this); });
  112.  
  113. } //end $self.fields for
  114.  
  115. }; //end _SetEventHandlers
  116.  
  117. _SetEventHandlers();
  118. } //end EventHandlers
  119.  
  120. /**
  121. * Startup function
  122. *
  123. * Fill form with default values;
  124. * Add Event Handlers to form textbox fields
  125. */
  126. public function Init():Void {
  127. this.Reset();
  128. this.EventHandlers();
  129. } //end Init
  130.  
  131. } //end FormFieldDefaults class










Init.as, this is where we'll specify our settings to FormFieldDefaults class. The code's throughout self explanatory. In here you'll specify the textboxes in which we want to enable this feature.
We'll also add the form submit event handlers here. We could also add these actions to our main class, however for the main purpose if this script I thought that it wasn't necessary.

  1. //used when loading as external swf, it's not strictly necessary,
  2. //however it could save you a few headaches with paths ^_^''
  3. _root._lockroot = true;
  4.  
  5. //disable focus around textbox
  6. _root._focusrect = false;
  7.  
  8. var
  9. //cache our current "this"
  10. $self = this,
  11.  
  12. //save path to form, in this example it's the same, however it could be different,
  13. //for instance, our form could be inside a MovieClip, in this case it would be
  14. //$path = $self.myMovieClipName;
  15. $path = $self,
  16.  
  17. /**
  18. * Auxiliary function to add an EventHandler
  19. *
  20. * @param String Name
  21. * @param String Event Name
  22. * @param Function Callback Function
  23. */
  24. CreateEvent = function(obj:String, evt:String, callback:Function) {
  25. $path[obj]["on" + evt] = callback;
  26. },
  27.  
  28. /**
  29. * Form field default values
  30. * Object => { field_name: "default field value" }
  31. */
  32. field_defaults:Object = {
  33. txt_name: "Your name",
  34. txt_email: "You e-mail address"
  35. },
  36.  
  37. //create our object
  38. frm_defaults = new FormFieldDefaults(field_defaults, $self, $path);
  39.  
  40. //initialize our script, basically it'll reset the form values and
  41. //add all event handlers
  42. frm_defaults.Init();
  43.  
  44. //create event for submit the form
  45. CreateEvent ("bt_send", "Release", function() {
  46. //clear all default fields left blank
  47. frm_defaults.Clear();
  48. //here goes your submit code ...
  49. // .....
  50. });
  51.  
  52. //create event for reset the form
  53. CreateEvent ("bt_reset", "Release", function() { frm_defaults.Reset(); });





Although, I, throughout the entire text wrote about forms, of course we use this code to just simple textboxes that won't get submitted :)





And finally, here goes a video of our script working ^_^''










If you have any doubt or found any error, please drop me an email.









clicks: 8335 8335 2010-07-28 2010-07-28 goto mySnippets mySnippets actionscript  Download  Bookmark This Bookmark This