jquery-load-json/examples/edit.html at master · kevindb/jquery-load-json · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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;">
        &lt;form name=&quot;form_simple&quot; id=&quot;form-simple&quot; action=&quot;details.html&quot; method=&quot;get&quot;&gt;

            &lt;input type=&quot;hidden&quot; id=&quot;ID&quot; name=&quot;ID&quot; /&gt;

			&lt;label for=&quot;Name&quot;&gt;Name&lt;/label&gt;

			&lt;input name=&quot;Name&quot; id=&quot;Name&quot; type=&quot;text&quot; /&gt;

			&lt;label for=&quot;Address&quot;&gt;Address&lt;/label&gt;

			&lt;textarea name=&quot;Address&quot; id=&quot;Address&quot; rows=&quot;5&quot; cols=&quot;20&quot;&gt;&lt;/textarea&gt;

			&lt;label for=&quot;Country&quot;&gt;Country&lt;/label&gt;
			&lt;select name=&quot;Country&quot; multiple=&quot;multiple&quot;&gt;
				&lt;option value=&quot;&quot;&gt;-&lt;/option&gt;
				&lt;option value=&quot;UK&quot;&gt;United Kingdom&lt;/option&gt;
				&lt;option value=&quot;SRB&quot;&gt;Serbia&lt;/option&gt;
				&lt;option value=&quot;USA&quot;&gt;United States of America&lt;/option&gt;
				&lt;option value=&quot;FRA&quot;&gt;France&lt;/option&gt;
			&lt;/select&gt;

			&lt;label for=&quot;IsFeatured&quot;&gt;Is Featured&lt;/label&gt;
			&lt;input name=&quot;IsFeatured&quot; id=&quot;IsFeatured&quot; type=&quot;checkbox&quot; value=&quot;true&quot;/&gt;

			&lt;label for=&quot;Town&quot;&gt;Town&lt;/label&gt;
			&lt;select name=&quot;Town&quot; id=&quot;Town&quot;&gt;
				&lt;option value=&quot;&quot; selected=&quot;selected&quot;&gt;-&lt;/option&gt;
				&lt;option value=&quot;London&quot;&gt;London City&lt;/option&gt;
				&lt;option value=&quot;Liverpool&quot;&gt;Liverpool City&lt;/option&gt;
				&lt;option value=&quot;Lothian&quot;&gt;Lothian City&lt;/option&gt;
				&lt;option value=&quot;Newcastle&quot;&gt;Newcastle City&lt;/option&gt;
				&lt;option value=&quot;Buckinghamshire&quot;&gt;Buckinghamshire City&lt;/option&gt;
				&lt;option value=&quot;Essex&quot;&gt;Essex City&lt;/option&gt;
			&lt;/select&gt;

			&lt;label for=&quot;Contact&quot;&gt;Contact&lt;/label&gt;
			    &lt;input name=&quot;Contact&quot; type=&quot;radio&quot; value=&quot;Email&quot;/&gt; Email
			    &lt;input name=&quot;Contact&quot; type=&quot;radio&quot; value=&quot;Phone&quot; /&gt; Phone
			    &lt;input name=&quot;Contact&quot; type=&quot;radio&quot; value=&quot;Post&quot; /&gt; Post

            &lt;input type=&quot;submit&quot; value=&quot;Details&quot; class=&quot;submit-button&quot; /&gt;
        &lt;/form&gt;
        </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 = {
                    &quot;ID&quot;:17,
                    &quot;Name&quot;:&quot;Emkay Entertainments&quot;,
                    &quot;Address&quot;:&quot;Nobel House, Regent Centre&quot;,
                    &quot;Town&quot;:&quot;Lothian&quot;,
                    &quot;Contact&quot;:&quot;Phone&quot;
        }
        </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>