JSON To Form And Form To JSON Converter - jQuery jform

File Size: 215 KB
Views Total: 14069
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
JSON To Form And Form To JSON Converter - jQuery jform

jform is an easy jQuery form builder which lets you dynamically generates form fields with preset values using JSON schema.

Also provides a function that makes it easier to convert the current form fields/values to a JavaScript object for further use.

See Also:

How to use it:

1. Insert the minified version of the jform plugin after jQuery.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
<script src="js/jform.min.js"></script>

2. Convert the form data to a JavaScript object.

<form action="#" id="form">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <input type="submit" value="Submit">

  var obj = $('#form').jform();


3. Parse the JavaScript object as JSON.

var json = JSON.parse(obj);

4. Populate your HTML form with the JSON data.



v1.1.3 (2023-08-15)

v1.1.2 (2021-03-18)

  • Fix hidden input can't get value issue

v1.1.1 (2020-09-21)

  • Updated for jQuery 3+

This awesome jQuery plugin is developed by samejack. For more Advanced Usages, please check the demo page or visit the official website.