/
dynamic-form.html
221 lines (173 loc) · 10 KB
/
dynamic-form.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
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
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamically Duplicating a form, by Tristan Denyer</title>
<link rel="stylesheet" href="css/styles.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
// if Google is down, it looks to local file...
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='js/jquery-1.11.2.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<script type="text/javascript" src="js/clone-form-td.js"></script>
</head>
<body>
<div id="O_o"><a href="http://tristandenyer.com/using-jquery-to-duplicate-a-section-of-a-form-maintaining-accessibility/">« Return to Tristan Denyer's tutorial page 'Duplicating a Form'.</a><br /><a href="https://github.com/tristandenyer/Clone-section-of-form-using-jQuery">« Return to Tristan Denyer's GitHub page.</a></div>
<div id="wrapper">
<div class="sign-up_box">
<form action="#" method="post" id="sign-up_area">
<div id="entry1" class="clonedInput">
<h2 id="reference" name="reference" class="heading-reference">Entry #1</h2>
<fieldset>
<label class="label_ttl" for="title">Title:</label>
<select class="select_ttl" name="title" id="title">
<option value="" selected="selected" disabled="disabled">
Select your title
</option>
<option value="Dr.">
Dr.
</option>
<option value="Mr.">
Mr.
</option>
<option value="Mrs.">
Mrs.
</option>
<option value="Ms.">
Ms.
</option>
</select><!-- end .select_ttl -->
</fieldset>
<fieldset>
<label class="label_fn" for="first_name">First name:</label>
<input class="input_fn" type="text" name="first_name" id="first_name" value="">
<p class="form-help">This is help text under the form field.</p><!-- this is optional -->
</fieldset>
<fieldset>
<label class="label_ln" for="last_name">Last name:</label>
<input class="input_ln" type="text" name="last_name" id="last_name" value="">
</fieldset>
<fieldset class="checkbox entrylist">
<label class="label_checkboxitem" for="checkboxitem">What color?</label>
<ul>
<li><label><input type="checkbox" id="colorBlue" value="colorBlue" name="checkboxitem" class="input_checkboxitem"> Blue</label></li>
<li><label><input type="checkbox" id="colorRed" value="colorRed" name="checkboxitem" class="input_checkboxitem"> Red</label></li>
<li><label><input type="checkbox" id="colorWhite" value="colorWhite" name="checkboxitem" class="input_checkboxitem"> White</label></li>
</ul><!-- end .input_radio -->
</fieldset>
<fieldset class="radio entrylist">
<label class="label_radio" for="radioitem">Do you skate?</label>
<ul>
<li><label><input type="radio" id="skateyes" value="skateyes" name="radioitem" class="input_radio"> Yes</label></li>
<li><label><input type="radio" id="skateno" value="skateno" name="radioitem" class="input_radio"> No</label></li>
<li><label><input type="radio" id="skatewish" value="skatewish" name="radioitem" class="input_radio"> I wish</label></li>
</ul><!-- end .input_radio -->
</fieldset>
<fieldset>
<label class="label_email" for="email_address">Email:</label>
<input class="input_email" type="text" name="email_address" id="email_address" value="" placeholder="like this: billybob@example.com">
</fieldset>
</div><!-- end #entry1 -->
<div id="addDelButtons">
<input type="button" id="btnAdd" value="add section"> <input type="button" id="btnDel" value="remove section above">
</div>
<fieldset>
<label for="notes">Notes</label>
<textarea id="notes"></textarea>
</fieldset>
<fieldset class="check">
<label><input type="checkbox"> I accept the terms of service.</label>
</fieldset>
<fieldset class="form-actions">
<input type="submit" value="Submit">
</fieldset>
</form>
</div><!-- end sign-up_box -->
<p>Latest release is ver 0.9.4.3, last updated Mar 22, 2015.</p>
<p>Changelog:</p>
<p>0.9.4.3 (current/latest)</p>
<ul>
<li>Library: jQuery 1.11.2</li>
<li>Added support for cloning multiple form elements independently. <a href="dynamic-form-bootstrap-3-3-4-multiple.html">See demo.</a></li>
</ul>
<p>0.9.4.1</p>
<ul>
<li>added MIT License</li>
<li>Ran QUnit, all tests passed</li>
</ul>
<p>0.9.4</p>
<ul>
<li>Comments cleanup: updated comments to make more sense</li>
<li>fixed 'Unreachable "$" after "return" error on line 74</li>
</ul>
<p>0.9.3</p>
<ul>
<li>Library: jQuery 1.9.1</li>
<li>Code cleanup: Removed divs from form and moved their IDs to the input/select. (thanks, Dan!)</li>
<li>Above code cleanup also removed the issue of having duplicated unique IDs by using class instead.</li>
<li>Added checkboxes to the demo.</li>
<li>Added a unique scalable header to each section (thanks, Dan!)</li>
<li>General CSS cleanup.</li>
</ul>
<p>0.9.2</p>
<ul>
<li>Library: jQuery 1.9.1</li>
<li>Converted .val('') to use .val([]) as per Dan's comment/suggestion.</li>
<li>Added .val([]) to the radio buttons so that they don't show pre-selected.</li>
<li>Restyled the demo form. The CSS styling is still broken up (commented) into 'necessary' and 'unnecessary' styles so you can easily and quickly remove my styles and import the basic form into your project.</li>
<li>Added Retina (hi-res) media queries for background image. Just for fun.</li>
<li>Added HTML5 placeholder/watermark to email textarea.</li>
<li>Changed demo to allow for pinch to zoom out/in on mobile devices.</li>
</ul>
<p>0.9.1</p>
<ul>
<li>Library: jQuery 1.8.3</li>
<li>Fixed 'add' button bug found by Jay. The bug was: if you added sections until it maxed out, then removed one or all, the 'add' button would not return to enabled state.</li>
<li>Added the .prop() method to the 'add' button to switch the value when maxed out, Demo says "You've reached the limit" when you add 4 sections to reach the max. Removing a section converts value back to "add section".</li>
</ul>
<p>0.9</p>
<ul>
<li>Library: jQuery 1.8.2</li>
<li>Cleaned up the JS (a little) using JSLint</li>
<li>Now using HTML5</li>
<li>No more tables! Basic form structure from <a href="http://pea.rs/" target="_blank">pea.rs</a></li>
<li>Added 2 animations: fadeIn (on Add click event) and slideUp (on Remove click event)</li>
<li>Added confirmation alert for Remove click event (Raw version. I recommend using a good jQuery modal/dialog box for this.)</li>
<li>Added radio buttons.</li>
<li>Added two form elements outside the duplicating area: 'notes' and the agreement checkbox.</li>
<li>The form is responsive - breakpoint is at 600px.</li>
<li>Changed "email_address_officer" to "email_address"</li>
<li>You don't need any of the included CSS for the form to work, but I did add HTML5 Boilerplate 'form reset' CSS to make things behave/render better.</li>
<li>HTML + JS tested: IE7+, Firefox, Safari, Chrome. (Obviously the responsive part of the form does not work in IE.)</li>
</ul>
<p>0.8</p>
<ul>
<li>Library: jQuery 1.8.0</li>
<li>Tested - no known issues.</li>
</ul>
<p>0.7</p>
<ul>
<li>Library: jQuery 1.7.1</li>
<li>Issue with "remove" button staying grayed out is fixed thanks to Christiaan.</li>
</ul>
<p>0.6</p>
<ul>
<li>Updated to use jQuery 1.5.2, but anything above this version breaks the "remove" button (it remains greyed out.)</li>
</ul>
<div id="attribution">
This plugin uses code and assets from the following sources:
<ul>
<li>Basic form and CSS (modified) - <a href="http://pea.rs/" target="_blank">pea.rs</a></li>
<li>Form reset CSS - <a href="http://html5boilerplate.com/" target="_blank">HTML5 Boilerplate</a></li>
<li>Original form clone plugin - <a href="http://charlie.griefer.com/blog/2009/09/17/jquery-dynamically-adding-form-elements/" target="_blank">Charlie Griefer</a></li>
<li>Background image "Low Contrast Linen" by Jordan Pittman. Find more at <a href="http://subtlepatterns.com/" target="_blank">Subtle Patterns</a></li>
</ul>
</div>
</div> <!-- end wrapper -->
<div id="O_o"><a href="http://tristandenyer.com/using-jquery-to-duplicate-a-section-of-a-form-maintaining-accessibility/">« Return to Tristan Denyer's tutorial page 'Duplicating a Form'.</a><br /><a href="https://github.com/tristandenyer/Clone-section-of-form-using-jQuery">« Return to Tristan Denyer's GitHub page.</a></div>
</body>
</html>