jquery-load-json
Version:
jQuery plugin that enables developers to load JSON data from the server and load JSON object into the DOM.
171 lines (135 loc) • 7.86 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Load Form with JSON data</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="../src/jquery.loadJSON.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
var id = window.location.href.match("(ID=|id=|/)[0-9]+")[0].match("[0-9]+");
$('form').loadJSON('data' + id + '.js');
});
</script>
<script type="text/javascript" src="scripts/shCore.js"></script>
<script type="text/javascript" src="scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="scripts/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="scripts/shCoreDefault.css"/>
<link type="text/css" rel="stylesheet" href="scripts/shThemeDefault.css"/>
<script type="text/javascript">SyntaxHighlighter.all();</script>
</head>
<body>
<div id="page-wrap">
<a href="http://code.google.com/p/jquery-load-json/" alt="Home">Home</a>
<div id="contact-area">
<a href="list.html">Back to the list</a>
<h1>Filling the form with the single JSON object</h1>
<p>JQuery loadJSON plugin can be used for filling the form elements.</p>
<h2>Live example</h2>
<p>JQuery loadJSON plugin enables you to bind a single object to the HTML form. Each element in the form is populated with an property of the object that matches the name attribute of the form element.
In the example below is shown how a single JSON object is bound to the HTML code:
</p>
<form name="form_simple" id="form-simple" action="details.html" method="get">
<input type="hidden" id="ID" name="ID" />
<label for="Name">Name</label>
<input name="Name" id="Name" type="text" />
<br/>
<label for="Address">Address</label>
<br/>
<textarea name="Address" id="Address" rows="5" cols="20"></textarea>
<br/>
<label for="Country">Country</label>
<select name="Country" multiple="multiple">
<option value="">-</option>
<option value="UK">United Kingdom</option>
<option value="SRB">Serbia</option>
<option value="USA">United States of America</option>
<option value="FRA">France</option>
</select>
<br/>
<br/>
<label for="IsFeatured">Is Featured</label>
<input name="IsFeatured" id="IsFeatured" type="checkbox" value="true"/>
<br/>
<label for="Town">Town</label>
<select name="Town" id="Town">
<option value="" selected="selected">-</option>
<option value="London">London City</option>
<option value="Liverpool">Liverpool City</option>
<option value="Lothian">Lothian City</option>
<option value="Newcastle">Newcastle City</option>
<option value="Buckinghamshire">Buckinghamshire City</option>
<option value="Essex">Essex City</option>
</select>
<br style="clear:both"/>
<br/>
<label for="Contact">Contact</label>
<input name="Contact" type="radio" value="Email"/> Email
<input name="Contact" type="radio" value="Phone" /> Phone
<input name="Contact" type="radio" value="Post" /> Post
<br/>
<input type="submit" value="Details" class="submit-button" />
</form>
<br /><br /><br /><br />
<p>Properties of the JSON object are used to populate form elements in the HTML code shown above</p>
<br /><br />
<h2>Implementation</h2>
<p>HTML form that will be populated with JSON object should be defined. HTML elements in this form should have name
attributes that matches properties of the JSON object that will be loaded into the HTML code. Example is shown below:</p>
<pre class="brush: xml;">
<form name="form_simple" id="form-simple" action="details.html" method="get">
<input type="hidden" id="ID" name="ID" />
<label for="Name">Name</label>
<input name="Name" id="Name" type="text" />
<label for="Address">Address</label>
<textarea name="Address" id="Address" rows="5" cols="20"></textarea>
<label for="Country">Country</label>
<select name="Country" multiple="multiple">
<option value="">-</option>
<option value="UK">United Kingdom</option>
<option value="SRB">Serbia</option>
<option value="USA">United States of America</option>
<option value="FRA">France</option>
</select>
<label for="IsFeatured">Is Featured</label>
<input name="IsFeatured" id="IsFeatured" type="checkbox" value="true"/>
<label for="Town">Town</label>
<select name="Town" id="Town">
<option value="" selected="selected">-</option>
<option value="London">London City</option>
<option value="Liverpool">Liverpool City</option>
<option value="Lothian">Lothian City</option>
<option value="Newcastle">Newcastle City</option>
<option value="Buckinghamshire">Buckinghamshire City</option>
<option value="Essex">Essex City</option>
</select>
<label for="Contact">Contact</label>
<input name="Contact" type="radio" value="Email"/> Email
<input name="Contact" type="radio" value="Phone" /> Phone
<input name="Contact" type="radio" value="Post" /> Post
<input type="submit" value="Details" class="submit-button" />
</form>
</pre>
<p>JSON object that will be loaded into the HTML form shown above should have properties that matches name attributes
of the elements above. Example of such kind of JSON object is shown below:</p>
<pre class="brush: js;">
data = {
"ID":17,
"Name":"Emkay Entertainments",
"Address":"Nobel House, Regent Centre",
"Town":"Lothian",
"Contact":"Phone"
}
</pre>
<p>JSON object 'data' is bound to the HTML form using the following line:</p>
<pre class="brush: js;">
$('form').loadJSON(data);
</pre>
<p>JQuery loadJSON plugin will take JSON object (data) and put properties of the object as a content of the HTML elements
in the form where names of the elements matches names of the fields in the JSON object.</p>
<a href="list.html">Back to the list</a>
</div>
</div>
</body>
</html>