FormJS
This library provides a simple API to manipulate a form or its related elements with JavaScript. Supports IE10+, all modern browsers, and mobile.
It's important for you to use native form elements (i.e. <select>
, <input>
, etc) because they come with critical built-in
logic needed for the interactions that users expect. Like tabbing to fields, pressing enter or spacebar to commit a
dropdown item, mobile keyboard input triggering, etc.
Benefits
- Automatic form data binding (JSON data and JS object literals)
- Use CSS to easily customize hard-to-style native elements (i.e. dropdowns)
- Listen to user events on forms
- Easily change and update form elements and their values with JavaScript
- Trigger events programmatically
Support
- Checkboxes
- Radio Buttons
- Input Fields
- Dropdowns (Select Elements)
- Text Areas
- Entire forms
Usage
You can quickly start using the Form class as a standalone package, by using one of the pre-built javascript files. Alternatively, you can also use the source files directly if you are running your own build processes.
Styling form elements
Let's say you wanted to style a dropdown menu with the following html:
Maryland Virginia Washington, DC
With this library, you can do this:
var Dropdown = Dropdown;var dropdown = el: document0;
Which will change your HTML into this:
Virginia Maryland Virginia Washington, DC Maryland Virginia Washington, DC
Then you can style the dropdown using CSS (and just hide the <select>
element).
Programmatically change the element's value
Each class comes with a set of utility methods so you can change the elements via JS. Using the example above, you could do the following:
// set the selected value programmaticallydropdown; // get the new data valuedropdown; // => "DC" // get the display valuedropdown; // => "Washington, DC"
Listening to change events
You can also listen to events on form elements. Given the following input element...
You can do the following:
var InputField = InputField;var inputField = el: document0 { // user has finished typing into the field! } { // the user has typed a key into the field! };// set the valueinputField; // set new value// get the new valueinputField; // => "My text"
Detect when user changes any value in a form
Suppose you have this HTML:
Credit Card Mortgage HELO Student Loan
You can detect when a user changes any of the form's elements like so:
var Form = Form;var form = el: documentbody0 { // a value has been changed! console; };form;
Examples
Examples can be found in the examples page.
API Documentation
Form
The form class allows you to instantiate an entire form (along with its nested elements: <input>
, <textarea>
, <select>
).
Form.constructor
To create an instance of a form, you need to pass the form element (and a set of options if you'd like).
let formElement = document0;var form = el: formElement;
Form.setup()
Setup just does a few standard setup tasks, like bind event listeners and such. This method is necessary after instantiation in order to begin working with your form instance.
Form.getCurrentValues()
A utility method to grab a serialized object of all of the form elements and their current values. See below.
let formElement = document;var form = el: formElement;form;console; /*[{ disabled: false, name: "location", required: false, value: "Arlington, VA"}]*/
Form.clear()
Clears all fields inside of the form. It also unchecks any checkboxes and resets any dropdown selections.
let formElement = document;let locationInput = document;let nameInput = document;var form = el: formElement;form;locationInputvalue // => "Arlington, VA"nameInputvalue // => "John Smith"formclear;locationInputvalue // => ""nameInputvalue // => ""
Form.disable()
Disables all form elements.
Form.enable()
Re-enables all form elements.