The jQuery JavaScript library offers some quick and dirty solutions to many problems. I was perusing a jQuery email list when I ran across a simple problem that a beginner JavaScript coder like me could solve. I'll simplify it a little here to focus this article.

Basically, the poster wanted to add form fields to a table, but he wanted to increment a field counter in the HTML and in the id and name tags. Just to make it a little more difficult, the field numbers needed to be padded with leading zeros.

Adding the table rows is trivial in jQuery and it turns out that leading zeros are pretty easy too. I like the "everything is an object" approach to JavaScript. You can extend even the built-in objects including the String object. Let's tackle that first.

The String object does not have a built-in method of repeating characters and a quick search on the Internet found an efficient solution. We need this to pad the leading zeros. You may want to look up how prototype works, but this is pretty basic JavaScript, so I'll skip the explanation of how it works.

PLAIN TEXT
JavaScript:
  1. // Add repeat method to String object
  2. String.prototype.repeat = function(n){
  3.     return new Array(n + 1).join(this);
  4. };

We can now do something like this: '0'.repeat(3) to get a string of three zeros ("000"). Next, we can write a short padding routine. I like to think into the future when writing code. Will I need something like this again? Can I make it dynamic? Here's what I came up with.

PLAIN TEXT
JavaScript:
  1. // Add leading_zeros
  2. var leading_zeros = function(n, total_digits){
  3.     n = n.toString();
  4.     return '0'.repeat(total_digits - n.length) + n;
  5. };

To make this work with jQuery, I like to add it as a jQuery plug in. That's a fancy way of saying that I will add a method to the jQuery object to allow padding. I don't strictly have to do it this way, but I like showing off and I think it makes for cleaner, more usable code. The jQuery Plug In Manual reveals that we should start a new Plug In with this block of code.

PLAIN TEXT
JavaScript:
  1. (function(){})();

It is not obvious that this function will run autmatically. I couldn't easily find that in many JavaScript reference on line. Next we add some jQuery stuff to this code block. This allows us to safely use the $ inside the block without screwing with other libraries which may be running.

PLAIN TEXT
JavaScript:
  1. (function($){})(jQuery);

There's one more thing in there I would like to point out. It was not obvious to me when I first looked at this block and it may confuse some readers. According to most resources I found on the web, the $ is not a legal character in a JavaScript variable name.

After some investigation, I found an EcmaScript specification which stated that the $ character is valid as a first character in a variable name. And since JavaScript variables can have just one character, $ is a valid variable name. It is also the name the library author chose to use for the jQuery object.

PLAIN TEXT
JavaScript:
  1. (function($) {
  2.  
  3.     // Add repeat method to String object
  4.     String.prototype.repeat = function(n){
  5.         return new Array(n + 1).join(this);
  6.     };
  7.  
  8.     // Add leading_zeros method to jQuery
  9.     $.leading_zeros = function(n, total_digits){
  10.         n = n.toString();
  11.         return '0'.repeat(total_digits - n.length) + n;
  12.     };
  13.  
  14. })(jQuery);

We can now use $.leading_zeros(1, 3) to produce a padded string ("001"). Now we need a counter. This will take a static variable. A static variable holds it's contents between calls. In JavaScript, we just need to declare the variable outside the function and it will act as a static variable.

PLAIN TEXT
JavaScript:
  1. // initialize the counter
  2. var counter = 0;
  3.  
  4. var count = function(){
  5.     return ++counter;
  6. };
  7.  
  8. alert( count() ); // 1
  9. alert( count() ); // 2
  10. alert( count() ); // 3

Because of the way scope works, the value of the variable counter is saved between calls to the subroutine count() and we count up in the alerts. Let's wrap this up in the document ready portion of this jQuery application.

PLAIN TEXT
JavaScript:
  1. $(document).ready(function(){
  2.  
  3.     // initialize the counter
  4.     var counter = 0;
  5.  
  6.     $('#fields-button').click(function(){
  7.  
  8.         // increment and pad the counter
  9.         var padded_counter = $.leading_zeros(++counter, 3);
  10.  
  11.         // create the new field
  12.         var extrafield = '<tr><td>List Item ' + padded_counter + '</td><td>';
  13.         extrafield += '<input type="text" name="' + padded_counter + '"'
  14.         extrafield += ' id="' + padded_counter + '"></td></tr>'
  15.  
  16.         // add the new field to the table
  17.         $('#fields').append(extrafield);
  18.     });
  19. });

Putting it all together we get this.

PLAIN TEXT
HTML:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.dfwrein.com/html4-embed.dtd">
  4.     <title>Foo</title>
  5.     <script type="text/javascript" src="/site/code/jquery-1.2.2.pack.js"></script>
  6.     <script type="text/javascript">
  7.  
  8.         (function($) {
  9.  
  10.             // Add repeat method to String object
  11.             String.prototype.repeat = function(n){
  12.                 return new Array(n + 1).join(this);
  13.             };
  14.  
  15.             // Add leading_zeros method to jQuery
  16.             $.leading_zeros = function(n, total_digits){
  17.                 n = n.toString();
  18.                 return '0'.repeat(total_digits - n.length) + n;
  19.             };
  20.  
  21.         })(jQuery);
  22.  
  23.         $(document).ready(function(){
  24.  
  25.             // initialize the counter
  26.             var counter = 0;
  27.  
  28.             $('#fields-button').click(function(){
  29.  
  30.                 // increment and pad the counter
  31.                 var padded_counter = $.leading_zeros(++counter, 3);
  32.  
  33.                 // create the new field
  34.                 var extrafield = '<tr><td>List Item ' + padded_counter + '</td><td>';
  35.                 extrafield += '<input type="text" name="' + padded_counter + '"></td></tr>';
  36.  
  37.                 // add the new field to the table
  38.                 $('#fields').append(extrafield);
  39.             });
  40.         });
  41.  
  42.     </script>
  43. </head>
  45.     <button id="fields-button">Add Field</button>
  46.     <form action="some_srcipt.pl" method="get">
  47.     <table id="fields"></table>
  48. </form>
  49. </body>
  50. </html>