Press "Enter" to skip to content

How to Convert Form Data to JSON with HTML Forms | FormsJS

FormsJS is a simple-to-use JavaScript library that covers type subject values to JSON in real-time. The items containing the data category will be analyzed automatically. It will use the Name attribute as the key in the returned JSON object.

convert form data to json online, convert form data to json javascript, convert form data to json using jquery, how to save html form data to json using javascript

How to make use of it:

1. Add the CSS class β€˜data’ to type fields as follows:

<div id="form">
  <h1 class="title">Form</h1>
  <label class="label">
  Username
  <input class="input data" name="username" type="text" worth="formsjs_" />
  </label>
  <label class="label">
  Send me promotional emails
  <br />
  <input class="checkbox data" name="allow_promotional_emails" type="checkbox" />
  <br />
  </label>
  <label class="label">
    Gender
    <br />
    <div class="select control">
      <select class="data" name="gender">
        <option selected value="unknown">Prefer not to say</option>
        <option value="other">Other</option>
        <option value="female">Female</option>
        <option value="male">Male</option>
      </select>
    </div>
  </label>
  <label class="label">
    Where do you live?
    <br />
    <div class="select control">
      <select class="data" name="zipcode">
        <option value="">Elsewhere</option>
        <option value="94016">San Francisco</option>
        <option value="94088">San Jose</option>
      </select>
    </div>
  </label>
  <div class="control">
    <label class="label">
    Account Type
    </label>
    <label class="radio">
    <input class="data" checked type="radio" name="account_type" value="free" />
    Free Account
    </label>
    <label class="radio">
    <input class="data" type="radio" name="account_type" value="premium" />
    Premium Account
    </label>
  </div>
</div>

2. Convert subject values right into a JSON object:

function submit() {
  let username = document.querySelector("[name=username]");
  let result = FORMSJS.readForm("#form");
  // Make the username box turn red if its length is less than 8
  if (username.value.length < 8) 
      username.classList.remove("is-success");
      username.classList.add("is-danger");
   else 
      username.classList.remove("is-danger");
      username.classList.add("is-success");
  
  console.log(result);
}
Array.from(document.querySelector("#form").getElementsByClassName("data")).forEach((element) => );

3. The JSON object needs to be like these:

{
  "username": "formsjs_",
  "allow_promotional_emails": false,
  "gender": "unknown",
  "zipcode": null,
  "account_type": "free"
}

Convert Form Data to Json Using Javascript, FormsJS Plugin/Github, convert multipartform data to json


See Demo And Download

Official Website(e3ndr): Click Here

This superior jQuery/javascript plugin is developed by e3ndr. For extra Advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *