Dynamic Forms Revisited

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

Let the others know about this Rant
  • Print
  • Facebook
  • Twitter
  • LinkedIn
  • Plurk

About Christian Noel

Hi, I'm Cris! I'm interested in anime, programming and photography. My profession is programming and am mostly focused in web development. I've been programming since College. What inspired me to go to programming was because I was so into the gaming industry and I wanted to create my own game.
This entry was posted in Enlightened Thoughts, Techy Thoughts and tagged , , , . Bookmark the permalink.

Comments are closed.