javascript - Jquery increment numbers with a limit of 5 - Stack Overflow

I'm adding text fields with a onclick. What I'm trying to do is limit the amount of boxes to about 5.

I also need to increment the number to use as an ID.

my code:

jQuery('#add_slider_image').click(function() {

        var i = 0
        var plus = ++i;


        jQuery('.form-table').append("<tr><td><input type'text' value='' name='slider[]' /><input type='button' name='sliderbut' value='Upload' id='button' rel='"+ plus +"' /></td><tr>");

        var count = jQuery.('#button').attr('rel');

        if(count=5){
         alert('Limit reached');
        }
    })

THanks

I'm adding text fields with a onclick. What I'm trying to do is limit the amount of boxes to about 5.

I also need to increment the number to use as an ID.

my code:

jQuery('#add_slider_image').click(function() {

        var i = 0
        var plus = ++i;


        jQuery('.form-table').append("<tr><td><input type'text' value='' name='slider[]' /><input type='button' name='sliderbut' value='Upload' id='button' rel='"+ plus +"' /></td><tr>");

        var count = jQuery.('#button').attr('rel');

        if(count=5){
         alert('Limit reached');
        }
    })

THanks

• javascript
• jquery

Share Follow asked Aug 31, 2011 at 7:03 DragonSlayerDragonSlayer 83733 gold badges1414 silver badges2727 bronze badges 3

• make var i = 0 global, put it outside of the click handler so it doesn't reset to zero every time you click. – tradyblix Commented Aug 31, 2011 at 7:11
• So what is going wrong? Other than that you've said if(count=5){ using = instead of ==... – nnnnnn Commented Aug 31, 2011 at 7:11
• Thanks tradyblix for pointer of making var i global, helped – DragonSlayer Commented Aug 31, 2011 at 7:38

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

You have to put the counter variable outside the event handler, otherwise you will be starting over from zero each time.

You should put the code that adds the elements inside the if statement, so that you either show a messare or add the elements.

There is no point in reading the value from the button that you just added, when you already have the value. Besides, an id should be unique, so you would not get the value from the last button but the first.

The parison operator is ==, if you use = you will instead assign a value to the variable, so the condition would always end up being true.

$(document).ready(function(){

  var sliderCount = 0;

  jQuery('#add_slider_image').click(function() {

    if (sliderCount == 5) {
      alert('Limit reached');
    } else {
       sliderCount++;
       jQuery('.form-table').append('<tr><td><input type="text" value="" name="slider[]" /><input type="button" name="sliderbut" value="Upload" rel="'+ sliderCount +'" /></td><tr>');
    }

  });

});

I guess something like this should work:

jQuery('#add_slider_image').click(function() {

    var count = jQuery("input[name='sliderbut']").length;

    if (count < 5){
        jQuery('.form-table').append("<tr><td><input type='text' value='' name='slider[]' /><input type='button' name='sliderbut' value='Upload' /></td><tr>");
    }
})

A bit simplified fiddle there: http://jsfiddle/Daess/fukxu/

When you try to pare the "count" with the number 5 you have to use == instead.

count = 5 will set count to 5 and always return true if you use count == 5 it will pare your variable with the number 5 and return true or false, depending on the value of the variable.

Also I think you can easily count the number of buttons by using length, sth like: $('.button').length should return the number of elements with the class (not ID) "button".

var i = 0
var plus = ++i;

This part means that plus will always be zero and i == 1, so your rel attribute always reads 0.

var count = jQuery.('#button').attr('rel');

You are using an ID selector. And ID can exist only once per page. As you use an ID selector, you get only the first matched element which will obviously not be the one you want as you want the number in the last element.

if(count=5){

..but it doesn't matter anyway because now you're just telling that count equals 5 and the alert will always execute. What you are looking for is the parison operator ==.

Easiest way to do this is to ditch the counts and whatnots, and just check if there are already too many elements before inserting:

jQuery('#add_slider_image').click(function() {

    if($('.form-table .myRow').length < 5) {
        jQuery('.form-table').append('<tr class="myRow"><td><input type="text" name="slider[]" /><input type="button" name="sliderbut" value="Upload" class="button" /></td><tr>');
    }
});

Note that I added the myRow class to help identify which rows are appended and changed the id="button" to class="button".

Try this.

jQuery('#add_slider_image').click(function() {
    var myHTML = "";
    var current_count = jQuery('.form-table tr').length();
    if (current_count >= 5) return;
    for (var i = current_count; i <= 5; i++) {
        myHTML += "<tr><td><input type'text' value='' name='slider[]' /><input type='button' name='sliderbut' value='Upload' id='button" + plus + "' rel='" + plus + "' /></td><tr>";
    }
    //touch DOM once
    jQuery('.form-table').append(myHTML);
});