Redirect to new url

JavaScript
1

I have a form on my website and would like to redirect users to a new url after they make a submission.

I have a working script but the problem is the plugin I’m using to generate the form strips the form css class.

Is there a way to select the form without using a class?

Here’s the script:

    <script>
(function($){
	$(document).ready(function(){
		$( 'form.cssclasshere' ).submit(function(e){
			e.preventDefault();
			setTimeout(function() {
				var msg = $( '.wysija-msg' );
				if( msg.text() !== '' ){
					window.location.replace( 'http://example.com/' );
				}
			}, 3000);
		});
	});
})(window.jQuery);
</script>
2

You can change “form.cssclasshere” to a selector that will match your form. See the nearest element to the form with an id. e.g. if the form is within a <div id="signup"> you can make the selector “#signup form”

This script isn’t actually doing anything with the form submission. It’s showing a message for 3 seconds and redirecting. You will want to do something with the form data before redirection.

3

I thought that would work but it didn’t. The containing div has the class margin-top so I tried: .margin-top form but it didn’t work.

4

If it’s the only form on the page $("form") will work.
Is the form maybe being added dynamically?

5

Yes, it is the only form on the page, and yes, it is being added dynamically. Is there any way I can get it to work?

6

Try using event delegation:

$(document).on("submit", "form", function(){
  ...
});
7

I tried this but it didn’t work:

<script>
(function($){
	$(document).on("submit", "form", function(){
			e.preventDefault();
			setTimeout(function() {
				var msg = $( '.wysija-msg' );
				if( msg.text() !== '' ){
					window.location.replace( 'http://example.com/' );
				}
			}, 3000);
		});
	});
})(window.jQuery);
</script>

Not sure if that’s correctly formatted or not.

8

Can you provide a link?

9

There would have been javascript errors in the console which could have helped you find the problems in the script. Try this

(function($){
  $(document).on("submit", "form", function(e) {
    e.preventDefault();
    setTimeout(function() {
      var msg = $( '.wysija-msg' );
      if( msg.text() !== '' ){
        window.location.replace( 'http://example.com/' );
      }
    }, 3000);
  });
})(window.jQuery);
10

Hi, here’s the link: http://goo.gl/OMbieN
I’ve tried all the solutions suggested here but still can’t get it to work.
I’m using the Mailpoet newsletter/auto-responder plugin in combination with Listfusion to display the form.

11

The form is not inserted dynamically (it is there in the source code), so you don’t need to bother with delegation.

The reason that this is not working is that jQuery is running in compatibility mode (it has relinquished control of the $ variable).

You can simply select the form with: jQuery(“form”), as the screenshot indicates.

12

Hi, sorry, I’m still not quite sure how to format that.
I tried the script below but it didn’t work:

<script>(function($){$(document).ready(function(){jQuery("form").submit(function(e){e.preventDefault();setTimeout(function() {var msg = $( '.wysija-msg' );if( msg.text() !== '' ){window.location.replace( 'http://example.com/' );}}, 3000);});});})(window.jQuery);</script>
13

Approaching this another way, why not specify the new url in the action attribute of the form:

<form action="http://example.com/" method="post" >

When the user fills out the form correctly (i.e. validation passes), they will be redirected to the url you specify.

Obviously you would have to remove this from your page:

<script>(function($){$(document).ready(function(){jQuery("form").submit(function(e){e.preventDefault();setTimeout(function() {var msg = $( '.wysija-msg' );if( msg.text() !== '' ){window.location.replace( 'http://example.com/' );}}, 3000);});});})(window.jQuery);</script>

as this prevents the form’s default submit action.

14

I don’t think that would work. I’m using 2 plugins in combination which kind of complicates things.

15

Did you try it?

16

Yes, I tried it. Looks like I’m running out of ideas.

17

I copied the source code from the page you linked to and specifying a form action worked for me (i.e. I was redirected following a successful submission).

Are there additional plugins at play which you haven’t included in the demo?

18

Do you mean <form method="post" action="http://example.com/>" where http://example.com/ is the url I want to redirect to?
I don’t see how I could do that and still have the form function correctly. I’m using the MailPoet plugin and the action url is: #wysija

19

Why not?
What does the mail poet plugin do that would prevent it?

Otherwise, try placing this at the bottom of your page:

<script>
  jQuery("form").submit(function(e){
    e.preventDefault();
    setTimeout(
      function() {
        var msg = jQuery( '.wysija-msg' );
        if( msg.text() !== '' ){
          window.location.replace( 'http://example.com/' );
        }
      }, 3000);
    });
</script>

Notice that every occurence of the dollar sign has been replaced by jQuery

20

Doesn’t the action url have to be the url of the script that processes the form data? I tried this:

<script>
  jQuery("form").submit(function(e){
    e.preventDefault();
    setTimeout(
      function() {
        var msg = jQuery( '.wysija-msg' );
        if( msg.text() !== '' ){
          window.location.replace( 'http://example.com/' );
        }
      }, 3000);
    });
</script>

but that didn’t work either. I think I’m going to have to look around for some other solution. Thanks a lot for your help.