The jQuery Form Helper plugin is a lightweight wrapper for two convenience functions to speed up form development: Text Replacement in <input> fields and Ajax Scaffolding for <form> elements. At only 2.6k compressed, Form Helper is light enough to be included in any project.
Once you download Form Helper, include it in the <head> after jQuery:
Adding default instructional text inside a text box is a common and convenient method of saving space in forms. Form Helper allows you to implement this quickly without requiring you to modify your markup. Run $(elem).textReplacement() on any text input with a default value:
Form Helper’s text replacement has a few other notable features.
- An “active” class is added to any <input> that receives focus and is removed when focus is lost (on blur).
- A “data entered” class is also added to <input>s on focus but is only removed on blur if the user hasn’t entered any data.
- Default classes for the “active” and “data entered” states exist (active_formHelper and data_entered_formHelper respectively) but they can be changed by passing options to $(elem).textReplacement().
- Changing the <input>’s type from “password” to “text” doesn’t work in all browsers (Internet Explorer). To remedy this, an <input type=”text” /> with the same class and style attributes is created and swapped in and out for each <input type=”password” />. The limitation of this technique is that any CSS applied to the original <input> by ID will not effect the replacement.
Submitting a <form> with ajax is made quick and easy by jQuery. Form Helper makes this a little bit quicker by setting a few things up automatically:
- An onSubmit handler for the form with $(elem).submit()
- Optionally calls a supplied validation function and only continues if it returns true
- Submits with jQuery.Ajax() and fills in data (with $(elem).serialize()), type (the <form>’s method attribute) and url (the <form>’s action attribute) automatically, allowing you to supply the other options. Any option accepted by jQuery.Ajax() is also accepted by $(elem).scaffoldAjax().
- Returns false to stop the form from submitting.