Form Redirect Based on Dropdown Field Value

This is the latest code for Form Redirection Based on Dropdown Field Value  👇 👇 👇

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

Redirect Script

Replace with the ID of the form field containing the selection
Replace with the text of your selection
Replace with the URL corresponding to the selection

<script>
$("#formfieldID").on('change', function() {
  switch ($(this).val()) {
    case 'selection1':
        window.module.lp.form.data.url = "URL1";
        break;
    case 'selection2':
        window.module.lp.form.data.url = "URL2";
        break;
  }
});
</script>

I am trying to get this to work as well and no matter what I tried from all these article threads nothing is working. It would be great if someone who has gotten this to work can provide complete instructions from beginning to end on how to set this up. There is a lot of conflicting information in this forum on how this should be done.

Hi @davetran01,

Add jQuery (1.4.2) to your page and it should work. Just make sure the jQuery fires before the redirect script.

Best,
Hristian

Thank you!

Hi @Matt_Dimock,

Not exactly sure where your issue lies, but some suggestions to help you on your way.

Perhaps there is more to this code than I can see, but you seem to be using jQuery for no reason - if it is required check that it is being loaded in the head of the page.

You’re relying on hooking into all form submit events and modifying an old UB data structure - why not update to using:

    //Handles doing something before submit the UB form:
      window.ub.hooks.beforeFormSubmit.push(function() {
       // Update the UB form redirect url"
          window.ub.form.url = "urlGoesHere.com";
      });

Now in terms of the actual code logic this could be simplified by the use of a switch case statement. From your description the following scenarios are such:

1. < 500 -750 K = https://www.btacademy.com/download/thankyou/

2. Everyone else goes to https://www.btacademy.com/download/chatwithus/

I get the feeling there is actually a third condition based upon the template selection, but I’m not entirely sure what you need from it as it does the same as everything else currently.

With the current logic in mind you could write something along the lines of the following (aircode written within an IIF, plain javascript):

    (function() {

    window.ub.hooks.beforeFormSubmit.push(function(){
            var option = document.querySelector('select#your_2019_gross_revenue').val;
            var formUrl = window.ub.form.url;
            switch(option.includes("million")){

                //As the option includes "million" it returns true and falls in the larger bracket:
                case true:

                //Within this statement, if they had checked the lets talk box then the url would be chatwithus, else it would default to thank you:      
     if(document.querySelector('input#my_preferred_follow_up_is_send_me_the_templates_and_lets_talk_about_how_you_can_help_my_business').checked){
                  formUrl = "https://www.btacademy.com/download/chatwithus/";
                } else {
                formUrl = "https://www.btacademy.com/download/thankyou/";
                }
                break;

                //As the option does not include "million" it returns false and thus falls in the smallest bracket:
                case false:
                formUrl = "https://www.btacademy.com/download/thankyou/";
                break;

                //In case anything went wrong the url would default to thank you:
                default:
                formUrl = "https://www.btacademy.com/download/thankyou/";

            }
        })

    })();

The if else statement could of course be omitted entirely if there are only two scenario cases, but I wanted to give you an idea of how you might work it in.

As always this is just theoretical aircode and should be tested, adapted and understood before being deployed on any published page iteration. That being said I hope it gets you on the right track to creating a cleaner method for handling your problem.

<script>
  $("input[name='purchaseoptions']").change(function() {
      var checkedEl = $("input[name='purchaseoptions']:checked");

      if (checkedEl.val() === 'One-time purchase: $20') {
      	window.ub.form.url = "https://domain.com/landingpage1";
      } else {
      	window.ub.form.url = "https://domain.com/landingpage2";
      }
  });
</script>

This worked for me for radio buttons

I got this same script from Unbounce tech support, but it doesn’t seem to be working.

I’m testing on this page: https://my.caredetective.com/landing-page-test-area/

I’ve set the form confirmation to “Go to URL” and have it pointed to: https://my.caredetective.com/upsell-test/

And the JS code I added looks like this (I’m no coder, just to be clear):

However, at this point “Self” is not going anywhere different. Any thoughts? :-/

Hey @Brett_Rosenblatt,

You need to adjust your script. Take a look one post above you for an example of what you need to change (confirmData to url).

Best,
Hristian

Hey James, could you share the link to the page this is running on?

It would be helpful to take a look. Thanks!

Looks like your script has a typo and the console says it’s not a function.

Try pasting this into your Unbounce page…

<script>
$("#optin1").live('change', function() {
switch ($(this).val()) {
case 'Yes':
window.module.lp.form.data.url = "https://fwytrk.com/d.ashx?ckm_campaign_id=188&ckm_key=LG9TsxmdK98&ckm_bp=1";
break;
case 'No':
window.module.lp.form.data.url = "https://fwytrk.com/d.ashx?ckm_campaign_id=136&ckm_key=LG9TsxmdK98&ckm_bp=1";
break;
};
});

I hope that works. Otherwise, I dunno 🤷

Hi everybody,

As others I am trying to redirect the user based on on the option they used in a drop down menu.

However, it’s not working, it always redirects to the fallback url.

I’ve used the following options

Custom drop down menu

Name & Id is “test”

first menu choice is “taz”

second menu choicen is “zeit”

Form Confirmation is “Go to URL”

URL is “https://www.spiegel.de”

Target “Same tab or window”

Append form data to url is unchecked

This is the code I have in the javascipt window:

https://paste.ofcode.org/33sbrUU4Ekb22nqt8kqJUNS

Hi, thanks for your reply. Sadly, removing the semi-colon didn’t change anything.

Can you do this on a text field using a number range?

Example:
<20 goes to url1, >20 goes to url2