Is it possible to count the number of items added to Collection in Forms 10.2 and display it in a textbox?
Thanks
Priya
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
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.
Thanks! I figured a custom class (or classes) would help avoid issues with multiple collections.
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.
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.
Very true!
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.