How to trigger a button on another page after clicking a link

Design help Animations & Interactions
1

How do I trigger a specific button on another page after clicking a link

Here is my read-only link:
https://preview.webflow.com/preview/cms-library-0ed04b-59e20caaf1305018c977?utm_medium=preview_link&utm_source=dashboard&utm_content=cms-library-0ed04b-59e20caaf1305018c977&preview=b43bdac5677a2cb59532634b6492ef29&mode=preview

For example. I have two pages. ‘Home’ and ‘Filters’
The ‘Filters’ page has multiple buttons which when press will filter a CMS collection.
If I click the ‘Branding’ link it should link to the ‘Filters’ page with the ‘Branding’ button pressed/selected.

I probably need some custom code for this.
If anyone can help me out or point me in the right direction that’d be great!

Thanks!

2

Hey ho jchan!

Yes this is possible, you will need custom code.
There are multiple ways (with varying complexity) to achieve this:

URL-Parameters, — Cookies, — Web-workers

Okay, you will probably use url-params due to cookies being a tat overkill and webworkers being impossible to implement the “standard way” (no custom files in Webflow) and horrible to implement inline, as well for being overkill x 10. But it’s nice to know right?

[0] URL-Parameters:
You can dynamically add information or values to the URL, which can then on the page being navigated to – used to do stuff.

[1] Modifying the URL:
In Webflow you could give any button a fixed URL in the link-settings under the Element Settings (shortcut D). This is easy and useful IF the specific button only passes one parameter.

If the URL changes in the future you will need to update the link-setting manually - or the button breaks. That’s true for changes to the page that uses the parameter as well.

You can also compute the URL with parameters dynamically if the button is connected to multiple parameters (for example a form button and multiple inputs above it). This requires custom code on the origin-page too, instead of only the processing page.

So, let’s say you give the “Branding” button the URL:
https://yoursite.com/filter/example5`?branding=true`

The filter page now has the information the user provided via press of the button. You only need to utillise it.

[2] Getting the URL Parameter:
Place an inline-script above the </body> tag:

<script type="text/javascript">

// get url, get params from url, get specific param
var queryString = window.location.search,
urlParams = new URLSearchParams(queryString);

  // check if param exists
  if (urlParams.has('branding') === true) {
    branding = urlParams.get('branding');
    // toggle checkbox
    document.getElementById('branding').checked = true;
    // update content
    document.getElementById('YOUR_FORM_SUBMIT_BUTTON').click();
  }

</script>

IMPORTANT:
change the buttons on the filter page to checkboxes, otherwise it won’t work

Here’s a guide I found online, with more details:
get url params with javascript

Also have a look at:
Compatibility (caniuse.com)
Fallback for unsupported browsers - polyfill

This is a minimal guidance, you will need more tinkering to get this to work but I hope this helps a little :slight_smile:

Feel free to ask if you need additional help.

3

RDaneel_Oliwav thank you so much for the help!!!
After a couple of tries I was finally able to get it working using the script you provided with a tiny modification

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
	var queryString = window.location.search,
	urlParams = new URLSearchParams(queryString);
  
  if (urlParams.has('test') === true) {
  	$("#checkbox1").trigger('click');
  }
});
</script>

I was wondering if there was a cleaner way to code

  if (urlParams.has('test') === true) {
  	$("#checkbox1").trigger('click');
  }

  if (urlParams.has('test2') === true) {
  	$("#checkbox2").trigger('click');
  }

without having to copy and paste for each checkbox

Thanks again!

1 Like
4

Hi @jchan,

I’m looking for something similar to do.
Can you maybe share your read only link to take a look?
The one in the original message is not valid anymore.

Thanks!