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:

• 10 Best Form Builder Plugins To Generate Forms From JSON Data

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" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<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">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br><br>
  <input type="submit" value="Submit">
</form>

$(function(){

  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.

$('#form').jform(json);

Changelog:

v1.1.3 (2023-08-15)

• Updated JS

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.