-
Notifications
You must be signed in to change notification settings - Fork 2
/
example.html
80 lines (69 loc) · 2.36 KB
/
example.html
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
<!doctype>
<html>
<head>
<title>populateDOM.js demo</title>
<style>
body{ font-family: Helvetica Neue, Arial, Helvetica, sans-serif; max-width: 480px; margin: 0 auto; padding: 40px; }
label{ display: block; font-weight: 500; margin-top: 20px; }
input, textarea { display: block; padding: 6px 12px; width: 100%; }
input[type="checkbox"], input[type="radio"] { display: inline-block; width: auto; }
</style>
</head>
<body>
<!-- The form we're going to populate -->
<form id="my-form">
<label>Name</label>
<input type="text" name="name" />
<label>Email</label>
<input type="email" name="email" />
<label>Subkeys</label>
<input type="text" name="address[addr1]" />
<input type="text" name="address[city]" />
<input type="text" name="address[state]" />
<label>Date</label>
<input type="date" name="date_of_birth" />
<label>Number</label>
<input type="number" name="age" />
<label>Textarea</label>
<textarea name="bio" rows="5"></textarea>
<label>Interests</label>
<input type="checkbox" name="interests[]" value="Eating" /> Eating
<input type="checkbox" name="interests[]" value="Sleeping" /> Sleeping
<input type="checkbox" name="interests[]" value="Running" /> Running
<label>Gender</label>
<input type="radio" name="gender" value="Male" /> Male
<input type="radio" name="gender" value="Female" /> Female
<label>Fruits</label>
<select name="fruits[]" multiple>
<option>Apples</option>
<option>Bananas</option>
<option>Oranges</option>
</select>
</form>
<script src="populatedom.min.js"></script>
<script>
var populatedom = populatedom.default;
// your JSON object
// make sure that keys match the `name` of your input fields
var data = {
"email": "john@doe.com",
"name": "John Doe",
"address": {
"addr1": "Street name",
"city": "City name",
"state": "State"
},
"gender": "Male",
"date_of_birth": "1990-07-29",
"age": 25,
"bio": "Some longer text with line-breaks.\n\nCool.",
"interests": [ "Eating", "Running" ],
"fruits": [ "Apples", "Bananas", "Mango" ]
};
// your containing element
var formElement = document.getElementById('my-form');
// populate the form with our JSON object
populatedom(formElement, data);
</script>
</body>
</html>