How to make use of 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 individual type fields with distinctive names:

<div id="banner-message">
 <form id="myform">
        <div class="form-field">
            <h5>
                Text Input
            </h5>
            <input type="" name="name">
        </div>

        <div class="form-field">
            <h5>
                Single Select
            </h5>
            <select name="country">
                <option value="usa">USA</option>
                <option value="uk">UK</option>
                <option value="germany">Germany</option>
            </select>
        </div>

        <div class="form-field">
            <h5>
                Multiple Select
            </h5>
            <select multiple name="skill">
                <option value="html">html</option>
                <option value="css">css</option>
                <option value="javascript">javascript</option>
                <option value="node">node</option>
            </select>
        </div>

        <div class="form-field">
            <h5>
                checkbox example
            </h5>
            <label>
                <input type="checkbox" value="english" name="language" />English</label>
            <label>
                <input type="checkbox" value="french" name="language" />French</label>
            <label>
                <input type="checkbox" value="german" name="language" />German</label>
        </div>


        <div class="form-field">
            <h5>
                Radio example
            </h5>
            <label>
                <input type="radio" value="male" name="sex" />Male</label>
            <label>
                <input type="radio" value="female" name="sex" />Female</label>
        </div>
    </form>
</div>

3. Call the function on the HTML form and outline your type information in a JSON object utilizing key/value pair as follows:

// jsonToForm library
$.fn.jsonToForm=function(a,c){var l=this,n={data:a||null,callbacks:c};null!=n.data&&$.each(n.data,function(a,c){var e=$('[name="'+a+'"]',l);null!=n.callbacks&&n.callbacks.hasOwnProperty(a)?n.callbacks[a](c):(e.length||c.length)&&$(e).each(function(n,e){Array.isArray(c)?c.forEach(function(a){$(e).is("select")?$(e).find("[value='"+a+"']").prop("selected",!0):$(e).val()==a&&$(e).prop("checked",!0)}):$(e).is(":checkbox")||$(e).is(":radio")?$(e).val()==c&&$(e).prop("checked",!0):$('[name="'+a+'"]',l).val(c)})})};

(function() {
  var json = {
                name: "Waleed",
                country: "uk",
                skill: ["html", "javascript"],
                language: ["english", "german"],
                sex: "female"
            };

            $("#myform").jsonToForm(json);
            
            console.log($("#myform").serialize());
})();

Populate Form Fields With JSON Data, JQuery-JSON-Form-Fields Plugin/Github

See Demo And Download