Update to 1.3.3

* Fix initial filling 
* Add support for radio inputs
* fix typos

README.md

@@ -36,7 +36,7 @@ You can also check out some [Demos](http://www.gargan.org/jsform/index.jsp).
 
 # Download
 
-Current Version: 1.3.2
+Current Version: 1.3.3
 
 * [Minified](https://github.com/corinis/jsForm/raw/master/js/jquery.jsForm.min.js) + [map](https://raw.github.com/corinis/jsForm/master/dist/jquery.jsForm.min.map)
 * [Combined Source](https://github.com/corinis/jsForm/raw/master/js/jquery.jsForm.js)
@@ -82,7 +82,8 @@ $(function(){
 		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
-		state: "VISIBLE"	// selects (enums)
+		type: "COOL", // radio (enums)
+		state: "VISIBLE",	// selects (enums)
 	};
 
 	// initialize the form, prefix is optional and defaults to data
@@ -108,6 +109,10 @@ $(function(){
 		<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">

js/jquery.jsForm-1.3.2.js → js/jquery.jsForm-1.3.3.js

@@ -112,7 +112,7 @@
 		}
 
 		// fill/init with the first data
-		this._fill(this.options);
+		this._fill();
 	};
 
 	/**
@@ -165,12 +165,13 @@
 
 	/**
 	 * simple debug helper
-	 * @param msg the message to pring
+	 * @param msg the message to print
 	 * @private
 	 */
 	JsForm.prototype._debug = function(msg, param) {
 		try {
-			if (!window.console || !window.console.log)
+			var cons = console || (window?window.console:null);
+			if (!cons || !cons.log)
 				return;
 
 			var p = null;
@@ -183,7 +184,7 @@
 				p = "";
 			}
 
-			window.console.log(msg + p);
+			cons.log(msg + p);
 		} catch(ex) {
 			// ignore
 		}
@@ -616,9 +617,12 @@
 
 			if($(this).attr("type") === "checkbox") {
 				$(this).prop("checked", false);
+			} else if($(this).attr("type") === "radio") {
+				$(this).prop("checked", false);
 			} else {
 				$(this).val("");
 			}
+
 			if($(this).hasClass("blob")) {
 				$(this).removeData("blob");
 			}
@@ -784,7 +788,7 @@
 				// set empty numbers or dates to null
 				if(val === "" && ($(this).hasClass("number") || $(this).hasClass("percent") || $(this).hasClass("integer") || $(this).hasClass("dateFilter")|| $(this).hasClass("dateTimeFilter"))) {
 					val = null;
-				} 
+				}  
 
 				// check for percentage: this is input / 100
 				if ($(this).hasClass("percent")) {
@@ -824,6 +828,11 @@
 					} else
 						val = $(this).is(':checked');
 				}
+				else if($(this).attr("type") === "radio" || $(this).attr("type") === "RADIO") {
+					if(!$(this).is(':checked')) {
+						return;
+					}
+				}
 				else if($(this).hasClass("bool")) {
 					val = ($(this).val() === "true");
 				}
@@ -1080,6 +1089,7 @@
 	* <ul>
 	*  <li>&lt;span class="field"&gt;prefix.fieldname&lt;/span&gt;
 	*  <li>&lt;input name="prefix.fieldname"/&gt;
+	*  <li>&lt;input type="checkbox" name="prefix.fieldname"/&gt;
 	*  <li>&lt;a class="field" href="prefix.fieldname"&gt;linktest&lt;/a&gt;
 	*  <li>&lt;img class="field" src="prefix.fieldname"/&gt;
 	* </ul>
@@ -1223,6 +1233,8 @@
 						$(this).prop("checked", found);
 					} else
 						$(this).prop("checked", (cdata === true || cdata === "true"));
+				} else if($(this).attr("type") === "radio") {
+					$(this).prop("checked", cdata == $(this).val());
 				} else {
 					if(!cdata && cdata !== 0 && cdata !== false) {
 						cdata = "";
@@ -1599,7 +1611,7 @@
 	};
 
 	/**
-	 * This is the actual worker function that fills a dom element
+	 * This is the actual worker function that fills the dom subtree
 	 * with data.
 	 * @param ele the element to fill
 	 * @param noInput skip input fields
@@ -1614,7 +1626,9 @@
 
 		// fill base 
 		that._fillData(ele, that.options.data, that.options.prefix);
+		// fill select-collections
 		that._fillSelectCollection(ele, that.options.data, that.options.prefix);
+		// fill normal collection forms
 		that._fillCollection(ele, that.options.data, that.options.prefix, noInput);
 		// (re-)evaluate all conditionals
 		that._evaluateConditionals(ele, that.options.data);
@@ -1625,6 +1639,7 @@
 	 * @param container the container element
 	 * @param data an array containing the the data
 	 * @param prefix a prefix for each line of data
+	 * @param noInput skip input fields
 	 * @private
 	 */
 	JsForm.prototype._fillCollection = function(container, data, prefix, noInput) {

js/jquery.jsForm.js

@@ -112,7 +112,7 @@
 		}
 
 		// fill/init with the first data
-		this._fill(this.options);
+		this._fill();
 	};
 
 	/**
@@ -165,12 +165,13 @@
 
 	/**
 	 * simple debug helper
-	 * @param msg the message to pring
+	 * @param msg the message to print
 	 * @private
 	 */
 	JsForm.prototype._debug = function(msg, param) {
 		try {
-			if (!window.console || !window.console.log)
+			var cons = console || (window?window.console:null);
+			if (!cons || !cons.log)
 				return;
 
 			var p = null;
@@ -183,7 +184,7 @@
 				p = "";
 			}
 
-			window.console.log(msg + p);
+			cons.log(msg + p);
 		} catch(ex) {
 			// ignore
 		}
