Question

jquery capture all values in collection

Forms How To

Updated November 30, 2016

asked on November 29, 2016

I am creating an incident reporting form which reports different types of incidences. I have a drop-down from which the user will choose a type of incident. Since each incident report can cover one or more different types of incidences the drop-down is inside a collection to allow multiple choices. I also have sections that correspond to the different incidences and I would like to expand only the section(s) that have had the incident type selected. I am able to expand the section for the first choice but when I click the "add incident" link and choose a second type, my script doesn't run because the id of the second drop-down is different from the first.

My question is how do I capture all one or more incident type choices so I can expand only the sections needed?

0 0

Replies

replied on November 29, 2016

Did you register change event on the drop-down field? If so, you need to register event again when you added a new row in collection.

And to query all dropdown fields, you can add custom CSS class to the field and use class instead of id to do the query.

0 0

replied on November 30, 2016

I'm new to this so you'll have to give me more detail.

$(document).ready(function() {
  $('#q6 select').change(function () {
    if ($('#q6 select').val() == 'Property Damage')
    {
      $('#q13 .collapsible').trigger('click');
    }
  });
});

The above code works expanding the correct section. What do you mean by having to register the event again?

0 0

replied on November 30, 2016

$('#q6 select').change(function) binds the function as event handler to the "change" event on #6. The function won't work on your newly added rows because the event handler is not registered on the newly populated field.

Possible way to resolve adding new row:

$(document).ready(function() {
  function bindChange() {    
    $('#q6 select').change(function () {
      if (_.some($('#q6 select'), function(item) {return $(item).val() == 'choice 1'}))
      {
        $('#q13 .collapsible').trigger('click');
      }
    });
  }
  bindChange();
  $(".cf-collection-append").click(function(){
    bindChange();
  });
});

Besides, $('#q6 select') could be used for querying new rows so you don't need to change it.

0 0

You are not allowed to follow up in this post.

Question

Question

jquery capture all values in collection

Replies

Sign in to reply to this post.