5.0.0 • Published 5 months ago
sp-form-data v5.0.0
SPFormData
VanillaJS (pure JavaScript) plugin that reads form data and Change URL Query Parameters, works with all types of fields
Note: SPFormData does not work with field type "file"!
Install:
npm install --save sp-form-data
API:
HTML Layout:
<form id="filter-sync">
<label for="text-field">Text field:</label>
<input type="text" id="text-field" name="text" required>
<label for="email-field">Email field:</label>
<input type="email" id="email-field" name="email" required>
<label for="password-field">Password field:</label>
<input type="password" id="password-field" name="password" required>
<label>
<span>Checkbox 1</span>
<input type="checkbox" name="checkbox" value="1"/>
</label>
<label>
<span>Checkbox 2</span>
<input type="checkbox" name="checkbox" value="2"/>
</label>
<label>
<span>Checkbox 3</span>
<input type="checkbox" name="checkbox" value="3"/>
</label>
<label>
<span>Checkbox 4</span>
<input type="checkbox" name="checkbox" value="4"/>
</label>
<div>Radio:</div>
<input type="radio" id="radio-button1" name="radio" value="1">
<label for="radio-button1">Option 1</label>
<input type="radio" id="radio-button2" name="radio" value="2">
<label for="radio-button2">Option 2</label>
<input type="radio" id="radio-button3" name="radio" value="3">
<label for="radio-button3">Option 3</label>
<label for="dropdown">Dropdown:</label>
<select id="dropdown" name="dropdown">
<option value="">No Option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label for="textarea">Multiline text field:</label>
<textarea id="textarea" name="textarea"></textarea>
<label for="range">Value range:</label>
<input type="range" id="range" name="range" min="0" max="100" step="1">
<label for="datetime">Date and time:</label>
<input type="datetime-local" id="datetime" name="datetime">
<label for="color">Color palette:</label>
<input type="color" id="color" name="color">
<!-- Submit button, needed if option autoSubmit: false -->
<input type="submit" value="submit">
</form>
Using JS Modules
import SPFormData from 'sp-form-data';
Using Build Script
<script src="/dist/sp-form-data.js"></script>
Initialize:
let SPFD = new SPFormData('#filter', {})
You can also work directly with DOM nodes in several ways:
let node = document.querySelector('#filter');
let nodeList = document.querySelectorAll('#filter');
let nodeArray = [
document.querySelector('#filter'),
document.querySelector('#sorting'),
document.querySelector('#pagination')
];
new SPFormData(node, {})
new SPFormData(nodeList, {})
new SPFormData(nodeArray, {})
new SPFormData('#filter', {})
new SPFormData('#filter, #sorting, #pagination', {})
GET URL:
site.com?search=product+name&date=DESC&option=1,2
Parameters
Name | Type | Default | Description |
---|---|---|---|
init | boolean | true | Whether SPFormData should be initialized automatically when you create an instance. If disabled, you need to init it manually by calling SPFD.init() |
separator | string | "," | URL Query Parameters separator |
delayBeforeSend | number | 300 | Delay before executing and submitting the form. |
autoSubmit | boolean | true | Listen for form changes and auto submit |
changeQueryParameters | boolean | true | Do I need to change query parameters of the URL request Warning! If true, then file field types will not work. |
presetQueries | array | [...inputname] | SPFormData will change query parameters and return data, in the order specified in the array of fields |
multipleArray | boolean | true | Whether the multiple choice will be returned as an array (?option=1,2,3,4 => array [1, 2, 3, 4] or string 1,2,3,4) |
secondForm | stringarraynodenodeListnodeArray | null | Secondary forms, such as a pagination form, etc.Note: when updating the main form, all secondary forms are brought to the default state |
Methods
Methods | Description |
---|---|
SPFD.init() | Initialize SPFormData |
SPFD.update() | You should call it after you change form manually, or do any custom DOM modifications with SPFormDataNote: Doesn't work when "autoSubmit: false" |
SPFD.reset() | Clear form and URL Query Parameters and reset to defaultNote: Doesn't work when "autoSubmit: false" |
SPFD.on(event, handler) | Add event handler |
SPFD.once(event, handler) | Add event handler that will be removed after it was fired |
SPFD.off(event, handler) | Remove event handler |
SPFD.setValue(name, value) | (name: object Node or String) Sets the field value by its "name" attribute or object Node. Note: Doesn't work with "checkbox" and "radio" field types! Note 2: "value" is required! SPFD.setValue('size', 'Lorem ipsum dolor.') or SPFD.setValue(document.querySelector('#filter [name="size"]'), 'Lorem ipsum dolor.') |
SPFD.setChecked(name, value) | (name: object Node or String) Checked input type checkbox or radio. Note: "value" is required if string name is used! SPFD.setChecked('size', 3) or SPFD.setChecked(document.querySelector('#filter [name="size"]'), 3) or SPFD.setChecked(document.querySelector('#filter [name="size"]')) |
Events
Event name | Arguments | Description |
---|---|---|
beforeInit | (no-arguments) | Event will fired right before initialization |
afterInit | (no-arguments) | Event will fired right after initialization |
init | (query) | Fired right after SPFormData initialization.Event will be fired right after SPFormData initialization. Note that with SPFD.on('init') syntax it will work only in case you set init: false parameter:const SPFD = new SPFormData('#filter', {init: false}); SPFD.on('init', function(query) { /* do something */ }); SPFD.on('beforeInit', function(query) { /* do something */ }); SPFD.on('afterInit', function(query) { /* do something */ }); SPFD.init(); Otherwise use it as the parameter:const SPFD = new SPFormData('#filter', { // other parameters on: { init: function (query) { /* do something */ } } }); |
change | (query) | Event will be fired when currently form is changed |
update | (query) | Event will be fired after SPFD.update() call |
reset | (query) | Event will be fired when currently form is reset |
submit | (query) | Event will be fired when the form is submitted. Only if parameter autoSubmit: false |
popstate | (query) | Event will be fired when the active history entry changes while the user navigates the session history |
1) Using on parameter on SPFormData initialization:
const SPFD = new SPFormData('#filter', {
// ...
on: {
init: function (query) {
console.log(query);
},
},
});
2) Using on method after SPFormData initialization.
const SPFD = new SPFormData('#filter', {
// ...
});
SPFD.on('change', function (query) {
console.log(query);
});
5.0.0
5 months ago
4.1.3
9 months ago
4.1.0
1 year ago
4.0.1
1 year ago
4.0.0
1 year ago
4.1.2
1 year ago
4.0.3
1 year ago
4.1.1
1 year ago
4.0.2
1 year ago
2.2.0
2 years ago
2.1.0
2 years ago
2.0.0
2 years ago
3.0.1
1 year ago
3.0.0
1 year ago
1.6.2
2 years ago
1.6.1
2 years ago
1.6.0
2 years ago
1.5.1
2 years ago
1.5.0
2 years ago
1.4.11
2 years ago
1.4.12
2 years ago
1.4.14
2 years ago
1.2.9
2 years ago
1.2.8
2 years ago
1.1.8
2 years ago
1.1.7
2 years ago
1.1.6
2 years ago
1.0.6
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago