You are viewing limited content. For full access, please sign in.

Question

Question

Counting number of items in Forms Collection

asked on July 31, 2017 Show version history

Is it possible to count the number of items added to Collection in Forms 10.2 and display it in a textbox?

 

Thanks

Priya

0 0

Replies

replied on July 31, 2017 Show version history

Hi Priya,

This snippet will work, I just tested it out:

$(document).ready(function() {  
  
  var count = 1;
  
  $('.collectioncount input').val(count);
  
  $(document).on('click', '.cf-collection-append, .cf-collection-delete', function() {
    count = $('.collection').find('ul.rpx').length;
    $('.collectioncount input').val(count);
  });
  
});

Just be sure to assign the class 'collection' to your collection and the class 'collectioncount' to the single line field you want to use to display the count.

~Rob

5 0
replied on July 31, 2017 Show version history

Very clean, but if you use '.cf-collection' instead of '.collection', you don't need to add the custom class to that item.

Also, if you have more than one collection on a form, you'll need to add some additional selectors.

1 0
replied on July 31, 2017

Thanks! I figured a custom class (or classes) would help avoid issues with multiple collections.

1 0
replied on July 31, 2017

True, that's one way to go. I usually grab the identifier for the parent and add that to the selector, such as '#q1 .cf-collection'

I like that because those are visible in the css/javascript editing tab so it is easier for me to keep them straight while editing the code.

Pros and cons to both ways so it kind of comes down to personal preference.

1 0
replied on July 31, 2017

Definitely--for me it's contextual. Sometimes I use IDs, but I usually prefer the custom class method because it allows me to code in a fashion that feels more like natural language. It's also extensible in the sense that I can copy/paste the JS from one process to another, assign the custom classes to the relevant fields, and call it day, sans updating IDs. 

1 0
replied on July 31, 2017

Very true!

1 0
replied on July 31, 2017

I believe you're looking for something like this:

$(document).ready(function(){  
  // assign event handlers for when a row is added/deleted
  // replace '99' with the id number of your collection
  $('#q99 .cf-collection-append, #q99 .cf-collection-delete').click(function(){
    collectionCount();
  });
});

function collectionCount(){
  // grab the count of items in the collection
  // replace '99' with the id number of your collection
  var count = $('#q99 .rpx').length;
  
  // update a field with the count value
  // replace '100' with the id number of your target field
  $('#Field100').val(count);
  
  // assign handlers to the delete button for any added rows
  // replace '99' with the id number of your collection
  $('#q99 .cf-collection-delete').click(function(){
    collectionCount();
  });
}

Basically, each group in a collection includes a ul element with the rpx class. So, we create a function that counts those objects, and have it fire each time the user adds or removes a collection item by using the 'click' event for the collection's add and remove buttons. The event is also bound within the function so the new delete buttons created when a row is added will also have the event handler.

3 0
You are not allowed to follow up in this post.

Sign in to reply to this post.