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
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
controls
js bugfix #15 and new release Feb 16, 2017
lib
src fix npe Jan 30, 2018
test
.gitignore better i18n handling and add support library Oct 7, 2013
.jshintrc
Gruntfile.js bugfix #15 and new release Feb 16, 2017
MIT-LICENSE.txt add jquery plugin configuration Jul 23, 2013
README.md update readme Sep 17, 2017
autocomplete-form-tagit.html use https for cdn in examples Sep 17, 2017
bower.json
complex-sample.html use https for cdn in examples Sep 17, 2017
jsForm.jquery.json bugfix #15 and new release Feb 16, 2017
package.json bugfix #15 and new release Feb 16, 2017
sample-conditional.html use https for cdn in examples Sep 17, 2017
sample-connect.html use https for cdn in examples Sep 17, 2017
sample-dataHandler.html use https for cdn in examples Sep 17, 2017
sample-multiselect.html use https for cdn in examples Sep 17, 2017
sample-object.html use https for cdn in examples Sep 17, 2017
sample.html
sortable-editable-sample.html
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 and Bootstrap
  • 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