Accessing function from multiple forms on same page.

Question

Hi,

I have the following function:

<script type="text/javascript">
     $(function(){
      // start a counter for new row IDs
      // by setting it to the number
      // of existing rows
      var newRowNum = 2;

      // bind a click event to the "Add" link
      $('#addnew').click(function() {
       // increment the counter
       newRowNum += 1;

       // get the entire "Add" row --
       // "this" refers to the clicked element
       // and "parent" moves the selection up
       // to the parent node in the DOM
       var addRow = $(this).parent().parent();

       // copy the entire row from the DOM
       // with "clone"
       var newRow = addRow.clone();

       // set the values of the inputs
       // in the "Add" row to empty strings
       //$('input', addRow).val('');
       //$('name', addRow).val('os' + newRowNum);

       // replace the HTML for the "Add" link 
       // with the new row number
       $('td:first-child', newRow).html('<input type="hidden" name="on' + newRowNum + '" value="Email Address ' + (newRowNum - 1) + '">Recipient');

       // insert a remove link in the last cell
       $('td:last-child', newRow).html('<a href="" class="remove">Remove<\/a>');

       // loop through the inputs in the new row
       // and update the ID and name attributes

       $('input:hidden', newRow).attr('id','on' + newRowNum ).attr('name','on' + newRowNum );
       $('input:text', newRow).attr('id','os' + newRowNum ).attr('name','os' + newRowNum );

       // insert the new row into the table
       // "before" the Add row
       addRow.before(newRow);
       document.tp01.quantity.value = newRowNum-1;
       // add the remove function to the new row
       $('a.remove', newRow).click(function(){
        $(this).parent().parent().remove();
        return false;    
       });

       // prevent the default click
       return false;
      });
     });

     </script>

This function is called by clicking on a link in a form (this function adds or removes rows from a table). The link looks like this:

<a id="addnew" href="">Add</a>

I need to put more forms on the same page accessed by a link in each of those forms that is, as far as the user is concerned, exactly the same as the one shown above. Can someone make suggestions as to how I can reuse the same function to accomplish this?

Thanks

Dave

Answer 1

move the embedded script to an external JS file:

var newRowNum = 2;

var bindLink = function(linkSelector)
{
    // bind a click event to the "Add" link
    $(linkSelector).click(function() {
        ...
    }
}

Then in place of the embedded script put a call to bindLink('#addnew') in your ready handler.