Get Form Data ( Complex Structure )

formJS

Demos

You can use dot-notation-like way to gather user data.

Create first-level key/value:
name="otp" => { otp: '' }
Create nested object properties:
name="user.name" => { user: { name: '' } }
Create array of objects:
name="preference[].1___privacy" => { preference: [{ privacy: '' }] }
- Using [] will create the array
- The part after [], in our case 1___privacy, is composed by 3 pieces:
  - A number ( 1 ) indicating the object position ( not index ) that will be created inside the array ( starting from 1 )
  - The separator ( ___ ) used internally to split the number from the object key name
  - The key name ( privacy ) indicating the object key that will be added to the created object
- To add more key/value pairs to the same object => 1___newfield
- To add more objects to the array => 2___hello

HTML

<form action="../json/data.json" name="my-form">
    <div data-formjs-question class="form-group">
        <div class="answers-box label-move-up">
            <input name="user.name" type="text" data-length="[3,20]" class="form-control" required />
            <label>Name</label>
        </div>
        <div class="field-error-message small">Write your name! It must be between 3 and 20 chars.</div>
    </div>
    <div data-formjs-question class="form-group">
        <div class="answers-box label-move-up">
            <input name="registration.code" type="text" data-subtype="registration-code" class="form-control" required />
            <label>Registration Code</label>
        </div>
        <div class="field-error-message small">Registration Code is not valid!</div>
    </div>
    <div data-formjs-question class="form-group">
        <div class="answers-box label-move-up">
            <input name="user.email" type="email" class="form-control" required />
            <label>Email</label>
        </div>
        <div class="field-error-message small">Check your email address, it is not valid!</div>
    </div>
    <div data-formjs-question class="form-group">
        <p class="mb-2 small">Select your contact preferences <br />( 2 answers max )</p>
        <div class="answers-box">
            <div class="form-check">
                <input name="user.preference[].1___contactCheck" type="checkbox" value="sms" class="form-check-input" id="checkbox-1-a" required data-checks="[1,2]" />
                <label class="form-check-label" for="checkbox-1-a">SMS</label>
            </div>
            <div class="form-check">
                <input name="user.preference[].1___contactCheck" type="checkbox" value="email" class="form-check-input" id="checkbox-2-a" required />
                <label class="form-check-label" for="checkbox-2-a">Email</label>
            </div>
            <div class="form-check">
                <input name="user.preference[].1___contactCheck" type="checkbox" value="app-notiifcation" class="form-check-input" id="checkbox-3-a" required />
                <label class="form-check-label" for="checkbox-3-a">App Notification</label>
            </div>
        </div>
        <div class="field-error-message small">
            You must select at least 1 and at most 2 answers!
        </div>
    </div>
    <div data-formjs-question class="form-group">
        <div class="answers-box">
            <div class="small">
                I agree with the <a href="#" target="_blank">Privacy Policy</a>.
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="user.preference[].2___privacyCheck" id="privacyCheck-1-a" value="accepted" required />
                <label class="form-check-label" for="privacyCheck-1-a">Yes</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="user.preference[].2___privacyCheck" id="privacyCheck-2-a" value="" required />
                <label class="form-check-label" for="privacyCheck-2-a">No</label>
            </div>
        </div>
        <div class="field-error-message small">You must agree!</div>
    </div>
    <div class="text-center">
        <button type="submit" class="btn btn-light">SEND</button>
    </div>
    <div class="d-none alert mt-5 mb-4" role="alert" data-formjs-global-feedback></div>
</form>

const $form = document.querySelector('form');
const formInstance = new Form( $form );

console.log( formInstance.getFormData() );

// THIS WILL PRINT IN THE CONSOLE A DATA OBJECT LIKE:
/*
{
    "user": {
        "name": "Valerio",
        "email": "a@a.aa",
        "preference": [
            { "contactCheck": ["email", "app-notiifcation"] },
            { "privacyCheck": "accepted" }
        ]
    },
    "registration": {
        "code": "123asdASD"
    }
}
*/

// WITH A FORM ENCTYPE OF "multipart/form-data" WITH OPTION nestedMultipartDataToJSON = true, A FormData OBJECT LIKE:
/*
{
    "user": "{ \"name\": \"Valerio\", \"email\": \"a@a.aa\", \"preference\": [ { \"contactCheck\": [\"email\", \"app-notiifcation\"] }, { \"privacyCheck\": \"accepted\" } ] }",
    "registration": "{ \"code\": \"123asdASD\" }"
}
*/

// WITH A FORM ENCTYPE OF "multipart/form-data" WITH OPTION nestedMultipartDataToJSON = false, A FormData OBJECT LIKE:
/*
{
    "user.name": "Valerio"
    "user.email": "a@a.aa"
    "user.preference[0].contactCheck[0]": "email"
    "user.preference[0].contactCheck[1]": "app-notiifcation"
    "user.preference[1].privacyCheck": "accepted"
    "registration.code": "123asdASD"
}
*/

Fill the form:

Name

Write your name! It must be between 3 and 20 chars.

Registration Code

Registration Code is not valid!

Check your email address, it is not valid!

Select your contact preferences
( 2 answers max )

SMS

App Notification

You must select at least 1 and at most 2 answers!

I agree with the Privacy Policy.

Yes

You must agree!