who needs social life when you have broadband?

Inventas vitam iuvat excoluisse per artes / Let us improve life through science and art.

dynamic forms with jQuery

April 30th, 2007 | Category: JavaScript

I've been using prototype for a long time. This week I decided to give jQuery a shot and realised that JS could get even funnier :-)

As this is a nerd blog, I'm gonna try to post something useful here and teach you how to create and manipulate a dynamic forms using jQuery. There is a "special" feature when the user removes an item, the script rename the dynamic fields so the form stays sequentially ordered. Later I'm gonna show how to take advantage of this feature. But first, let me show the code:

I will assume you have already downloaded the latest version of jQuery. In my sample form I will create a hidden field called "i" with the value "1". This value indicates the ID for the next dynamic element (it may be a bit confusing right now but I guess you will get it later, please keep reading). I will also create a

to host all the dynamic elements. Now let's create a function to generate our elements:

PLAIN TEXT
JavaScript:
  1. function addInfo() {
  2.             /* I'm not using document.getElementById("something"), I'm using jQuery's $("#something") instead.
  3. please check the official docs for more info... */
  4.             var i = $("#i").val(); // I'm gonna use an ID for each new group of elements.
  5.             newDiv = document.createElement('div'); // I'm also gonna create a child-div inside the "#dynamic" div.
  6.             newDiv.setAttribute('id', 'custom_'+i);  // this new div will be named custom_1, custom_2 and so on
  7.             newDiv.setAttribute('style', 'display: none'); // display none? Yes, I wanna show you some effects as well.
  8.             newDiv.innerHTML = '<h1>Content Here!!!</h1>Custom field: <input type="text" name="custom_title_'+i+'"><a href="javascript:void(0);" onClick="javascript:delInfo('+i+');">[ Remove ]</a>'; // content... nothing special except for the "delInfo(number)" which will delete this element. I'm gonna explain this function later in this article. Oh, and the naming of our field "custom_title_"+i (remember that "i" means the element number)
  9.             $('#dynamic').append(newDiv);  // append this as a child of "dynamic"
  10.             $('#custom_'+i).show("slow"); // simple effect
  11.             $("#i").val(++i); // Ha! Don't forget to increment your "next element" hidden field.
  12.         }

Once we are done adding elements we will need a way to remove them. You can do it using 1 line in jQuery. It is bloody simple, and if you are not going to use a script to handle these form fields, you don't need to care about anything else. BUT if you need to use the dynamic fields you will need to have some kind of organization. Imagine this scenario:
Your user creates two dynamic fields (custom_title_1 and custom_title_2). Then the user deletes custom_title_2 and create another field (custom_title_3). At this time, your "i" field is equal to 4 and you have 2 dynamic elements (custom_title_1 and custom_title_3). Then the form is submitted to a PHP page (lets use check.php just as an example). The logical thing to do is something like:

PLAIN TEXT
PHP:
  1. /* this is pseudo-code!! don't use it!! */
  2. $i = $_POST['i'];
  3. for($count = 1; $count <$i; $count ++) {
  4.     if (!empty($_POST['custom_title_'.$i])) { /* do something */ }
  5. }

