Security News
Highlights from the 2024 Rails Community Survey
A record 2,709 developers participated in the 2024 Ruby on Rails Community Survey, revealing key tools, practices, and trends shaping the Rails ecosystem.
Create better ui form elements. Supports IE9+, all modern browsers, and mobile.
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.
Let's say you wanted to style a dropdown menu with the following html:
<select>
<option value="MD">Maryland</option>
<option value="VA" selected>Virginia</option>
<option value="DC">Washington, DC</option>
</select>
With this library, you can do this:
var Dropdown = require('form-js').Dropdown;
var dropdown = new Dropdown({
el: document.getElementsByTagName('select')[0]
});
Which will change your HTML into this:
<div class="dropdown-wrapper">
<div class="dropdown-container">
<div class="dropdown-value-container">Virginia</div>
<div class="dropdown-option-container">
<div class="dropdown-option" data-value="MD">Maryland</div>
<div class="dropdown-option dropdown-option-selected" data-value="VA">Virginia</div>
<div class="dropdown-option" data-value="DC">Washington, DC</div>
</div>
</div>
<select>
<option value="MD">Maryland</option>
<option value="VA" selected>Virginia</option>
<option value="DC">Washington, DC</option>
</select>
</div>
Then you can style the dropdown using CSS (and just hide the <select>
element).
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 programmatically
dropdown.setValue('DC');
// get the new data value
dropdown.getValue(); // => "DC"
// get the display value
dropdown.getDisplayValue(); // => "Washington, DC"
You can also listen to events on form elements. Given the following input element...
<input type="text" value="" placeholder="Enter text here" />
You can do the following:
var InputField = require('form-js').InputField;
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"
Suppose you have this HTML:
<form class="debt-info-form">
<input type="text" name="first_name" value="" />
<select name="loan_type">
<option value="CC">Credit Card</option>
<option value="Mortgage">Mortgage</option>
<option value="HELO">HELO</option>
<option value="Student Loan">Student Loan</option>
</select>
</form>
You can detect when a user changes any of the form's elements like so:
var Form = require('form-js').Form;
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();
To create a build and inject files into a 'dist' folder at the root of your project, just run:
grunt bt:build
Examples can be found in the examples page.
Release history can be found in the releases page.
FAQs
Create better ui form elements. Supports IE9+, all modern browsers, and mobile.
The npm package form-js receives a total of 84 weekly downloads. As such, form-js popularity was classified as not popular.
We found that form-js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A record 2,709 developers participated in the 2024 Ruby on Rails Community Survey, revealing key tools, practices, and trends shaping the Rails ecosystem.
Security News
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.