Each Selection in Select Form to Different URL's

Technical
1

Hello,

Is it possible to link each selection in my “select form” to different URLs and just using 1 link button?

Thanks in advance.

Angelo

1 Like
2

Here you go:

<script>
const PRODUCT_ID_TO_URL_MAP = {
    "843":"https://funnelish.com#1",
    "844":"https://funnelish.com#2"
}

document.querySelectorAll('.mySubmitButton').forEach(btn => {
    btn.addEventListener("click", ()=>{
        
        let selectedProductInput = document.querySelector('.product-list .pl-item input[name="product-id"]:checked');
        if (!selectedProductInput || !selectedProductInput.value){
            console.error("no product selected!")
            return;
        }
        let urlToGoto = PRODUCT_ID_TO_URL_MAP[selectedProductInput.value]
        if (!urlToGoto){
            console.error("product id not mapped to a valid url, " + selectedProductInput.value)
            return;
        }
        window.open(urlToGoto, "_self")
    })
})
</script>

Instructions

  1. Add that code as it is into your page Custom Codes > Body JS box.
  2. Replace the PRODUCT_ID_TO_URL_MAP values to your actual product IDs and URL you want to redirect to.
const PRODUCT_ID_TO_URL_MAP = {
    "843":"https://funnelish.com#1",
    "844":"https://funnelish.com#2"
}

In the example above, when the product ID 843 is selected then it will redirect to https://funnelish.com#1, and if product ID 844 is selected then it will redirect to https://funnelish.com#2.

You can add as many ID/URL mappings as needed.

Hope that helps, do let us know how it goes!

3

This is very much appreciated. Thank you. Will test it out.

1 Like