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

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

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.

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(){
  $("#myform").jsonToForm({
    data: {
      name: "Waleed", 
      age: 23, 
      gender: "Male"
    },
    callbacks: {
      age: function(value){
        $('[name="age"]').val(value);
      },
      // more callbacks here
    }
  });
});

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

  • Publication date: 07.08.2018
  • Source