JSON To Form And Form To JSON Converter - jQuery jform

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

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.

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);

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