CODEWITHSUNDEEP
javascriptjquery
DragonSlayer
DragonSlayer

Reputation: 837

Jquery increment numbers with a limit of 5

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

Upvotes: 0

Views: 5193

Answers (5)

Guffa
Guffa

Reputation: 700552

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 comparison 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>');
    }

  });

});

Upvotes: 3

codeandcloud
codeandcloud

Reputation: 55248

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);
});

Upvotes: -2

m90
m90

Reputation: 11822

When you try to compare 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 compare 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".

Upvotes: 2

Tatu Ulmanen
Tatu Ulmanen

Reputation: 124818

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 comparison 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".

Upvotes: 1

Igor Dymov
Igor Dymov

Reputation: 16460

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.net/Daess/fukxu/

Upvotes: 2

Related Questions