sp-form-data v5.2.1

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

Methods

Events

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);
});