Question

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.