Populate Form Fields With JSON Data - json-form-binding.js

Populate Form Fields With JSON Data - json-form-binding.js
File Size: 3.27 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

json-form-binding.js is a dead simple jQuery dynamic form creation plugin which can be used to populate form fields with JSON data.

Ideal for large forms that you're able to quickly submit the form data using AJAX.

How to use it:

1. Insert the minified version of the jQuery json-form-binding.js 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="jquery-json-form-binding.min.js"></script>

2. Create your own form fields with unique names:

<form id="myform">

  <input type="" name="name">

  <input type="" name="age">

  <input type="" name="gender">

</form>

3. Call the function on the html form and define your form data in a JSON object using key/value pair as follows:

$(document).ready(function(){

  var json = {
      name: "Waleed", 
      age: 23, 
      gender: "Male"
  };

  $("#myform").jsonToForm(json,
  {
    age: function(value){
      $('[name="age"]').val(value);
    }
  });

});

Changelog:

2018-08-09

  • Reduce usage parameter, made callback optional

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