Jquery Ajax form no success message

Question

I have an html form that works on my local machine without a problem. When I upload it it works as well but does not show the success message. This is the script I am using:

<script>
$(document).ready(function() {  
    // validate signup form on keyup and submit
    $("#_form_1033").validate({
    submitHandler: function(form) {
        $.ajax({
            url: form.action,
            type: form.method,
            data: $(form).serialize(),
            success: function(data) {
            $("#myformdiv").replaceWith("<p>Thanks!</p>");           
            }            
        });
    }
    });
});
</script>

Any advice? Link to live example - http://ch2.co.il/form/smallsubscribe2015.html Could it be this error - if so how can I fix it? XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://ch2.co.il ' is therefore not allowed access.

Thank you

Answer 1

The problem is because you are making a cross-domain AJAX request, which prevented by browser security - see the Same Origin Policy.

The request is expecting you to be making a request to a CORS enabled domain, hence why it is complaining about the non-existant header.

You either need to change your request to jsonp type, or use a server-side proxy to get the data.

So better add crossDomain:true to your ajax function as below

$("#_form_1033").validate({
    submitHandler: function(form) {
        $.ajax({
            url: form.action,
            type: form.method,
            crossDomain:true,
            data: $(form).serialize(),
            success: function(data) {
            $("#myformdiv").replaceWith("<p>Thanks!</p>");           
            }            
        });
    }
});

Answer 2

Thanks for the Reply. This is what fixed it:

dataType: "json",