Formizer JavaScript LibraryFormizer JavaScript Library
Vanilla js library (Formizer) to get and set all entries within a form automaticallyFormizer JavaScript Library
Vanilla js library (Formizer) to get and set all entries within a form automaticallyOverview
With these 2 global function packed in small footprint js library file, you can make your javascript coding process faster. In manually way if you have 10 input element entries in your html form you have to process those input per element. Required at least 2 lines of code to get or set value for each element. so we already able to imagine you will need 2x10 lines of code just to get the input value, and so do with the load data process from your data sources to html form. It means for both process you will need roughly +-40 lines of code. Using this js library you will need at most 4 lines of code for both get and set value from/to your html form.
Features
This packages includes mini project (index.html css js) to show how to use this library.
Within formizer.min.js there are 2 global function :
1. getFormEntries : function to get all elements input's value automatically
2. setFormEntries : function to set all elements input's value automatically
Requirements
Standar browser with javascript enabled
Instructions
1. link formizer.min.js to your script src attribute, included in your html file
2. wrap all your input elements with div or form
3. set those div or form id attribute. ex: frmProfile
4. each input element required to have below mention attributes :
- data-type = type of data input element.
available types are : txt, txtarea, num, chk, rad, sel, date and time
- data-field = label for input element required by getter or setter function to get or set the value.
ex:
5. get / set your value automatic using at most this 3 lines of code
const thisForm = document.getElementById('frmProfile');
const frm = await getFormEntries(form);
or
const thisForm = document.getElementById('frmProfile');
const dataset = [ { firstname: 'Joe Doe', ... }];
const frm = await setFormEntries(form, dataset);
** Example how to implement can be found in index.html
Other items by this author
Category | Scripts & Code / JavaScript / Forms |
First release | 15 May 2024 |
Last update | 17 June 2024 |
Files included | .css, .html, Javascript .js |
Tags | html form, auto getter and setter form html, small library, js library for html form |