Change Form Redirect URL depending on option selected in form

Design help Custom code
22

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

23

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

24

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

25

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

26

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
27

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;
      });
		});
	}
28

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

29

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

30

Hello,

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

image
image867×681 42.1 KB

31

Same. Still isn’t working

32

Hi everyone, this code worked for me:

Place under the body tag and make sure to use the form ID not the form block ID.


<script>
document.addEventListener("DOMContentLoaded", function() {
  var form = document.getElementById("FORMID");
  form.addEventListener("submit", function(event) {
    event.preventDefault();
    var selectionidName = document.getElementById("DROPDOWNID").value;
    if (selectionidName === "CHOICE1") {
      window.location.href = "URL";
    } else if (selectionidName === "CHOICE2") {
      window.location.href = "URL";
    } else if (selectionidName === "CHOICE3") {
    	window.location.href = "URL";
    }
    
  });
});
</script>
1 Like
33

:clap::clap::clap: This worked for me, thanks @poynor2702! :+1: :tada: