Misty-Stix
dynamic forms
Why I called this a revisited issue is because I’ve asked this before in the stackoverflow community. Check this link: http://stackoverflow.com/questions/2293512/web-ui-dynamic-web-forms.
The problem lies in the dynamic generation of components from within a form, for instance, your data-structure follows the one-has-many setup. Take for example a person who has one or more cars, then we would like to have multiple cars to add or to remove from the form.
Lately, a similar project reached my desk and I am faced with a very similar issue. Before, I’d just rewrite the code I wrote as a patch-up to what I did years ago using duplicate javascript code with the help of jquery and json. But alas, I’d want a plugin to do the work for me, well, extjs, a product of sencha is for-sale and its good but I’d like a small fix that would simply solve my problem, at least.
Again, I tried searching the web for alternatives on what to use re: dynamic forms and the keyword ‘lambda’ appears. A solution has been rediscovered after all this time http://code.google.com/p/jquery-dynamic-form. This solution is the perfect candidate to solve my dynamic forms problem, the code is as simple as this:
dynamic form
I intend to make a simpler example of the code so that it’d be easier to read.
Javascript:
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 | <script type="text/javascript" src="lib/jquery/jquery-1.4.2.js"></script> <script type="text/javascript" src="jquery-dynamic-form.js"></script> <script type="text/javascript"> $(document).ready(function(){ var whitelist = $("#whitelist-template").dynamicForm( "#plus-whitelist", "#minus-whitelist", { limit:5, normalizeFullForm: false }); data = <?php echo json_encode(array( array( 'whitelist_id' => '1', 'whitelist' => '0.0.0.0', ), array( 'whitelist_id' => '2', 'whitelist' => '1.1.1.1' ), array( 'whitelist_id' => '3', 'whitelist' => '2.2.2.2' ) ));?>; whitelist.inject(data); }); </script> |
HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <form method="post" action="#" value="Post"> <p><label for="firstname">first name : </label><input id="firstname" type="text" name="firstname" size="40"></p> <p><label for="lastname">last name : </label><input id="lastname" type="text" name="lastname" size="40"></p> <br /> <br /> <br /> <fieldset> <legend>whitelists</legend> <p id='whitelist-template'> <input type='hidden' value='' name='whitelist_id' /> <label for="whitelist">whitelist : </label><input id="whitelist" type="text" name="whitelist" size="39" /><br /> <label for="contactperson">contact person : </label><input id="contactperson" type="text" name="contactperson" size="39" /><br /> <span style="clear:none; float:right;"><a id="minus-whitelist" href="">[-]</a> <a id="plus-whitelist" href="">[+]</a></span> </p> </fieldset> <input type="submit" /> </form> |
Just in case the later versions of jquery.dynamic do not work for you, I have included the jquery plugin I used and tested.
I’ve used jquery version 1.4.2.
download source: jquery.lambda
