using conditionals in jquery

Question

Hi, just trying to tie up a few loose odds and ends here. I have the following code:

$(function(){
 // start a counter for new row IDs
 // by setting it to the number
 // of existing rows
 var newRowNum = 2;

 var quantity = 1;
 // bind a click event to the "Add" link
 $("a").bind("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="Recipient 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 );
  $('textarea', 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;
  quantity += 1;
  // add the remove function to the new row
  $('a.remove', newRow).click(function(){
   $(this).parent().parent().remove();
   document.tp01.quantity.value = quantity-1;
   return false;    
  });

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

});

What I am trying to do is use a conditional block here which tests to see if quantity = 6 and if so, not allow the user to add a new row (email recipient). I have tried the following:

    if(quantity < 7) {
  addRow.before(newRow);
  };

to test if quantity is less than seven (6 max) and only then allow them to add a new row. This does not work. I have also tried:if(quantity < 6) { quantity += 1; };

to test if the quantity was less than 6 and if so, add one to the value. Otherwise nothing. This does not work.

Basically, what I need to do is, everytime someone adds a row, I need to increment the quantity (which it is now doing correctly) but not allow them to add more than 6 rows (which it is NOT doing correctly).

As always, your help is appreciated.

Dave

Answer 1

Try pulling quantity out of the document.ready.

var quantity = 0;

$(function()...

My guess is that the quantity variable is no longer in scope when you go back into the event handler.