Streaming live at 10am (PST)

Set document download button based on the item selected in the select element using CMS collection

Scenario: I have 10 industries in which each have separate case study files as documents(.pdf). In a form these industries has to be listed in dropdown/select list. Once any industry is selected and click on the button next to it, the user should get the case study related the selected industry.

Work in progress: I have managed to get the list to connect it to the select field in the form. Currently I am struggling to get it connected to the button.

Much appreciate any help on the above.

Hey @Febin !

One way I was thinking about is having a Collection list for the Download buttons.
And then filter that collection with the option selected.

For instance, using finwsweet filter, you would have to put a hiddent text with the button.

Hope it helps :slight_smile:

Thank you @jptrinh for the response.
I have a collection list with button connected with download links which is hidden. I was looking for a custom code if any available. I am referring @PixelGeek youtube video to get the list from CMS collection.

Maybe you can try something like this :

// Insert code inside the 'each' loop
$( this ).on( "click", function() { //When clicking a select option
    var downloadLink = $( this ).siblings( 'button' ).attr( "href" ); // Get the link of the button collection, the button is a sibling of the text.
    $( '.button-main' ).attr( 'href', downloadLink ); // Change the link of your main button

Let me know how it goes, you can share the preview and read-only link of you run into some issues :slight_smile:

Hi @jptrinh,
I couldn’t figure out why it’s not working. Here is the read-only link
and preview link
Please have a look.

Oh wait I didn’t target the good element.
I think you can check with the :selected Selector | jQuery API Documentation
You would have to trigger a function each time an option is selected and get the value of the download link you want using the value of the option.

$( "select" )
  .change(function() {
      var link = "";
      $( "select option:selected" ).each(function() {
          var collectionButton= $(".cs-btn[value=" + $( this ).text() ] ); // Get the button in the collection matching the same values, not sure about the semantic, might need to work on that selector..
          linkButton = collectionButton.attr("href"); // Getting its link
      $( "#download-cs" ).attr( "href", link );
  .trigger( "change" );

That’s a really rough one, but the idea should work !