133 |
134 |
jQuery form autofill
135 |
136 | simply autofill an empty form with data.
137 |
138 |
146 |
147 |
148 |
149 |
150 |
151 |
How to use it
152 |
153 |
154 |
you have a form
155 |
156 |
157 | <form id="f">
158 | name <input type="text" name="name">
159 | email <input type="text" name="email">
160 | love jQuery
161 | <input type="radio" name="lovejquery" value="yes"> yes
162 | <input type="radio" name="lovejquery" value="no"> no
163 | </form>
164 |
165 |
166 |
and data
167 |
168 |
169 | var data = {
170 | "name": "John Doe",
171 | "email": "johndoe@mail.com",
172 | "lovejquery": "yes"
173 | }
174 |
175 |
176 |
autofill the form with data ? just do
177 |
178 |
179 | $("#f").autofill( data );
180 |
181 |
182 |
183 |
184 |
209 |
210 |
212 |
213 |
214 |
215 | Optional parameters:
216 |
217 |
218 | you can pass an optional object as second argument. available options with default values are
219 |
220 |
221 | var options = {
222 | findbyname: true,
223 | restrict: true
224 | }
225 | // autofill with options :
226 | $("#f").autofill( data, options );
227 |
228 |
229 | findbyname true : if true, find elements by name attribute. if false, find elements by id.
230 | restrict true : if true, restrict the fields search in the node childs. if false, search in all the document.
231 |
232 |
233 |
234 |
235 | Examples
236 |
237 |
238 |
239 |
240 | findbyname false
241 |
242 |
243 |
244 |
245 | <form id="f_findbyname">
246 | name <input type="text" name="name" id="name_id">
247 | email <input type="text" name="email" id="email_id">
248 | love jQuery
249 | <input type="radio" name="lovejquery" id="lovejquery_yes"
250 | value="yes"> yes
251 | <input type="radio" name="lovejquery" id="lovejquery_no"
252 | value="no"> no
253 | <input type="button" class="btn" value="autofill by id">
254 | </form>
255 |
256 | <script>
257 | var data = {
258 | "name_id": "John Doe",
259 | "email_id": "johndoe@mail.com",
260 | // always use "name" to find radio or checkbox multiple
261 | "lovejquery": "yes"
262 | }
263 | $("#f_findbyname .btn").bind("click", function() {
264 | $("#f_findbyname").autofill(data, {
265 | findbyname: false
266 | });
267 | });
268 | </script>
269 |
270 |
271 |
272 |
296 |
298 |
299 |
300 |
301 | restrict false , findbyname false
302 |
303 |
304 |
305 |
306 | <form id="f_restrict">
307 | name <input type="text" name="name" id="name_not_restricted">
308 | email <input type="text" name="email" id="email_not_restricted">
309 | <input type="button" class="btn" value="autofill by id">
310 | </form>
311 |
312 | <script>
313 | var data = {
314 | "name_not_restricted": "John Doe",
315 | "email_not_restricted": "johndoe@mail.com"
316 | }
317 | $("#f_restrict .btn").bind("click", function() {
318 | $("body").autofill(data, {
319 | findbyname: false,
320 | restrict: false
321 | });
322 | });
323 | </script>
324 |
325 |
326 |
327 |
343 |
345 |
346 |
347 |
348 | restrict false , findbyname true
349 |
350 |
351 |
352 |
353 | <form>
354 | <legend>First form</legend>
355 | name <input type="text" name="name_multiple">
356 | email <input type="text" name="email_multiple">
357 | </form>
358 | <form>
359 | <legend>Second form</legend>
360 | name <input type="text" name="name_multiple">
361 | email <input type="text" name="email_multiple">
362 | <div id="f_restrict_only">
363 | <input type="button" class="clickaction" value="autofill">
364 | </div>
365 | </form>
366 |
367 | <script>
368 | var data = {
369 | "name_multiple": "John Doe",
370 | "email_multiple": "johndoe@mail.com"
371 | }
372 | $("#f_restrict_only .clickaction").bind("click", function() {
373 | $("body").autofill(data, {
374 | restrict: false
375 | });
376 | });
377 | </script>
378 |
379 |
380 |
381 |
382 |
383 |
395 |
410 |
411 |
412 |
414 |
415 |
416 |
417 | With all html elements - my "unit test"
418 |
419 |
573 |
574 |
575 |
