CODEWITHSUNDEEP
javascriptjquery
J.Zil
J.Zil

Reputation: 2449

How to implement a simple error with counter jquery

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.

Upvotes: 0

Views: 68

Answers (3)

Matt Harrison
Matt Harrison

Reputation: 13587

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.

Upvotes: 1

pmandell
pmandell

Reputation: 4328

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

Upvotes: 2

chockleyc
chockleyc

Reputation: 581

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

Upvotes: 0

Related Questions