Prototype Form
Introduction <ul><li>Form is a namespace and a module for all things form-related, packed with form manipulation and seria...
Moduleindex <ul><li>disable :: Form </li></ul><ul><li>  </li></ul><ul><li>disable(formElement) -> HTMLFormElement </li></u...
<ul><li>enable :: Form </li></ul><ul><li>  </li></ul><ul><li>enable(formElement) -> HTMLFormElement </li></ul><ul><li>Enab...
<ul><li>  focusFirstElement :: Form </li></ul><ul><li>  </li></ul><ul><li>focusFirstElement(formElement) -> HTMLFormElemen...
<ul><li>  getInputs :: Form </li></ul><ul><li>  </li></ul><ul><li>getInputs(formElement [, type [, name]]) -> array </li><...
<ul><li>reset :: Form </li></ul><ul><li>  </li></ul><ul><li>reset(formElement) -> HTMLFormElement  </li></ul><ul><li>Reset...
<ul><li>serialize :: Form </li></ul><ul><li>  </li></ul><ul><li>serialize(formElement) -> string </li></ul><ul><li>Seriali...
<ul><li>serializeElements :: Form </li></ul><ul><li>  </li></ul><ul><li>serializeElements(elements) -> string </li></ul><u...
Form.Element <ul><li>This is a collection of methods that assist in dealing with form controls. They provide ways to focus...
Method of Form.Element <ul><li>activate  :: Form.Element </li></ul><ul><li>  </li></ul><ul><li>activate(element) -> HTMLEl...
<ul><li>clear  :: Form.Element </li></ul><ul><li>  </li></ul><ul><li>clear(element) -> HTMLElement </li></ul><ul><li>  Cle...
<ul><li>enable  :: Form.Element </li></ul><ul><li>  </li></ul><ul><li>enable(element) -> HTMLElement </li></ul><ul><li>  E...
<ul><li>  present :: Form.Element </li></ul><ul><li>  </li></ul><ul><li>present(element) -> boolean  </li></ul><ul><li>Ret...
<ul><li>  select :: Form.Element </li></ul><ul><li>  </li></ul><ul><li>select(element) -> HTMLElement </li></ul><ul><li>  ...
Upcoming SlideShare
Loading in …5



Published on

Prototype Javascript

