AJAX request not working properly

Question

Hey guys and gals,

I have a form that I would like to use AJAX to submit. For the callback function basically what I want to happen is, the form elements disappear (.hide) and are replaced by a div element (which will ready success or something of that nature). I then want the function to pause for 5 seconds and then redirect to a different URL.

The AJAX request successfully submits (as I receive an e-mail to the specified address as I should) but the callback function is not carrying out properly. Any suggestions?

 $(document).ready( function () {
        var $form = $('form');
        function register($form) {
            $.ajax({
                type: $form.attr('method'),
                url: $form.attr('action'),
                data: $form.serialize(),
                cache       : false,
                dataType    : 'json',
                contentType: "application/json; charset=utf-8",
                success: function(data){
                    $("#mc-embedded-subscribe-form").hide("slow");
                    $("#form").html('<div class="some-class">Some text that shows up upon successful AJAX request</div>')
                    setTimeout(5000);
                    $(".button").addEventListener("click", function(){
                        window.location.href='http://www.neuyear.net/collections/time-domination-products';
                    })
                }
            })
        }
    }

**

UPDATE #1

**

This is the only error code that I am getting when I initially load the website (I've heard these errors only pop up in the dev tools and do not affect the user?)

But then when I submit the form I get this error code

I've also updated my JavaScript to the below code, taking advice from a few people who posted, it's still not working 100% though

$(document).ready(function() {
    var $form = $('form');
    $form.submit(function(){
        $.ajax({
            type: $form.attr('method'),
            url: $form.attr('action'),
            data: $form.serialize(),
            cache       : false,
            dataType    : 'json',
            success: function(data){
                $("#mc-embedded-subscribe-form").hide("slow");
                $("#form").html('<div class="some-class">Some text that shows up upon successful AJAX request</div>')
            }
        });
        setTimeout(function(){
            window.location.href='http://www.neuyear.net/collections/time-domination-products';
        }, 5000)
    });
});

Joey

Answer 1

setTimeout usage is wrong.

See :

$(document).ready( function () {
        var $form = $('form');
        function register($form) {
            $.ajax({
                type: $form.attr('method'),
                url: $form.attr('action'),
                data: $form.serialize(),
                cache       : false,
                dataType    : 'json',
                contentType: "application/json; charset=utf-8",
                success: function(data){
                    $("#mc-embedded-subscribe-form").hide("slow");
                    $("#form").html('<div class="some-class">Some text that shows up upon successful AJAX request</div>')
                    setTimeout(function(){
                        window.location.href='http://www.neuyear.net/collections/time-domination-products';
                    }, 5000);
                }
            })
        }
    });

Further, the following should ideally be declared separately, if you want the user to click a link and go after ajax success.

$(".button").addEventListener("click", function(){
     window.location.href='http://www.neuyear.net/collections/time-domination-products';
})