{"id":15541887,"url":"https://github.com/markcellus/form-js","last_synced_at":"2026-03-17T16:02:31.235Z","repository":{"id":24164392,"uuid":"27554561","full_name":"markcellus/form-js","owner":"markcellus","description":"Easily create web forms. Supports Meteor, AngularJS, React, Polymer and any CSS library, e.g. Bootstrap.","archived":false,"fork":false,"pushed_at":"2017-10-09T08:30:17.000Z","size":3160,"stargazers_count":15,"open_issues_count":3,"forks_count":4,"subscribers_count":4,"default_branch":"master","last_synced_at":"2026-02-09T13:49:41.671Z","etag":null,"topics":["checkbox","checkboxes","dropdown","dropdowns","fields","forms","html","input","javascript","radio-buttons","textarea","webforms"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/markcellus.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-12-04T18:44:53.000Z","updated_at":"2024-05-30T04:47:19.000Z","dependencies_parsed_at":"2022-08-29T22:21:35.505Z","dependency_job_id":null,"html_url":"https://github.com/markcellus/form-js","commit_stats":null,"previous_names":["mkay581/form-js","mkay581/formjs"],"tags_count":57,"template":false,"template_full_name":null,"purl":"pkg:github/markcellus/form-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markcellus%2Fform-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markcellus%2Fform-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markcellus%2Fform-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markcellus%2Fform-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/markcellus","download_url":"https://codeload.github.com/markcellus/form-js/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markcellus%2Fform-js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30626906,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-17T14:16:03.965Z","status":"ssl_error","status_checked_at":"2026-03-17T14:16:03.380Z","response_time":56,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["checkbox","checkboxes","dropdown","dropdowns","fields","forms","html","input","javascript","radio-buttons","textarea","webforms"],"created_at":"2024-10-02T12:19:58.611Z","updated_at":"2026-03-17T16:02:31.218Z","avatar_url":"https://github.com/markcellus.png","language":"JavaScript","readme":"[![Build Status](https://travis-ci.org/mkay581/form-js.svg?branch=master)](https://travis-ci.org/mkay581/form-js)\n[![npm version](https://badge.fury.io/js/form-js.svg)](https://badge.fury.io/js/form-js)\n\n# FormJS\n\nThis library provides a simple API to manipulate a form or its related elements with JavaScript.\nSupports IE10+, all modern browsers, and mobile.\n\nIt's important for you to use native form elements (i.e. `\u003cselect\u003e`, `\u003cinput\u003e`, etc) because they come with critical built-in\nlogic needed for the interactions that users expect. Like tabbing to fields, pressing enter or spacebar to commit a \ndropdown item, mobile keyboard input triggering, etc.\n\n## Benefits\n\n * Automatic form data binding (JSON data and JS object literals)\n * Use CSS to easily customize hard-to-style native elements (i.e. dropdowns)\n * Listen to user events on forms \n * Easily change and update form elements and their values with JavaScript\n * Trigger events programmatically\n\n## Support\n\n * Checkboxes\n * Radio Buttons\n * Input Fields\n * Dropdowns (Select Elements)\n * Text Areas\n * Entire forms\n\n## Usage\n\nYou can quickly start using the Form class as a standalone package, by using one of the [pre-built javascript files](/dist). Alternatively, you can also use the [source files](/src) directly if you are running\nyour own build processes.\n\n### Styling form elements\n\nLet's say you wanted to style a dropdown menu with the following html:\n\n```html\n\u003cselect\u003e\n    \u003coption value=\"MD\"\u003eMaryland\u003c/option\u003e\n    \u003coption value=\"VA\" selected\u003eVirginia\u003c/option\u003e\n    \u003coption value=\"DC\"\u003eWashington, DC\u003c/option\u003e\n\u003c/select\u003e\n```\n\nWith this library, you can do this:\n\n```javascript\nvar Dropdown = require('form-js').Dropdown;\nvar dropdown = new Dropdown({\n    el: document.getElementsByTagName('select')[0]\n});\n```\n\nWhich will change your HTML into this:\n\n```html\n\u003cdiv class=\"dropdown-wrapper\"\u003e\n    \u003cdiv class=\"dropdown-container\"\u003e\n        \u003cdiv class=\"dropdown-value-container\"\u003eVirginia\u003c/div\u003e\n        \u003cdiv class=\"dropdown-option-container\"\u003e\n            \u003cdiv class=\"dropdown-option\" data-value=\"MD\"\u003eMaryland\u003c/div\u003e\n            \u003cdiv class=\"dropdown-option dropdown-option-selected\" data-value=\"VA\"\u003eVirginia\u003c/div\u003e\n            \u003cdiv class=\"dropdown-option\" data-value=\"DC\"\u003eWashington, DC\u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cselect\u003e\n        \u003coption value=\"MD\"\u003eMaryland\u003c/option\u003e\n        \u003coption value=\"VA\" selected\u003eVirginia\u003c/option\u003e\n        \u003coption value=\"DC\"\u003eWashington, DC\u003c/option\u003e\n    \u003c/select\u003e\n\u003c/div\u003e\n```\n\nThen you can style the dropdown using CSS (and just hide the `\u003cselect\u003e` element).\n\n\n### Programmatically change the element's value\n\nEach class comes with a set of utility methods so you can change the elements via JS. Using the example above, you\ncould do the following:\n\n```javascript\n// set the selected value programmatically\ndropdown.setValue('DC');\n\n// get the new data value\ndropdown.getValue(); // =\u003e \"DC\"\n\n// get the display value\ndropdown.getDisplayValue(); // =\u003e \"Washington, DC\"\n```\n\n### Listening to change events\n\nYou can also listen to events on form elements. Given the following input element...\n\n\n```html\n\u003cinput type=\"text\" value=\"\" placeholder=\"Enter text here\" /\u003e\n```\n\nYou can do the following:\n\n```javascript\nvar InputField = require('form-js').InputField;\nvar inputField = new InputField({\n    el: document.getElementsByTagName('input')[0],\n    onChange: function (el) {\n        // user has finished typing into the field!\n    },\n    onKeyDownChange: function (el) {\n        // the user has typed a key into the field!\n    }\n});\n// set the value\ninputField.setValue('My text'); // set new value\n// get the new value\ninputField.getValue(); // =\u003e \"My text\"\n```\n\n### Detect when user changes any value in a form\n\nSuppose you have this HTML:\n\n```html\n\u003cform class=\"debt-info-form\"\u003e\n    \u003cinput type=\"text\" name=\"first_name\" value=\"\" /\u003e\n    \u003cselect name=\"loan_type\"\u003e\n        \u003coption value=\"CC\"\u003eCredit Card\u003c/option\u003e\n        \u003coption value=\"Mortgage\"\u003eMortgage\u003c/option\u003e\n        \u003coption value=\"HELO\"\u003eHELO\u003c/option\u003e\n        \u003coption value=\"Student Loan\"\u003eStudent Loan\u003c/option\u003e\n    \u003c/select\u003e\n\u003c/form\u003e\n```\n\nYou can detect when a user changes any of the form's elements like so:\n\n```javascript\nvar Form = require('form-js').Form;\nvar form = new Form({\n    el: document.body.getElementsByClassName('debt-info-form')[0],\n    onValueChange: function (val, el) {\n        // a value has been changed!\n       console.log('new value: ' + val);\n    }\n});\nform.setup();\n```\n\n## Examples\n \nExamples can be found in the [examples](https://github.com/mkay581/formjs/blob/master/examples) page.\n\n## API Documentation\n\n### Form\n\nThe form class allows you to instantiate an entire form (along with its nested elements: `\u003cinput\u003e`, `\u003ctextarea\u003e`, `\u003cselect\u003e`).\n\n#### Form.constructor\n\nTo create an instance of a form, you need to pass the form element (and a set of options if you'd like).\n\n```javascript\nlet formElement = document.getElementByTagName('form')[0];\nvar form = new Form({\n   el: formElement\n});\n```\n\n#### Form.setup()\n\nSetup just does a few standard setup tasks, like bind event listeners and such. This method is necessary after\ninstantiation in order to begin working with your form instance.\n\n\n#### Form.getCurrentValues()\n\nA utility method to grab a serialized object of all of the form elements and their current values. See below.\n\n```html\n\u003cform id=\"my-form\"\u003e\n    \u003cinput type=\"text\" name=\"location\" value=\"Arlington, VA\" required /\u003e\n\u003c/form\u003e\n```\n\n```javascript\nlet formElement = document.getElementById('my-form');\nvar form = new Form({\n   el: formElement\n});\nform.setup();\nconsole.log(form.getCurrentValues());\n\n/*\n[{\n    disabled: false,\n    name: \"location\",\n    required: false,\n    value: \"Arlington, VA\"\n}]\n*/\n```\n\n#### Form.clear()\n\nClears all fields inside of the form. It also unchecks any checkboxes and resets any dropdown selections.\n\n```html\n\u003cform id=\"my-form\"\u003e\n    \u003cinput type=\"text\" id=\"location-input\" name=\"location\" value=\"Arlington, VA\" required /\u003e\n    \u003cinput type=\"text\" id=\"name-input\" name=\"name\" value=\"John Smith\" required /\u003e\n    \u003cinput type=\"number\" name=\"age\" value=\"Arlington, VA\" required /\u003e\n\u003c/form\u003e\n```\n\n```javascript\nlet formElement = document.getElementById('my-form');\nlet locationInput = document.getElementById('location-input');\nlet nameInput = document.getElementById('name-input');\nvar form = new Form({\n   el: formElement\n});\nform.setup();\nlocationInput.value // =\u003e \"Arlington, VA\"\nnameInput.value // =\u003e \"John Smith\"\nform.clear();\nlocationInput.value // =\u003e \"\"\nnameInput.value // =\u003e \"\"\n\n```\n\n#### Form.disable()\n\nDisables all form elements.\n\n#### Form.enable()\n\nRe-enables all form elements.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkcellus%2Fform-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarkcellus%2Fform-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkcellus%2Fform-js/lists"}