Published in: Technology, Art & Photos
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. Prototype Form
  2. 2. Introduction <ul><li>Form is a namespace and a module for all things form-related, packed with form manipulation and serialization goodness. </li></ul><ul><li>  </li></ul><ul><li>While it holds methods dealing with forms as whole, its submodule Form.Element deals with specific form controls. Most of these methods are also available directly on FORM elements that have been extended. </li></ul>
  3. 3. Moduleindex <ul><li>disable :: Form </li></ul><ul><li>  </li></ul><ul><li>disable(formElement) -> HTMLFormElement </li></ul><ul><li>Disables the form as whole. Form controls will be visible </li></ul><ul><li>but uneditable. </li></ul><ul><li>Disabling the form is done by iterating over form elements and </li></ul><ul><li>disabling them. </li></ul><ul><li>Example: </li></ul><ul><li><form id=&quot; disable-example &quot; class=&quot;example&quot; action=&quot;#&quot;> </li></ul><ul><li>        <input type=&quot;text&quot; name=&quot;username&quot; id=&quot;username&quot; value=&quot;Sulien&quot;> </li></ul><ul><li>        <input type=&quot;text&quot; name=&quot;age&quot; id=&quot;age&quot; value=&quot;23&quot; size=&quot;3&quot; > </li></ul><ul><li>        </li></ul><ul><li>        <button type=&quot;submit&quot;>Send</button> </li></ul><ul><li></form> </li></ul><ul><li>  </li></ul><ul><li>$( 'disable-example' ).disable(); </li></ul><ul><li>  </li></ul><ul><li>*Note: Keep in mind that disabled elements are skipped by serialize methods! You cannot serialize a disabled form. </li></ul>
  4. 4. <ul><li>enable :: Form </li></ul><ul><li>  </li></ul><ul><li>enable(formElement) -> HTMLFormElement </li></ul><ul><li>Enables a fully or partially disabled form. </li></ul><ul><li>Enabling the form is done by iterating over form elements and enabling them. </li></ul><ul><li>Example: </li></ul><ul><li>$( form ).enable() </li></ul><ul><li>*Note: This will enable all form controls regardless of how they were disabled (by scripting or by HTML attributes). </li></ul><ul><li>findFirstElement :: Form </li></ul><ul><li>  </li></ul><ul><li>findFirstElement(formElement) -> HTMLElement </li></ul><ul><li>  Finds first non-hidden, non-disabled form control. </li></ul><ul><li>The returned object is either an INPUT, SELECT or TEXTAREA element. This method is used by the focusFirstElement() method. </li></ul><ul><li>*Note: The result of this method is the element that comes first in the document order, not the tabindex order. </li></ul>
  5. 5. <ul><li>  focusFirstElement :: Form </li></ul><ul><li>  </li></ul><ul><li>focusFirstElement(formElement) -> HTMLFormElement </li></ul><ul><li>Gives keyboard focus to the first element of the form. </li></ul><ul><li>Uses Form.findFirstElement() to get the first element and calls activate() on it. This is useful for enhancing usability on your site by bringing focus on page load to forms such as search forms or contact forms where a user is ready to start typing right away. </li></ul><ul><li>getElements :: Form </li></ul><ul><li>  </li></ul><ul><li>getElements(formElement) -> array </li></ul><ul><li>  </li></ul><ul><li>Returns a collection of all form controls within a form. </li></ul><ul><li>*Note : OPTION elements are not included in the result; only their parent SELECT control is </li></ul>
  6. 6. <ul><li>  getInputs :: Form </li></ul><ul><li>  </li></ul><ul><li>getInputs(formElement [, type [, name]]) -> array </li></ul><ul><li>  </li></ul><ul><li>Returns a collection of all INPUT elements in a form. Use optional type and name arguments to restrict the search on these attributes. </li></ul><ul><li>Example: </li></ul><ul><li>var   form  = $( 'myform' ) </li></ul><ul><li>  </li></ul><ul><li>form.getInputs()       // -> all INPUT elements </li></ul><ul><li>form.getInputs( 'text' ) // -> only text inputs </li></ul><ul><li>  </li></ul><ul><li>var  buttons = form.getInputs( 'radio' ,  'education' ) </li></ul><ul><li>// -> only radio buttons of name &quot;education&quot; </li></ul><ul><li>  </li></ul><ul><li>// now disable these radio buttons: </li></ul><ul><li>buttons.invoke( 'disable' ) </li></ul><ul><li>*Note: Input elements are returned in the document order, not the tabindex order. </li></ul>
  7. 7. <ul><li>reset :: Form </li></ul><ul><li>  </li></ul><ul><li>reset(formElement) -> HTMLFormElement  </li></ul><ul><li>Resets a form to its default values. </li></ul><ul><li>Example: </li></ul><ul><li>Form.reset( 'contact' )  </li></ul><ul><li>// equivalent: </li></ul><ul><li>$( 'contact' ).reset() </li></ul><ul><li>  </li></ul><ul><li>// both have the same effect as pressing the reset button </li></ul><ul><li>  </li></ul><ul><li>This method allows you to programatically reset a form. It is a wrapper for the reset() method native to HTMLFormElement. </li></ul><ul><li>  </li></ul>
  8. 8. <ul><li>serialize :: Form </li></ul><ul><li>  </li></ul><ul><li>serialize(formElement) -> string </li></ul><ul><li>Serialize form data to a string suitable for Ajax requests. </li></ul><ul><li>The result is a string in form &quot;name=johnny&color=blue&quot;, suitable for parameters in an Ajax request. This method mimics the way browsers serialize forms natively so that form data can be sent without refreshing the page. </li></ul><ul><li>Example: </li></ul><ul><li><form id=&quot; person-example &quot; class=&quot;example&quot; action=&quot;#&quot;> </li></ul><ul><li>        <input type=&quot;text&quot; name=&quot;username&quot; id=&quot;username&quot; value=&quot;Sulien&quot; /> </li></ul><ul><li>        <input type=&quot;text&quot; name=&quot;age&quot; id=&quot;age&quot; size=&quot;3&quot; value=&quot;22&quot; /> </li></ul><ul><li>        </li></ul><ul><li>        <select name=&quot;hobbies&quot; id=&quot;hobbies&quot;> </li></ul><ul><li>                <option value=&quot;coding&quot;>Coding</option> </li></ul><ul><li>                <option value=&quot;swimming&quot;>Swimming</option> <!-- selected --> </li></ul><ul><li>                <option value=&quot;hiking&quot;>Hiking</option> </li></ul><ul><li>                <option value=&quot;drawing&quot;>Drawing</option> </li></ul><ul><li>        </select> </li></ul><ul><li>  </li></ul><ul><li>        <button type=&quot;submit&quot;>Send</button> </li></ul><ul><li></form> </li></ul><ul><li>  </li></ul><ul><li>$( 'person-example' ).serialize() </li></ul><ul><li>// -> 'username=sulien&age=22&hobbies=swimming' </li></ul>
  9. 9. <ul><li>serializeElements :: Form </li></ul><ul><li>  </li></ul><ul><li>serializeElements(elements) -> string </li></ul><ul><li>  </li></ul><ul><li>Serialize an array of form elements. </li></ul><ul><li>The preferred method to serialize a form is Form.serialize. However, with serializeElements you can serialize specific input elements of your choice, allowing you to specify a subset of form elements that you want to serialize data from. </li></ul><ul><li>Example: </li></ul><ul><li>To serialize all input elements of type &quot;text&quot;: </li></ul><ul><li>  </li></ul><ul><li>Form.serializeElements( $( 'myform' ).getInputs( 'text' ) ) </li></ul><ul><li>// -> serialized data </li></ul>
  10. 10. Form.Element <ul><li>This is a collection of methods that assist in dealing with form controls. They provide ways to focus, serialize, disable/enable or extract current value from a specific control. </li></ul><ul><li>In Prototype, Form.Element is also aliased Field and all these methods are available directly on INPUT, SELECT and TEXTAREA elements that have been extended.Therefore, these are equivalent: </li></ul><ul><ul><li>Form.Element.activate( 'myfield' )  </li></ul></ul><ul><ul><li>Field.activate( 'myfield' )  </li></ul></ul><ul><ul><li>$( 'myfield' ).activate()  </li></ul></ul><ul><li>Naturally, you should always prefer the shortest form suitable in a situation. Most of these methods also return the element itself (as indicated by the return type) for chainability. </li></ul>
  11. 11. Method of Form.Element <ul><li>activate :: Form.Element </li></ul><ul><li>  </li></ul><ul><li>activate(element) -> HTMLElement  </li></ul><ul><li>Gives focus to a form control and selects its contents if it is a text input. </li></ul><ul><li>Example: </li></ul><ul><li>This method is just a shortcut for focusing and selecting; therefore, these are equivalent: </li></ul><ul><li>  </li></ul><ul><li>Form.Element.focus( 'myelement' ).select() </li></ul><ul><li>$( 'myelement' ).focus().select() </li></ul><ul><li>$( 'myelement' ).activate() </li></ul><ul><li>  </li></ul>
  12. 12. <ul><li>clear :: Form.Element </li></ul><ul><li>  </li></ul><ul><li>clear(element) -> HTMLElement </li></ul><ul><li>  Clears the contents of a text input. </li></ul><ul><li>Example: </li></ul><ul><li>This code sets up a text field in a way that it clears its contents the first time it receives focus: </li></ul><ul><li>  </li></ul><ul><li>$( 'some_field' ).onfocus =  function () { </li></ul><ul><li>   // if already cleared, do nothing </li></ul><ul><li>   if  (this._cleared)  return </li></ul><ul><li>  </li></ul><ul><li>   // when this code is executed, &quot;this&quot; keyword will in fact be the field itself </li></ul><ul><li>   this.clear() </li></ul><ul><li>   this._cleared =  true </li></ul><ul><li>} </li></ul><ul><li>disable :: Form.Element </li></ul><ul><li>  </li></ul><ul><li>disable(element) -> HTMLElement </li></ul><ul><li>  </li></ul><ul><li>Disables a form control, effectively preventing its value to be changed until it is enabled again. </li></ul><ul><li>This method sets the native disabled property of an element to true. You can use this property to check the state of a control. </li></ul><ul><li>See the example in the Form.disable() </li></ul>
  13. 13. <ul><li>enable :: Form.Element </li></ul><ul><li>  </li></ul><ul><li>enable(element) -> HTMLElement </li></ul><ul><li>  Enables a previously disabled form control. </li></ul><ul><li>See the interactive example in the Form.disable() method, which is basically it. </li></ul><ul><li>focus :: Form.Element </li></ul><ul><li>  </li></ul><ul><li>focus(element) -> HTMLElement  </li></ul><ul><li>Gives keyboard focus to an element. </li></ul><ul><li>Example: </li></ul><ul><li>Form.Element.focus( 'searchbox' )  </li></ul><ul><li>// equivalent: </li></ul><ul><li>$( 'searchbox' ).focus() </li></ul><ul><li>getValue :: Form.Element </li></ul><ul><li>  </li></ul><ul><li>getValue(element) -> string | array </li></ul><ul><li>  </li></ul><ul><li>Returns the current value of a form control. A string is returned for most controls; only multiple select boxes return an array of values. The global shortcut for this method is $F(). </li></ul>
  14. 14. <ul><li>  present :: Form.Element </li></ul><ul><li>  </li></ul><ul><li>present(element) -> boolean  </li></ul><ul><li>Returns true if a text input has contents, false otherwise. </li></ul><ul><li>Example: </li></ul><ul><li><form id=&quot; present-example &quot; class=&quot;example&quot; action=&quot;#&quot;> </li></ul><ul><li>        <input type=&quot;text&quot; name=&quot;username&quot; id=&quot;username&quot;/> </li></ul><ul><li>        <input type=&quot;text&quot; name=&quot;email&quot; id=&quot;email&quot; size=&quot;30&quot;/> </li></ul><ul><li>        </li></ul><ul><li>        <button type=&quot;submit&quot;>Send</button> </li></ul><ul><li></form> </li></ul><ul><li><div id=&quot;msg&quot; class=&quot;notification&quot;></div> </li></ul><ul><li>   </li></ul><ul><li>$( 'present-example' ).onsubmit =  function (){ </li></ul><ul><li>   var  valid, msg = $( 'msg' ) </li></ul><ul><li>  </li></ul><ul><li>   // are both fields present? </li></ul><ul><li>   valid = $(this.username).present() && $( </li></ul><ul><li>  </li></ul><ul><li>   if  (valid) { </li></ul><ul><li>     // in real world we would return true here to allow the form to be submitted </li></ul><ul><li>     // return true </li></ul><ul><li>     msg.update( 'Passed validation!' ).style.color =  'green' </li></ul><ul><li>   }  else  { </li></ul><ul><li>     msg.update( 'Please fill out all the fields.' ).style.color =  'red' </li></ul><ul><li>   } </li></ul><ul><li>   return   false </li></ul><ul><li>}   </li></ul>
  15. 15. <ul><li>  select :: Form.Element </li></ul><ul><li>  </li></ul><ul><li>select(element) -> HTMLElement </li></ul><ul><li>  </li></ul><ul><li>Selects the current text in a text input. </li></ul><ul><li>Example: </li></ul><ul><li>Some search boxes are set up that they auto-select their content when they receive focus. </li></ul><ul><li>  </li></ul><ul><li>$( 'searchbox' ).onfocus =  function () { </li></ul><ul><li> this ) </li></ul><ul><li>   // however, much shorter is to just call: </li></ul><ul><li> </li></ul><ul><li>} </li></ul><ul><li>serialize :: Form.Element </li></ul><ul><li>  </li></ul><ul><li>serialize(element) -> string  </li></ul><ul><li>Creates an URL-encoded string representation of a form control in the name=value format. </li></ul><ul><li>The result of this method is a string suitable for Ajax requests. However, it serializes only a single element - if you need to serialize the whole form use Form.serialize() instead. </li></ul><ul><li>  </li></ul><ul><li>*Notes:  </li></ul><ul><li>Serializing a disabled control or a one without a name will always result in an empty string.  </li></ul><ul><li>If you simply need an element's value for reasons other than Ajax requests, use getValue() instead. </li></ul>