Question

Pre-Select Drop-Down Values in Collection

Forms

Updated January 5, 2017

asked on January 1, 2017

I have a drop-down field inside a collection, it lists all of our office locations. The values available in the drop-down are populated by a database lookup. I want the drop-down field by default to automatically select the location where the form initiator works. I have a hidden Single Line field that is populating the form initiator's location from the database.

This is all working great to select the initiator's location for the first record in the collection, but it doesn't work for additional records added to the collection. I'm sure I'm just missing some silly detail.

Does anyone have any suggestion on how to get this to work with all records in the collection?

Here is the code I am currently using:

$('#q59 input').change(function () { 
  var s = $('#q59 input').val();
  $('#q31 option').filter(function () { return $(this).html() == s; }).prop('selected', true);
});

q59 is the hidden Single Line field where the form initiator's office location is populated from the database, this code triggers after that value is loaded.

q31 is the drop-down field inside my collection that lists all of the possible office locations.

1 0

Answer

SELECTED ANSWER

replied on January 5, 2017 • Show version history

Now I feel kind of silly @████████ - I feel like that should have been obvious to me.

In my defense, I've had the flu and my mind was not right

So using the code you provided, I was able to trigger the function each time a record was added to the collection. But of course, I only needed to edit the new record that was added, and not edit any of the other records, and I was struggling with that a bit. Then it dawned on me, I was already doing that elsewhere in a table, I just needed to tweak it to work with a collection instead. Here's the code I ended up with:

//when a new record is added to the collection, set the branch dropdown to the user's default branch.
  $("#q18 .cf-collection-append").on("click", function() {
    var s = $('#q59 input').val();
    $('#q18 ul:last').find('#q31 option').filter(function () { return $(this).html() == s; }).prop('selected', true);
  });

#q18 is my collection, and #q31 is the dropdown field inside the collection that contains the list of office locations. #q59 is a hidden single line field outside the collection that is populated by a lookup and contains the initiator's default location.

This part: $('#q18 ul:last').find('#q31 option')... is used to find the very last record in the collection and find the office location dropdown within that record. In a table it would be tr:last instead of ul:last.

1 0

Replies

replied on January 3, 2017

If you're already looking up the initiator's office, why don't you hook up that look up rule directly to the location dropdown field in the collection? That will auto-select that option when a new collection item is added.

0 0

replied on January 3, 2017

Unless there is some trick I haven't figured out, when I populate the dropdown with the lookup of the initiator's assigned office location, the dropdown only ends up showing the one value - the office they work at. I need the dropdown to provide the full list of all office locations, and just be pre-selected to the office the initiator works at.

0 0

View 1 previous reply

replied on January 3, 2017 • Show version history

Are you on Forms 10.1?

In any case, a quick workaround would be to use a static hidden single line field inside the collection and plugging the initiator's location into that, then taking that value and selecting the corresponding option from the location dropdown inside the same collection. That's still easier than your initial approach (which is actually quite tricky due to the way Forms names its fields in collections).

1 0

replied on January 3, 2017

Yeah, I'm in 10.1 update 3.

I like what you are recommending better that what I have been doing, but the part I'm struggling with is when to trigger it. I'm running it in the document load event, but of course only the initial record in the collection is displayed when the document loads, so the value only gets selected in that record. So I need to be able to recognize when a new record has been added to the collection, and update the selected value in that record as well. I just can't figure out how to do that.

0 0

replied on January 3, 2017

You can add an onclick event listener to the collection add buttons:

$(".cf-collection-append").on("click", function() {
    //your code here
});

If you have more than one collection on your form, you can use a more specific selector to target a specific collection's add button, for example "#q43 .cf-collection-append"

1 0

SELECTED ANSWER

replied on January 5, 2017 • Show version history

Now I feel kind of silly @████████ - I feel like that should have been obvious to me.

In my defense, I've had the flu and my mind was not right

//when a new record is added to the collection, set the branch dropdown to the user's default branch.
  $("#q18 .cf-collection-append").on("click", function() {
    var s = $('#q59 input').val();
    $('#q18 ul:last').find('#q31 option').filter(function () { return $(this).html() == s; }).prop('selected', true);
  });

1 0

You are not allowed to follow up in this post.

Question

Question

Pre-Select Drop-Down Values in Collection

Answer

Replies

Sign in to reply to this post.