jQuery library to connect html forms with json. This allows filling of html forms automatically with json data and retrieving changes. Even for collections and deeper objects.
JavaScript HTML CSS
Latest commit e2950e2 Feb 16, 2017 @corinis bugfix #15 and new release
Permalink
Failed to load latest commit information.
controls Form and control updates Mar 3, 2016
js bugfix #15 and new release Feb 16, 2017
lib add bower and change dist-layout to allow easier linking Jun 29, 2015
src bugfix #15 and new release Feb 16, 2017
test add test for numbers May 7, 2014
.gitignore better i18n handling and add support library Oct 7, 2013
.jshintrc jslint cleanup and grunt buildfile Apr 15, 2013
Gruntfile.js
MIT-LICENSE.txt add jquery plugin configuration Jul 23, 2013
README.md
autocomplete-form-tagit.html update object handle to be more versatile and add example for tagit May 30, 2013
bower.json
complex-sample.html allow skipping of levels for collections (with test) Jul 9, 2013
jsForm.jquery.json bugfix #15 and new release Feb 16, 2017
package.json bugfix #15 and new release Feb 16, 2017
sample-conditional.html
sample-connect.html connect using separate function Dec 18, 2013
sample-dataHandler.html add support for data handler Jan 28, 2017
sample-multiselect.html add feature that simplifies multi-select Feb 18, 2015
sample-object.html Update to 1.3.3 Jul 12, 2016
sample.html Update to 1.3.3 Jul 12, 2016
sortable-editable-sample.html add index to add and insert. Oct 25, 2013
sortable-sample.html

README.md

jquery.jsForm

jQuery based form library that allows you to handle data within a javascript object (like from a JSON request) with plain html forms.

This is a library allowing a binding between html and a javascript object as described in MVVM similar to other libraries like knockout.js or AngularJs. JsForm only takes care of the rendering of data in a html. The controller can be written in standard jQuery. This keeps the library clean and simple.

The main features of this library are:

  • Use html markup to fill your forms/page with almost any js object dynamically
  • Update an existing js object with changes done within a form (=manipulate data without extra code)
  • Provide basic functions for formatting (i.e. date/time, money, byte) using html markup
  • Provide form validation functionality
  • handle collections (arrays) with subobjects
  • handle binaries (blobs) within json by converting them to data url
  • provides helper methods to handle array manipulation (add new entry/remove an entry) using only html markup
  • Can be used in connection with an autocomplete function to add new array objects
  • Compatible with jQuery UI and jQuery Mobile
  • addon library for form controls and layouting (comes bundled in the minified version), internationalisation
  • unit tested using QUnit
  • jslint clean
  • Minified+Gzipped: 7kb

You can also check out some Demos.

Libraries

Required

Optional

Download

Current Version: 1.3.6

On bower.io:

bower install jquery-jsform --save

Documentation

can be found in the github wiki:

Custom UI Controls

Additionally to the base form, I created some custom controls. There might be much more powerful versions out there, but the aim here is to have simple to use controls that are compatible with the json-approach of jsForm and also compatible to jquery-ui.

Quickstart

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://raw.github.com/corinis/jsForm/master/src/jquery.jsForm.js"></script>
<script>
$(function(){
    // some json data
    var jsonData = {
        name: "TestName",   // standard inputs
        description: "long Description\nMultiline", // textarea
        links: [{href:'http://www.gargan.org',description:'Gargan.org'},{href:'http://www.github.com',description:'GitHub'}],   // lists
        active: true,   // checkbox
        type: "COOL", // radio (enums)
        state: "VISIBLE",   // selects (enums)
    };

    // initialize the form, prefix is optional and defaults to data
    $("#details").jsForm({
        data:jsonData
    });

    $("#show").click(function() {
        // show the json data
        alert(JSON.stringify($("#details").jsForm("get"), null, " "));
    });
});
</script>
</head>
<body>
<h1>Simpel Form Test</h1>
<div id="details">
    Name: <input name="data.name"/><br/>
    <input type="checkbox" name="data.active"/> active<br/>
    <textarea name="data.description"></textarea><br/>
    <select name="data.state">
        <option value="VISIBLE">visible</option>
        <option value="IMPORTANT">important</option>
        <option value="HIDDEN">hidden</option>      
    </select>
    <br/>
    <input type="radio" name="data.type" value="COOL"/> Cool<br/>
    <input type="radio" name="data.type" value="HOT"/> Hot<br/>
    <input type="radio" name="data.type" value="WARM"/> Warm<br/>
    <fieldset>
        <legend>Links</legend>
        <ul class="collection" data-field="data.links">
            <li><span class="field">links.description</span> Link: <input name="links.href"/> <button class="delete">x</button></li>
        </ul>
    </fieldset>
    <button class="add" data-field="data.links">add a link</button><br/>
    Additional field: <input name="data.addedField"/>
</div>
<button id="show">Show Object</button>
</body>
</html>

Also check out the other samples:

view life demos