Change Form Redirect URL depending on option selected in form

You can also use ajaxComplete, so you won’t have to rely on a fixed duration.

1 Like

Hi Alex,

I try to get this to work on my own site, but I’m stuck…

I have the feeling the value of the form coming from the radiobuttons is somehow not being passed?

I want to have a different redirect URL based on the option selected as radiobutton

https://peacock-letter.webflow.io/mailchimp-test

@samliew Can this work with using the order id from a checkout page as a parameter when constructing the redirect URL?

1 Like

Modified code to redirect based on two dropdown choices:

<script>
Webflow.push(function(){
$("#form-id").submit(function(){
	doc = document.getElementById("field-id").value;
	if (doc == 'choice-1') {
        setTimeout(function() {
            location.href = 'link-1';
        }, 100);
		}
    else{
    	setTimeout(function() {
            location.href = 'link-2';
        }, 100);
    }

	})});
</script>

For me, It’s not Submitting the data, is there any way to submit the data in forms + redirect to another page based on dropdown selection?

Hi @samliew, this was the solution I tried to implement originally i.e. leaving redirect control with Webflow and just dynamically updating the form attributes with the redirect link

Any reason this shouldn’t work?

As you can see from my reply on that thread, it no longer seems to work…

@dhpwd Did you try my solution to use ajaxComplete instead? That should still work

I did, it worked :slight_smile:

Asking just in case you had any insight into why the other solution doesn’t work – feels like it should!

Thanks

Because the other solution wasn’t the right way to do it in the first place, and Webflow patched it.

1 Like

Hi, I couldn’t find the full solution. Could you please post full code sample on how to to it with dynamic filed (url coming from CMS)

Thank you very much!

Below Im attaching the code that I am currently using to redirect url upon form submmission, depending on the value entered. The url redirect works fine, however an error messaage is displayed saying there was a problem submitting the form. I see you’ve mentioned the ajaxComplete function as a solution but even after looking on google for hours, I have no idea whatsoever how to implement it with my current code, would you be able to steer me the right direction as to how to ammend my current code to include the ajaxComplete function as opposed to using a delay. Thanks

Hi, Did you fix the “error message”? I’m in the same situation right now.

Hi, do you happen to have a sample code using ajaxComplete by any chance? Thank you.

Has anyone had any recent luck with this? I’ve tried the above code with no success.

Hey Sean - try something like this:

<script>
    Webflow.push(function(){
    $("#form-id").submit(function(){
        subject = document.getElementById("field-id").value;
    $( document ).ajaxComplete(function() {
        if (subject == 'value-1') {
                location.href = 'url-1';
            }
        else if (subject == 'value-2'){
                location.href = 'url-2';
        }
        else if (subject == 'value-3'){
            location.href = 'url-3';
        }
        else if (subject == 'value-4'){
            location.href = 'url-4';
        }
        });
    })});
</script>

In my case, I’m pulling from a dropdown for my “field-id” - and I have 4 options, with 4 different corresponding redirect URL’s. This code will:

  1. Wait for a submit event from the form.
  2. Pull the value from the dropdown.
  3. Wait until the form has successfully submitted.
  4. Evaluate the value, and fire the redirect.

All credit to the previous contributors for their input on this, I’ve just basically re-assembled some of their work here.

Hope this helps!

1 Like

Hi, @samliew ajaxComplete is the solution for me, but when I try to login the webflow editor and the ajaxComplete is trigerring to the redirect url I set right away, so editor is not accessible, any idea why?

This is the work around I did, this detects when a parameter is present in the URL, so ajax Complete won’t run, but when they go back to the website, a redirection loop will occur because of the ajaxComplete.

var url = window.location.href; 
	console.log(url);
	function hasQueryParams(url1) {
    return url1.indexOf('?') !== -1;
  }
  
	if(!hasQueryParams(url)){
    console.log('No Params');
    Webflow.push(function(){
			$(document).ajaxComplete(function() {
				var link = $('#wf-form-Newsletter-Subscriber').attr('redirect');
        location.href = ''+link;
      });
		});
	}

Hello, @somegoodco have you experienced a loop redirection when accessing the editor?

I haven’t - it just redirects on submission as expected on my end.

Hello,

I tried your code but it doesn’t work. Nothing happens when the form is submitted.

Same. Still isn’t working