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. , , 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:
<option value="MD">Marylandoption>
<option value="VA" selected>Virginiaoption>
<option value="DC">Washington, DCoption>
select>
With this library, you can do this:
var dropdown = new Dropdown({
el: document.getElementsByTagName('select')[0]
});
Which will change your HTML into this:
<div class="dropdown-container">
<div class="dropdown-value-container">Virginiadiv>
<div class="dropdown-option-container">
<div class="dropdown-option" data-value="MD">Marylanddiv>
<div class="dropdown-option dropdown-option-selected" data-value="VA">Virginiadiv>
<div class="dropdown-option" data-value="DC">Washington, DCdiv>
div>
div>
<select>
<option value="MD">Marylandoption>
<option value="VA" selected>Virginiaoption>
<option value="DC">Washington, DCoption>
select>
div>
Then you can style the dropdown using CSS (and just hide the 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:
dropdown.setValue('DC');
// get the new data value
dropdown.getValue(); // => "DC"
// get the display value
dropdown.getDisplayValue(); // => "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 = new InputField({
el: document.getElementsByTagName('input')[0],
onChange: function (el) {
// user has finished typing into the field!
},
onKeyDownChange: function (el) {
// the user has typed a key into the field!
}
});
// set the value
inputField.setValue('My text'); // set new value
// get the new value
inputField.getValue(); // => "My text"
Detect when user changes any value in a form
Suppose you have this HTML:
<input type="text" name="first_name" value="" />
<select name="loan_type">
<option value="CC">Credit Cardoption>
<option value="Mortgage">Mortgageoption>
<option value="HELO">HELOoption>
<option value="Student Loan">Student Loanoption>
select>
form>
You can detect when a user changes any of the form's elements like so:
var form = new Form({
el: document.body.getElementsByClassName('debt-info-form')[0],
onValueChange: function (val, el) {
// a value has been changed!
console.log('new value: ' + val);
}
});
form.setup();
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: ,