{"id":16427558,"url":"https://github.com/cferdinandi/form-saver","last_synced_at":"2025-03-16T17:34:43.268Z","repository":{"id":11942806,"uuid":"14512695","full_name":"cferdinandi/form-saver","owner":"cferdinandi","description":"A simple script that lets users save and reuse form data.","archived":false,"fork":false,"pushed_at":"2019-09-27T14:29:34.000Z","size":123,"stargazers_count":70,"open_issues_count":6,"forks_count":8,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-20T21:10:11.614Z","etag":null,"topics":["forms","javascript","javascript-plugin","localstorage","no-dependencies","vanilla-js"],"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/cferdinandi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-11-19T03:11:15.000Z","updated_at":"2024-08-07T17:55:17.000Z","dependencies_parsed_at":"2022-08-30T00:11:48.048Z","dependency_job_id":null,"html_url":"https://github.com/cferdinandi/form-saver","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cferdinandi%2Fform-saver","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cferdinandi%2Fform-saver/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cferdinandi%2Fform-saver/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cferdinandi%2Fform-saver/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cferdinandi","download_url":"https://codeload.github.com/cferdinandi/form-saver/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221666411,"owners_count":16860415,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["forms","javascript","javascript-plugin","localstorage","no-dependencies","vanilla-js"],"created_at":"2024-10-11T08:13:21.488Z","updated_at":"2024-10-27T10:59:26.239Z","avatar_url":"https://github.com/cferdinandi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Form Saver [![Build Status](https://travis-ci.org/cferdinandi/form-saver.svg)](https://travis-ci.org/cferdinandi/form-saver)\nA handy little script that lets users save and reuse form data.\n\n[Download Form Saver](https://github.com/cferdinandi/form-saver/archive/master.zip) / [View the demo](http://cferdinandi.github.io/form-saver/)\n\n\n\u003chr\u003e\n\n### Want to learn how to write your own vanilla JS plugins? Check out [\"The Vanilla JS Guidebook\"](https://gomakethings.com/vanilla-js-guidebook/) and level-up as a web developer. 🚀\n\n\u003chr\u003e\n\n\n\n## Getting Started\n\nCompiled and production-ready code can be found in the `dist` directory. The `src` directory contains development code.\n\n### 1. Include Form Saver on your site.\n\n```html\n\u003clink rel=\"stylesheet\" href=\"dist/css/form-saver.css\"\u003e\n\u003cscript src=\"dist/js/form-saver.js\"\u003e\u003c/script\u003e\n```\n\n### 2. Add the markup to your HTML.\n\n```html\n\u003cform id=\"form-id\"\u003e\n\t\u003cdiv\u003e\n\t\t\u003clabel\u003eText Input\u003c/label\u003e\n\t\t\u003cinput name=\"input\" type=\"text\"\u003e\n\t\u003c/div\u003e\n\n\t\u003cdiv\u003e\n\t\t\u003clabel\u003eText Input to Ignore\u003c/label\u003e\n\t\t\u003cinput data-form-no-save name=\"input-ignore\" type=\"text\"\u003e\n\t\u003c/div\u003e\n\n\t\u003cdiv\u003e\n\t\t\u003clabel\u003e\n\t\t\t\u003cinput type=\"checkbox\" name=\"checkbox1\" value=\"1\"\u003e\n\t\t\tCheckbox 1\n\t\t\u003c/label\u003e\n\t\u003c/div\u003e\n\n\t\u003cdiv\u003e\n\t\t\u003clabel\u003e\n\t\t\u003cinput type=\"checkbox\" name=\"checkbox2\" value=\"2\"\u003e\n\t\t\tCheckbox 2\n\t\t\u003c/label\u003e\n\t\u003c/div\u003e\n\n\t\u003cdiv\u003e\n\t\t\u003clabel\u003e\n\t\t\u003cinput type=\"radio\" name=\"radioset\" value=\"radio1\"\u003e\n\t\t\tRadio 1\n\t\t\u003c/label\u003e\n\t\u003c/div\u003e\n\n\t\u003cdiv\u003e\n\t\t\u003clabel\u003e\n\t\t\u003cinput type=\"radio\" name=\"radioset\" value=\"radio2\"\u003e\n\t\t\tRadio 2\n\t\t\u003c/label\u003e\n\t\u003c/div\u003e\n\n\t\u003cdiv\u003e\n\t\t\u003cselect name=\"select\"\u003e\n\t\t\t\u003coption\u003eSelect 1\u003c/option\u003e\n\t\t\t\u003coption\u003eSelect 2\u003c/option\u003e\n\t\t\t\u003coption\u003eSelect 3\u003c/option\u003e\n\t\t\u003c/select\u003e\n\t\u003c/div\u003e\n\n\t\u003cdiv\u003e\n\t\t\u003ctextarea name=\"textarea\"\u003e\u003c/textarea\u003e\n\t\u003c/div\u003e\n\n\t\u003cdiv class=\"form-saver\"\u003e\n\t\t\u003cdiv data-form-status\u003e\u003c/div\u003e\n\t\t\u003cdiv\u003e\n\t\t\t\u003cbutton data-form-save=\"#form-id\"\u003e\n\t\t\t\tSave Form Data\n\t\t\t\u003c/button\u003e\n\t\t\t\u003cbutton data-form-delete=\"#form-id\"\u003e\n\t\t\t\tDelete Form Data\n\t\t\t\u003c/button\u003e\n\t\t\u003c/div\u003e\n\t\u003c/div\u003e\n\u003c/form\u003e\n```\n\nCreate your forms as normal. All forms must have an ID, all form fields must have a name attribute, and checkboxes and radio buttons must also have a `value` attribute, or they won't work properly with Form Saver. Use the `[data-form-no-save]` data attribute to omit a form field from being saved.\n\nYou can use `a` elements instead of buttons to save and delete data:\n\n```html\n\u003ca data-form-save=\"#form-id\" href=\"#\"\u003e\n\tSave Form Data\n\u003c/a\u003e\n\u003ca data-form-delete=\"#form-id\" href=\"#\"\u003e\n\tDelete Form Data\n\u003c/a\u003e\n```\n\n### 3. Initialize Form Saver.\n\n```html\n\u003cscript\u003e\n\tformSaver.init();\n\u003c/script\u003e\n```\n\nIn the footer of your page, after the content, initialize Form Saver. And that's it, you're done. Nice work!\n\n\n\n## Installing with Package Managers\n\nYou can install Form Saver with your favorite package manager.\n\n* **NPM:** `npm install cferdinandi/form-saver`\n* **Bower:** `bower install https://github.com/cferdinandi/form-saver.git`\n* **Component:** `component install cferdinandi/form-saver`\n\n\n\n## Working with the Source Files\n\nIf you would prefer, you can work with the development code in the `src` directory using the included [Gulp build system](http://gulpjs.com/). This compiles, lints, and minifies code.\n\n### Dependencies\nMake sure these are installed first.\n\n* [Node.js](http://nodejs.org)\n* [Gulp](http://gulpjs.com) `sudo npm install -g gulp`\n\n### Quick Start\n\n1. In bash/terminal/command line, `cd` into your project directory.\n2. Run `npm install` to install required files.\n3. When it's done installing, run one of the task runners to get going:\n\t* `gulp` manually compiles files.\n\t* `gulp watch` automatically compiles files when changes are made and applies changes using [LiveReload](http://livereload.com/).\n\n\n\n## Options and Settings\n\nForm Saver includes smart defaults and works right out of the box. But if you want to customize things, it also has a robust API that provides multiple ways for you to adjust the default options and settings.\n\n### Global Settings\n\nYou can pass options and callbacks into Form Saver through the `init()` function:\n\n```javascript\nformSaver.init({\n\tselectorStatus: '[data-form-status]', // Selector for the status container (must be a valid CSS selector)\n\tselectorSave: '[data-form-save]', // Selector for the save button (must be a valid CSS selector)\n\tselectorDelete: '[data-form-delete]', // Selector for the delete button (must be a valid CSS selector)\n\tselectorIgnore: '[data-form-no-save]', // Selector for fields to ignore (must be a valid CSS selector)\n\tdeleteClear: true, // Boolean. Reload the page after deleting form data.\n\tsaveMessage: 'Saved!', // Message to display when form data is successfully saved.\n\tdeleteMessage: 'Deleted!', // Message to display when form data is successfully deleted.\n\tsaveClass: '', // Class to add to save success message \u003cdiv\u003e\n\tdeleteClass: '', // Class to add to delete success message \u003cdiv\u003e\n\tinitClass: 'js-form-saver', // Class added to `\u003chtml\u003e` element when initiated\n\tcallbackSave: function ( btn, form ) {}, // Function to run after a form is saved\n\tcallbackDelete: function ( btn, form ) {}, // Function to run after a form is deleted\n\tcallbackLoad: function ( form ) {} // Function to run after form data is loaded from storage\n});\n```\n\n***Note:*** *If you change the `selectorSave` or `selectorDelete`, you still need to include the `[data-form-save]` and `[data-form-delete]` attributes in order to pass in the selector for the form.*\n\n### Override settings with data attributes\n\nForm Saver lets you override global settings on a form-by-form basis using the `[data-options]` data attribute:\n\n```html\n\u003cbutton\n\tdata-form-save\n\tdata-options='{\n\t\t\t\t\t\"saveMessage\": \"Saved!\",\n\t\t\t\t\t\"saveClass\": \"alert-success\"\n\t              }'\n\u003e\n\tSave Form Data\n\u003c/button\u003e\n\n\u003cbutton\n\tdata-form-delete\n\tdata-options='{\n\t\t\t\t\t\"deleteMessage\": \"Deleted!\",\n\t\t\t\t\t\"deleteClass\": \"alert-success\",\n\t\t\t\t\t\"deleteClear\": true\n\t              }'\n\u003e\n\tDelete Form Data\n\u003c/button\u003e\n```\n\n**Note:** You must use [valid JSON](http://jsonlint.com/) in order for the `data-options` overrides to work.\n\n### Use Form Saver events in your own scripts\n\nYou can also call Form Saver events in your own scripts.\n\n#### saveForm()\nSave a form's data.\n\n```javascript\nformSaver.saveForm(\n\tbtn, // Node that saves the form. ex. document.querySelector('#save-btn')\n\tformID, // ID of the form to save. ex. #form-id\n\toptions, // Classes and callbacks. Same options as those passed into the init() function.\n\tevent // Optional, if a DOM event was triggered.\n);\n```\n\n**Example**\n\n```javascript\nvar options = { saveMessage: 'Your data has been saved. Booya!' };\nformSaver.saveForm( null, '#form', options );\n```\n\n#### deleteForm()\nDelete a form's data.\n\n```javascript\nformSaver.deleteForm = function (\n\tbtn, // Node that deletes the form. ex. document.querySelector('#delete-btn')\n\tformID, // ID of the form to save. ex. #form-id\n\toptions, // Classes and callbacks. Same options as those passed into the init() function.\n\tevent // Optional, if a DOM event was triggered.\n);\n```\n\n**Example**\n\n```javascript\nvar btn = document.querySelector('[data-form-delete]');\nvar formID = btn.form.id;\nformSaver.deleteForm( btn, formID );\n```\n\n#### loadForm()\nLoad a form's saved data.\n\n```javascript\nformSaver.loadForm = function (\n\tform, // Form node to delete. ex. document.querySelector('#form')\n\toptions // Classes and callbacks. Same options as those passed into the init() function.\n);\n```\n\n**Example**\n\n```javascript\nvar forms = document.forms;\nfor (var i = forms.length; i--;) {\n\tvar form = forms[i];\n\tformSaver.loadForm( form );\n}\n```\n\n#### destroy()\nDestroy the current `formSaver.init()`. This is called automatically during the `init` function to remove any existing initializations.\n\n```javascript\nformSaver.destroy();\n```\n\n\n\n## Browser Compatibility\n\nForm Saver works in all modern browsers, and IE 10 and above. You can extend browser support back to IE 9 with the [classList.js polyfill](https://github.com/eligrey/classList.js/).\n\nForm Saver is built with modern JavaScript APIs, and uses progressive enhancement. If the JavaScript file fails to load, or if your site is viewed on older and less capable browsers, save and delete data buttons will not be displayed.\n\n\n\n## How to Contribute\n\nIn lieu of a formal style guide, take care to maintain the existing coding style. Don't forget to update the version number, the changelog (in the `readme.md` file), and when applicable, the documentation.\n\n\n\n## License\n\nThe code is available under the [MIT License](LICENSE.md).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcferdinandi%2Fform-saver","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcferdinandi%2Fform-saver","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcferdinandi%2Fform-saver/lists"}