Array max length not working

Question

When I click on an image it should be adding it to an array, however the max lenght of the array is 6, therefore if there are already 6 objects in the array it should alert and stop letting the user click on any new image.

When I run the following I can keep adding images and the alert never happens.

      jQuery('body').on('change', '.masonry .item :checkbox', function () {
        var urls = [];
        urls.length = 6;
        if (jQuery(urls.length > 6)) {
          alert("Puoi aggiungere un massimo di 6 immagini");
        } else {
          jQuery('.masonry .item :checkbox:checked').each(function () {
            urls.push(jQuery(this).next('label').find('img').attr('src'));
          });
        }
      });

Whats this: jQuery(urls.length > 6) This will be something like $(false) or $(true) — Rajesh Dixit
– Rajesh Dixit, Commented Apr 16, 2017 at 4:43
@Rajesh I thought that is how you set the length of an array var urls = []; — Roberto Marras
– Roberto Marras, Commented Apr 16, 2017 at 4:43
@Rajesh yes and if it true means that the array length is more than 6, or at least this is what I thought — Roberto Marras
– Roberto Marras, Commented Apr 16, 2017 at 4:44
if (jQuery(urls.length > 6)) { should be just if (urls.length > 6) {! — ibrahim mahrir
– ibrahim mahrir, Commented Apr 16, 2017 at 4:45

ibrahim mahrir · Accepted Answer · 2017-04-16 05:11:27Z

2

You'll have to check the length of the checked items, not an empty array.

jQuery('body').on('change', '.masonry .item :checkbox', function () {
    var urls = [];
    var checkedItems = jQuery('.masonry .item :checkbox:checked'); // get the checked items
    if (checkedItems.length > 6) {                                 // if the checked items are more than 6, ...
        alert("No! No! No! Only 6!");
        jQuery(this).prop("checked", false);  //<<< UNCHECK THE ELEMENT JUST CHECKED SO THE COUNT REMAINS 6
    } else {
        checkedItems.each(function () {
            urls.push(jQuery(this).next('label').find('img').attr('src'));
        });
    }
});

edited Apr 16, 2017 at 5:11

answered Apr 16, 2017 at 4:52

ibrahim mahrir

31.8k5 gold badges50 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Roberto Marras Over a year ago

almost but i can still add it after the alert, check jsfiddle.net/ya7uefet/10

ibrahim mahrir Over a year ago

@RobertoMarras You want to undo the checking if there is more than 6 items?

ibrahim mahrir Over a year ago

@RobertoMarras Check the new update (look for the //<<<)!

Roberto Marras Over a year ago

This works as I cannot add anymore images however do you have any idea why the alert isn't happening?

ibrahim mahrir Over a year ago

Here is what I'm talking about: i.sstatic.net/sK877.png! When the alert box pops up a lot, the browser will show you this option and you probably check it by accident!

|

Srikanthkumar · Accepted Answer · 2017-04-16 04:53:49Z

0

Declare your urls array as a global variable. Remove urls.length=6; it has no effect. Modify your if condition to If (urls.length >6)

answered Apr 16, 2017 at 4:53

Srikanthkumar

695 bronze badges

Comments

Rajesh Dixit · Accepted Answer · 2017-04-16 05:04:29Z

0

In my understanding, following code is causing issue:

jQuery('.masonry .item :checkbox:checked').each(function() {
  urls.push(jQuery(this).next('label').find('img').attr('src'));
});

Say you have 10 images, so on every click, you are pushing 10 times. You should only push current element once. Try checking if element exists. If yes, do not push it.

Following is a sample fiddle of how I would do it. It does not use jQuery,, but you can adapt your code accordingly.

JSFiddle

Edit

Updated Fiddle

Issue is:

jQuery('body').on('change', '.masonry .item :checkbox', function() {
    var urls = [];

You are initialising urls in every click. So it will always have length = 0

It should be outside the handler's scope.

edited Apr 16, 2017 at 5:04

answered Apr 16, 2017 at 4:59

Rajesh Dixit

25k5 gold badges52 silver badges86 bronze badges

3 Comments

Roberto Marras Over a year ago

this looks promising, could you elaborate it in jQuery based on the code in the question for future users?

Roberto Marras Over a year ago

hmm but now it isn't removing the items if I uncheck them

Rajesh Dixit Over a year ago

I guess you will have to code extra for that. And that is not covered in question. Please try yourself and if you are stuck somewhere, please feel free to add a comment

heraldo · Accepted Answer · 2017-04-16 05:16:17Z

0

You can instead get the length of the checked elements at the time the checkboxes are clicked. It's a bit more straightforward. I also prevented any checkbox after 6 from being enabled.

var urls = []; // if you wish to use it outside, make it global

$('.masonry :checkbox').on('click', function(e){

  var selected = $('.masonry :checkbox:checked');

  if( selected.length > 6 ){
    alert( 'Sorry, no more than 6' );
    e.preventDefault(); // stops the checkbox from being selected
    return;
  }

  // do what you wish with the selected ones
  // selected.each()

})

Here is a working codepen: https://codepen.io/h3raldo/pen/vmOXrJ

answered Apr 16, 2017 at 5:16

heraldo

1977 bronze badges

Comments

Mohammad Arshad Alam · Accepted Answer · 2017-04-16 05:25:24Z

0

use if (urls.length > 6) instead of if (jQuery(urls.length > 6))

This is working as expected.

var urls = [];
urls.length = 6;
document.write(urls.length);
document.write("<br>");
document.write(urls.length > 6)

/*declare urls array outside of your method, use click event and event.preventDefault(); to stop checkbox to being check. */

var urls = [];

jQuery('body').on('click', '.masonry .item :checkbox', function (event) {
          //alert(urls.length);
            if (urls.length > 5) {
              alert("Puoi aggiungere un massimo di 6 immagini");
              event.preventDefault();
            } else {
            //alert(jQuery(this).next('label').find('img').attr('src'))
         urls.push(jQuery(this).next('label').find('img').attr('src'));

            }
          });

edited Apr 16, 2017 at 5:25

answered Apr 16, 2017 at 4:44

Mohammad Arshad Alam

9,8626 gold badges41 silver badges63 bronze badges

Comments

Dalin Huang · Accepted Answer · 2017-04-16 05:30:39Z

check this solution, hope it helps, you can check the console.log to see the updated url and urls count.

1st declare array urls out side the change event.

inside if using the to stop check more img

inside else empty urls array first (in case you are uncheck one checkbox, in that case you don't want to push, you want to take it out, to make it simple just empty that list and add each checked to array (for sure you need to improve this but for now this is the fastest working solution))

I have two console log at the end so you can verify the urls and length.

var urls = [];
jQuery('body').on('change', '.masonry .item :checkbox', function() {
  if ($('input[type=checkbox]:checked').length > 6) {
    alert("Puoi aggiungere un massimo di 6 immagini");
    var $checkbox = $(this);
    // Ensures this code runs AFTER the browser handles click however it wants.
    setTimeout(function() {
      $checkbox.removeAttr('checked');
    }, 0);
    event.preventDefault();
    event.stopPropagation();
  } else {
      urls = [];
    jQuery('.masonry .item :checkbox:checked').each(function() {
      urls.push(jQuery(this).next('label').find('img').attr('src'));
    });
  }
    console.log('this urls-->' + urls);
    console.log('this urls length-->' + urls.length);
});

https://jsfiddle.net/dalinhuang/5rLh3bq2/4/

Yogesh Mistry · Accepted Answer · 2017-04-16 05:46:53Z

If you need the srcs of at most 6 checked inputs, you can create an object in which you can set and delete items as per their checked status. Also, by using click event, you can prevent the checkbox from being checked unnecessarily (which will require you to uncheck it manually). Find the working fiddle here and the working snippet below.

var urls={};
console.clear();
jQuery('body').on('click', '.masonry .item :checkbox', function (e) {
	var this_id = jQuery(this).attr("id");
  var is_checked = jQuery(this).is(":checked");
   if(is_checked){
      if (Object.keys(urls).length < 6){
         urls[this_id] = jQuery(this).next('label').find('img').attr('src');
      } else {
      	alert("Puoi aggiungere un massimo di 6 immagini");
        e.preventDefault();
        return false;
      }
   } else {
   		delete(urls[this_id]);
   }
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="masonry"><div class="item"><input type="checkbox" name="thing_1" value="valuable" id="thing_1"><label for="thing_1"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_2" value="valuable" id="thing_2"><label for="thing_2"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_3" value="valuable" id="thing_3"><label for="thing_3"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_4" value="valuable" id="thing_4"><label for="thing_4"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_5" value="valuable" id="thing_5"><label for="thing_5"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_6" value="valuable" id="thing_6"><label for="thing_6"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_7" value="valuable" id="thing_7"><label for="thing_7"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_8" value="valuable" id="thing_8"><label for="thing_8"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_9" value="valuable" id="thing_9"><label for="thing_9"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_10" value="valuable" id="thing_10"><label for="thing_10"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_11" value="valuable" id="thing_11"><label for="thing_11"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_12" value="valuable" id="thing_12"><label for="thing_12"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_13" value="valuable" id="thing_13"><label for="thing_13"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_14" value="valuable" id="thing_14"><label for="thing_14"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_15" value="valuable" id="thing_15"><label for="thing_15"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_16" value="valuable" id="thing_16"><label for="thing_16"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_17" value="valuable" id="thing_17"><label for="thing_17"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_18" value="valuable" id="thing_18"><label for="thing_18"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_19" value="valuable" id="thing_19"><label for="thing_19"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_20" value="valuable" id="thing_20"><label for="thing_20"><img class="img-responsive" src=""></label></div></div>

Collectives™ on Stack Overflow

Array max length not working

7 Answers 7

10 Comments

Comments

3 Comments

Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

10 Comments

Comments

3 Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related