How to implement a simple error with counter jquery

Question

I have some code which adds fields but currently it adds an infinite abouts of boxes. How can I constrain it to only be a max of 10. I ideally want it to alert when I try to add more after 10.

http://jsfiddle.net/spadez/9sX6X/13/

var container = $('.copies'),
    value_src = $('#current');

$('.copy_form')
    .on('click', '.add', function(){
        var value = value_src.val();
        var html = '<div class="line">' +
            '<input class="accepted" type="text" value="' + value + '" />' +
            '<input type="button" value="X" class="remove" />' +
        '</div>';

        $(html).appendTo(container);
        value_src.val('');
    })
    .on('click', '.remove', function(){
        $(this).parents('.line').remove();
    });

The code I know:

alert("Only 10 allowed");

The code I had a go at:

var i = 0 // Set counter
i++ // Increment counter
if(i > 10) {
    alert("Only 10 allowed");
} 
else {
    // code to be executed
}

This is one of my first scripts and I wondered if I could get help on the right way to implement this because the code I tried above broke my current working code.

pmandell · Answer 1 · 2013-06-19T12:30:33.810

2

Within your click handler, check if the number of elements with the class line is less than 10.

if ($('.line').length < 10) { 
    //execute code
}else{
    alert('Only 10 allowed');
    return false;
}

Fiddle

edited Jun 19 '13 at 12:30

answered Jun 19 '13 at 12:24

pmandell

4,288
17
21

score 1 · Accepted Answer · edited May 23 '17 at 10:32

Rather than embedding 'magic numbers' in your code (see: What is a magic number, and why is it bad?), define a maxFields variable and maintain a count throughout, checking against that value each time another one tries to be added.

This allows your code to be more portable and reusable by someone else, or by you for another use case, when say you want 20 fields.

It also reads more like English (current field is less than max fields) which leads to self documentation.

http://jsfiddle.net/9sX6X/21/

var container = $('.copies'),
    value_src = $('#current'),
    maxFields = 10,
    currentFields = 1;

$('.copy_form').on('click', '.add', function () {
    if (currentFields < maxFields) {
        var value = value_src.val();
        var html = '<div class="line">' +
            '<input class="accepted" type="text" value="' + value + '" />' +
            '<input type="button" value="X" class="remove" />' +
            '</div>';

        $(html).appendTo(container);
        value_src.val('');
        currentFields++;
    } else {
        alert("You tried to add a field when there are already " + maxFields);
    }
})
    .on('click', '.remove', function () {
    $(this).parents('.line').remove();
    currentFields--;
});

From Wikipedia:

The term magic number also refers to the bad programming practice of using numbers directly in source code without explanation. In most cases this makes programs harder to read, understand, and maintain. Although most guides make an exception for the numbers zero and one, it is a good idea to define all other numbers in code as named constants.

score 0 · Answer 3 · answered Jun 19 '13 at 12:29

Here I used the .length method from jQuery.

var container = $('.copies'),
value_src = $('#current');

$('.copy_form')
.on('click', '.add', function(){
    if ($('.accepted').length < 10)
    {
    var value = value_src.val();
    var html = '<div class="line">' +
        '<input class="accepted" type="text" value="' + value + '" />' +
        '<input type="button" value="X" class="remove" />' +
    '</div>';

    $(html).appendTo(container);
    value_src.val('');
    }
    else
    {
        alert("Only 10 allowed");
    }
})
.on('click', '.remove', function(){
    $(this).parents('.line').remove();
});

Fiddle

How to implement a simple error with counter jquery

3 Answers3