@@ -616,9 +617,12 @@
 
 			if($(this).attr("type") === "checkbox") {
 				$(this).prop("checked", false);
+			} else if($(this).attr("type") === "radio") {
+				$(this).prop("checked", false);
 			} else {
 				$(this).val("");
 			}
+
 			if($(this).hasClass("blob")) {
 				$(this).removeData("blob");
 			}
@@ -784,7 +788,7 @@
 				// set empty numbers or dates to null
 				if(val === "" && ($(this).hasClass("number") || $(this).hasClass("percent") || $(this).hasClass("integer") || $(this).hasClass("dateFilter")|| $(this).hasClass("dateTimeFilter"))) {
 					val = null;
-				} 
+				}  
 
 				// check for percentage: this is input / 100
 				if ($(this).hasClass("percent")) {
@@ -824,6 +828,11 @@
 					} else
 						val = $(this).is(':checked');
 				}
+				else if($(this).attr("type") === "radio" || $(this).attr("type") === "RADIO") {
+					if(!$(this).is(':checked')) {
+						return;
+					}
+				}
 				else if($(this).hasClass("bool")) {
 					val = ($(this).val() === "true");
 				}
@@ -1080,6 +1089,7 @@
 	* <ul>
 	*  <li>&lt;span class="field"&gt;prefix.fieldname&lt;/span&gt;
 	*  <li>&lt;input name="prefix.fieldname"/&gt;
+	*  <li>&lt;input type="checkbox" name="prefix.fieldname"/&gt;
 	*  <li>&lt;a class="field" href="prefix.fieldname"&gt;linktest&lt;/a&gt;
 	*  <li>&lt;img class="field" src="prefix.fieldname"/&gt;
 	* </ul>
@@ -1223,6 +1233,8 @@
 						$(this).prop("checked", found);
 					} else
 						$(this).prop("checked", (cdata === true || cdata === "true"));
+				} else if($(this).attr("type") === "radio") {
+					$(this).prop("checked", cdata == $(this).val());
 				} else {
 					if(!cdata && cdata !== 0 && cdata !== false) {
 						cdata = "";
@@ -1599,7 +1611,7 @@
 	};
 
 	/**
-	 * This is the actual worker function that fills a dom element
+	 * This is the actual worker function that fills the dom subtree
 	 * with data.
 	 * @param ele the element to fill
 	 * @param noInput skip input fields
@@ -1614,7 +1626,9 @@
 
 		// fill base 
 		that._fillData(ele, that.options.data, that.options.prefix);
+		// fill select-collections
 		that._fillSelectCollection(ele, that.options.data, that.options.prefix);
+		// fill normal collection forms
 		that._fillCollection(ele, that.options.data, that.options.prefix, noInput);
 		// (re-)evaluate all conditionals
 		that._evaluateConditionals(ele, that.options.data);
@@ -1625,6 +1639,7 @@
 	 * @param container the container element
 	 * @param data an array containing the the data
 	 * @param prefix a prefix for each line of data
+	 * @param noInput skip input fields
 	 * @private
 	 */
 	JsForm.prototype._fillCollection = function(container, data, prefix, noInput) {

jsForm.jquery.json

@@ -8,7 +8,7 @@
         "data",
         "mvvm"
     ],
-    "version": "1.3.2",
+    "version": "1.3.3",
     "author": {
         "name": "Niko Berger"
     },

package.json

@@ -2,7 +2,7 @@
   "name": "jquery.jsForm",
   "title": "jQuery JSON Form - jsForm",
   "description": "jQuery based form library that allows you to handle data within a js object (i.e. JSON) with html forms.\nYou can modify all fields/properties by simply creating a html form with the correct naming schema (MVVM Pattern).\n\nThe main features of this library are:\n    Full standard html with data available in a js object\n    Update an existing js object with changes done within a form\n    Fully internationalizable with number format, currency and date formatting\n    Provide basic functions for formatting (i.e. date/time, money) using html markup\n    Provide form validation functionality\n    handle collections (arrays) with subobjects\n provides helper methods to handle array manipulation (add new entry/remove an entry, sorting) using only html markup\n Can be used in connection with an autocomplete function to add new array objects",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "homepage": "https://github.com/corinis/jsForm",
   "author": {
     "name": "Niko Berger",

sample-object.html

@@ -6,14 +6,23 @@
 $(function(){
     // some json data
     var jsonData = {
+	"description": "testing",    		
     "objects": [
         {
             "id": 1,
             "enable": true,
             "find": {
                 "name": "asdf"
             }
+        },
+        {
+            "id": 2,
+            "enable": false,
+            "find": {
+                "name": "asdf"
+            }
         }
+
     ]
 };
 
@@ -53,6 +62,7 @@
 
 <h1>Simple Form Test - working with objects</h1>
 <div id="details">
+	<input name="data.description"/>
    <ul class="collection" data-field="data.objects">
         <li>
             <label for="objects.id">id:</label>

sample.html

@@ -10,6 +10,7 @@
 		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)
 		age: 45, // number 
 		quips: ["Don't left school interfere with your education!", "Can you repeat the question? I was thinking about cookies.", "In my house I'm the boss, my wife is just the decision maker."]
@@ -39,6 +40,10 @@ <h1>Simple Form Test</h1>
 		<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">