@saucecode/form-collector v1.0.6

Form Collector

Gather form input data from inputs, textarea and select elements. Support for grouping via fieldset might be added in the future.

You can read about HTMLFormElement and HTMLFormElement.elements in the links below.

• HTMLFormElements (developer.mozilla.org)
• HTMLFormElements.elements (developer.mozilla.org)

Features

• Modern JavaScript with Webpack, Yarn and Babel etc.
• Webpack for compiling assets, concatenating and minifying files.
• Does NOT use jQuery.

Usage

Incorrect

    <!-- Do not do this... -->
    <form id="bad-example-1">
        <input name="bad-example-1[key1]" value="value1">
        <input name="bad-example-1[key1]" value="value2"> <!-- this will overwrite the first -->
        <input name="bad-example-1[key1]" value="value3"> <!-- this will overwrite the second -->
    </form>

    let forms = document.querySelector('#bad-example-1');
    let collection = new FormCollector(form);
    
    // Retrieve data
    let data = collection.getCollection();

    // console.log(data);
    // Should print
    //
    // {
    //     "bad-example-1": {
    //         "key1": "value3"
    //     }
    // }

Correct

    /**
     * Import class 
     */
    import { FormCollector } from '@saucecode/form-collector';

    /**
     * WRONG 
     * 
     * Do no do this, FormCollector requires a single HTMLFormElement
     * FormCollector uses HTMLFormElement.elements to gather the data!
     */
    let forms = document.querySelectorAll('your-form-selector');
    
    /**
     * CORRECT
     * 
     * FormCollector takes 1 argment and that argument should be a HTMLFormElement.
     */
    let form = document.querySelector('your-form-selector');
    let collection = new FormCollector(form);
    
    // Retrieve data
    let data = collection.getCollection();            // As object, default.
    let dataString = collection.getCollection(true);  // Object as JSON string
    
    // Do whatever with data.

More examples

<form id="example-1">
    <input name="example-1[]" value="value1">
    <input name="example-1[]" value="value2">
    <input name="example-1[]" value="value3">
    <input name="example-1[]" value="value4">
</form>

    let form = document.querySelector('#example-1');
    let collection = new FormCollector(form);
    
    console.log(collection);
    
    // Should print
    // 
    // {
    //     "example-1": [
    //         "value1", 
    //         "value2", 
    //         "value3", 
    //         "value4"
    //     ]
    // }

<form id="example-2">
    <input name="example-1" value="value1">
    <input name="example-2" value="value2">
    <input name="example-3" value="value3">
    <input name="example-4" value="value4">
</form>

    let form = document.querySelector('#example-2');
    let collection = new FormCollector(form);
    
    console.log(collection);
    
    // Should print
    // 
    // {
    //     "example-1": "value1",
    //     "example-2": "value2",
    //     "example-3": "value3",
    //     "example-4": "value4",
    // }

<form id="example-3">
    <input name="example-3[key1]" value="value1">
    <input name="example-3[key2]" value="value2">
    <input name="example-3[key3]" value="value3">
    <input name="example-3[key4]" value="value4">
</form>

    let form = document.querySelector('#example-3');
    let collection = new FormCollector(form);
    
    console.log(collection);
    
    // Should print
    // 
    // {
    //     "example-3": {
    //         key1: "value1", 
    //         key2: "value2", 
    //         key3: "value3", 
    //         key4: "value4"
    //     }
    // }

<form id="example-4">
    <input name="example-4[key1][]" value="value1">
    <input name="example-4[key1][]" value="value2">
    <input name="example-4[key2][]" value="value3">
    <input name="example-4[key2][]" value="value4">
</form>

    let form = document.querySelector('#example-4');
    let collection = new FormCollector(form);
    
    console.log(collection);
    
    // Should print
    // 
    // {
    //     "example-4": {
    //         key1: [
    //             "value1",
    //             "value2"
    //         ],
    //         key2: [
    //             "value3",
    //             "value4"
    //         ]
    //     }
    // }

<form id="example-5">
    <div>
        <input name="example-1" value="value1">
        <input name="example-2" value="value2">
        <input name="example-3" value="value3">
        <input name="example-4" value="value4">
    </div>
    
    <div>
        <input name="example-5[]" value="value1">
        <input name="example-5[]" value="value2">
        <input name="example-5[]" value="value3">
        <input name="example-5[]" value="value4">
    </div>

    <div>
        <input name="example-6[key1]" value="value1">
        <input name="example-6[key2]" value="value2">
        <input name="example-6[key3]" value="value3">
        <input name="example-6[key4]" value="value4">
    </div>
    
    <div>
        <input name="example-7[key1][]" value="value1">
        <input name="example-7[key1][]" value="value2">
        <input name="example-7[key2][]" value="value3">
        <input name="example-7[key2][]" value="value4">
    </div>
</form>

    let form = document.querySelector('#example-5');
    let collection = new FormCollector(form);
    
    console.log(collection);
    
    // Should print
    // 
    // {
    //     "example-1": "value1",
    //     "example-2": "value2",
    //     "example-3": "value3",
    //     "example-4": "value4",
    //     "example-5": [
    //         "value1", 
    //         "value2", 
    //         "value3", 
    //         "value4"
    //     ]
    //     "example-6": {
    //         key1: "value1", 
    //         key2: "value2", 
    //         key3: "value3", 
    //         key4: "value4"
    //     }
    //     "example-7": {
    //         key1: [
    //             "value1",
    //             "value2"
    //         ],
    //         key2: [
    //             "value3",
    //             "value4"
    //         ]
    //     }
    // }