Will this approach work? probably yes, but its not optimal. You will execute this code 3 times when you have only 2 fields (ok, this example is not much convincing but try to imagine a user that removes sixty dynamic fields before submitting the form. You would have custom_title_1 and custom_title_61... this is a complete waste of resources to execute the code above. So how can we fix this? I came up with this simple delInfo() function:

PLAIN TEXT
JavaScript:
  1. function delInfo(custom_id) {
  2.             $("#custom_"+custom_id).hide("slow", function () { $("#custom_"+custom_id).remove(); }); /* deleting slowly in one line hehehe. If you want just to remove you can use only $("#custom_"+custom_id).remove(); how easier it can gets? */
  3.             /* div removed. now reordering to keep custom fields sequential
  4.             so we will not waste loops handling the dynamic form */
  5.             var cnt = 1; // this will store how many items I have left.
  6.             var limit = $("#i").val(); // this is my "next dynamic id" var.. remember?
  7.             for( i=1; i <limit; i++) {
  8.                 if ($("#custom_"+i).size()> 0) {  // does this element exist?
  9.                     if (i != cnt) { /* Oops! something was deleted and this is not sequential. rename. */
  10.                         $("#custom_"+i).attr("id", "custom_"+cnt ); // renaming the child div...
  11.                         $('[@name=custom_title_' + i + ']').attr("name", "custom_title_"+cnt );  // ... and the field
  12.                     }                    
  13.                     cnt++; // done with this. Next please!
  14.                 }
  15.             }
  16.             $("#i").val(cnt); // when the 'for' ends, the "cnt" var will have the real "next dynamic id" so I can replace my actual "i" value.
  17.             //alert($("#i").val()); // debug, activate to see how it works.
  18.            
  19.         }

I'm glad you still haven't killed yourself. Now let's put everything together and see it working
This is our sample page (copy&paste, save as a regular html and don't forget to adjust the jquery.js src!!!):

PLAIN TEXT
HTML:
  1. <html><head><title>Hello!</title>
  2.         <script type="text/javascript" src="js/jquery.js"></script>
  3.         <script language="JavaScript">
  4.         function addInfo() {
  5.             var i = $("#i").val();
  6.             newDiv = document.createElement('div');
  7.             newDiv.setAttribute('id', 'custom_'+i);   
  8.             newDiv.setAttribute('style', 'display: none');
  9.             newDiv.innerHTML = '<h1>Content Here!!!</h1>Custom field: <input type="text" name="custom_title_'+i+'"><a href="javascript:void(0);" onClick="javascript:delInfo('+i+');">[ Remove ]</a>';
  10.             $('#dynamic').append(newDiv);
  11.             $('#custom_'+i).show("slow");
  12.             $("#i").val(++i);
  13.         }
  14.        
  15.         function delInfo(custom_id) {
  16.             $("#custom_"+custom_id).hide("slow", function () { $("#custom_"+custom_id).remove(); });           
  17.             /* div removed. now reordering to keep custom fields sequential
  18.             this is important to keep */
  19.             var cnt = 1;
  20.             var limit = $("#i").val();
  21.             for( i=1; i <limit; i++) {
  22.                 if ($("#custom_"+i).size()> 0) { 
  23.                     if (i != cnt) { /* not sequential. rename. */
  24.                         $("#custom_"+i).attr("id", "custom_"+cnt );
  25.                         $('[@name=custom_title_' + i + ']').attr("name", "custom_title_"+cnt );
  26.                     }                    
  27.                     cnt++;
  28.                 }
  29.             }
  30.             $("#i").val(cnt);
  31.             //alert($("#i").val()); // debug
  32.            
  33.         }
  34. </script></head><body>
  35.        
  36. <p>test page testing jquery to manipulate page elements</p>
  37. <form name="foo">
  38. <input type="hidden" name="i" id="i" value="1">
  39.                     <!-- dynamic part. build with js -->
  40.                     <div id="dynamic">
  41.                                
  42.                     </div>
  43.                 <div id="more"><a href="javascript:void(0);" class="more" onClick="javascript:addInfo();">Click me!</a></div>      
  44. </form>      
  45. </body>
  46. </html>

...and we didn't use any of the "hottest" things about jQuery!!

I hope you enjoyed this [not that] short post. See you next time!
-bigo

1 Comment so far

  1. kmh March 10th, 2008 11:39 am

    Thanks, that was quite useful. There is a small problem with your script, though - in the hiding function, the callback should include all subsequent code to ensure that the renumbering doesn’t happen before the element is removed. Currently this can happen, as the remove callback might only be started after the execution of all other code.

    kmh

Leave a reply