Form Submit to dynamic links

Attributes
1

Hello Finsweet support + community!

Having a wee cheeky problem with getting Finsweet ‘Form Submit’ to redirect to a dynamic link.

I have a form where the user chooses a club/location they want to sign up for. This list of locations is a CMS collection with the CMS items as radio buttons (so they can only choose one location).

I have a piece of code that looks for clicks on the CMS item and sets the ‘fs-form-submit-redirecturl’ attribute to the correct success page (each location has its own success page with location-specific content).

Unfortunately it seems like Finsweet Form Submit reads the ‘REDIRECT_URL’ but then doesn’t read it again when I change it - which, to be fair, is the expected behaviour.

Any ideas on how to update the URL Finsweet will redirect to?
I was also trying this without Finsweet ‘Form Submit’ and I was just changing the element’s redirect URL but that seemed to have the same problem as I’m also using Finsweet Filters with an ‘allow-submit’.

Here’s the read-only link if that helps -
https://preview.webflow.com/preview/neon-flex-fitness?utm_medium=preview_link&utm_source=designer&utm_content=neon-flex-fitness&preview=e086b4fba8d53f4bf115b96e7fac5626&pageId=645c19953ca2d1b4fb9ebce8&workflow=preview

Thank you!!

2

hey @rheed! You can use the Attributes API to modify the link. Can you please test this code?

<script>
      window.fsAttributes = window.fsAttributes || [];
      window.fsAttributes.push([
        'formsubmit',
        (formInstances) => {
          console.log('formsubmit Successfully loaded!');

          const [formInstance] = formInstances;

          $('.join-us_location-radio-button').click(function () {
            let clickedButton = $(this);
            let redirectLink = clickedButton.siblings('.success-link').attr('href');

            // grab the clicked club's name and email from the hidden text
            let locationEmail = clickedButton.siblings('.location-email').text();
            let locationName = clickedButton.siblings('.location-name').text();

            // set the correct input's values to the email and club name
            document.getElementById('Location-Email').setAttribute('value', locationEmail);
            clickedButton.siblings('input').attr('value', locationName);

            // allow pointer events on final tab and final next button
            finalNext.removeClass('disabled');
            finalTab.removeClass('disabled');

            // make the clicked button's text say 'selected'
            clickedButton.parent().siblings('.button.radio-button').text('Selected');

            // set the form's redirect to the correct link depending on selected club
            //form.attr('redirect', redirectLink);
            //form.attr('data-redirect', redirectLink);
            // form.attr('fs-formsubmit-redirecturl', redirectLink);
            formInstance.redirectUrl = redirectLink;

            // if a last-clicked element exists and it isn't the one we just clicked, set 			its text to 'select'
            if (lastClicked && !clickedButton.is(lastClicked)) {
              lastClicked.parent().siblings('.button.radio-button').text('Select');
            }
            lastClicked = clickedButton;
          });
        },
      ]);
    </script>
1 Like
3

Perfect thank you Luis for that juicy solve! Will look deeper into the Attributes API next time.

1 Like