Home
Back to the list

Filling the form with the single JSON object

JQuery loadJSON plugin can be used for filling the form elements.

Live example

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:









Email Phone Post




Properties of the JSON object are used to populate form elements in the HTML code shown above



Implementation

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:

        <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>
        

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:

        data = {
                    "ID":17,
                    "Name":"Emkay Entertainments",
                    "Address":"Nobel House, Regent Centre",
                    "Town":"Lothian",
                    "Contact":"Phone"
        }        
        

JSON object 'data' is bound to the HTML form using the following line:

        $('form').loadJSON(data);
        

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.

Back to the list