JQuery successful Ajax form posting results in error code

[COLOR=#000000][FONT=Arial]My form properly submits data via POST utilizing Ajax. However I am trying to redirect the user upon successful submission. The problem is, even though the form successfully submits, instead of redirecting the user it displays an error. According to firebug the page I am submitting to, is throwing up a 200 success code. I am using jquery 1.8.3.

My Code:

[/FONT][/COLOR]

$([COLOR=#800000]"#form4"[/COLOR]).submit([COLOR=#00008B]function[/COLOR](e) {
    e.preventDefault();
    [COLOR=#00008B]var[/COLOR] frm = $([COLOR=#800000]'#form4'[/COLOR]);
    $.ajax({
        type: [COLOR=#800000]'POST'[/COLOR],
        url: [COLOR=#800000]'http://requestb.in'[/COLOR],
        data: frm.serialize(),
        success : [COLOR=#00008B]function[/COLOR]() {
            window.location = [COLOR=#800000]"http://www.google.com"[/COLOR];
        },
        [COLOR=gray]/*error : function() {
            alert("Something went bad");
        }*/[/COLOR]
    });

[COLOR=#000000][FONT=Arial]Here is my form HTML:

[/FONT][/COLOR]

[COLOR=#800000]<form[/COLOR] [COLOR=#FF0000]action[/COLOR]=[COLOR=#0000FF]""[/COLOR] [COLOR=#FF0000]method[/COLOR]=[COLOR=#0000FF]"post"[/COLOR] [COLOR=#FF0000]id[/COLOR]=[COLOR=#0000FF]"form4"[/COLOR] [COLOR=#FF0000]name[/COLOR]=[COLOR=#0000FF]"form4"[/COLOR] [COLOR=#FF0000]enctype[/COLOR]=[COLOR=#0000FF]"multipart/form-data"[/COLOR][COLOR=#800000]>[/COLOR]
    [COLOR=#800000]<input[/COLOR] [COLOR=#FF0000]id[/COLOR]=[COLOR=#0000FF]"name"[/COLOR] [COLOR=#FF0000]name[/COLOR]=[COLOR=#0000FF]"name"[/COLOR] [COLOR=#FF0000]type[/COLOR]=[COLOR=#0000FF]"text"[/COLOR] [COLOR=#FF0000]tabindex[/COLOR]=[COLOR=#0000FF]"1"[/COLOR] [COLOR=#FF0000]value[/COLOR]=[COLOR=#0000FF]"Insert your name"[/COLOR] [COLOR=#FF0000]class[/COLOR]=[COLOR=#0000FF]"required"[/COLOR][COLOR=#800000]>[/COLOR]
    [COLOR=#800000]<input[/COLOR] [COLOR=#FF0000]id[/COLOR]=[COLOR=#0000FF]"email"[/COLOR] [COLOR=#FF0000]name[/COLOR]=[COLOR=#0000FF]"email"[/COLOR] [COLOR=#FF0000]type[/COLOR]=[COLOR=#0000FF]"text"[/COLOR] [COLOR=#FF0000]tabindex[/COLOR]=[COLOR=#0000FF]"2"[/COLOR] [COLOR=#FF0000]value[/COLOR]=[COLOR=#0000FF]"Insert your e-mail"[/COLOR] [COLOR=#FF0000]class[/COLOR]=[COLOR=#0000FF]"required email"[/COLOR][COLOR=#800000]>[/COLOR]
    [COLOR=#800000]<input[/COLOR] [COLOR=#FF0000]id[/COLOR]=[COLOR=#0000FF]"phone"[/COLOR] [COLOR=#FF0000]name[/COLOR]=[COLOR=#0000FF]"phone"[/COLOR] [COLOR=#FF0000]type[/COLOR]=[COLOR=#0000FF]"text"[/COLOR] [COLOR=#FF0000]tabindex[/COLOR]=[COLOR=#0000FF]"3"[/COLOR] [COLOR=#FF0000]value[/COLOR]=[COLOR=#0000FF]"Insert your phone number"[/COLOR][COLOR=#800000]>[/COLOR]
    [COLOR=#800000]<input[/COLOR] [COLOR=#FF0000]type[/COLOR]=[COLOR=#0000FF]"submit"[/COLOR] [COLOR=#FF0000]name[/COLOR]=[COLOR=#0000FF]"submit_button"[/COLOR] [COLOR=#FF0000]value[/COLOR]=[COLOR=#0000FF]"Try it free"[/COLOR][COLOR=#800000]>[/COLOR]
[COLOR=#800000]</form>[/COLOR]

In an attempt to figure out the exact error, I added the following code to the top of my script, which I found from this POST[COLOR=#000000][FONT=Arial]:

[/FONT][/COLOR]

$([COLOR=#00008B]function[/COLOR]() {
    $.ajaxSetup({
        error: [COLOR=#00008B]function[/COLOR](jqXHR, exception) {
            [COLOR=#00008B]if[/COLOR] (jqXHR.status === [COLOR=#800000]0[/COLOR]) {
                alert([COLOR=#800000]'Not connect.\
 Verify Network.'[/COLOR]);
            } [COLOR=#00008B]else[/COLOR] [COLOR=#00008B]if[/COLOR] (jqXHR.status == [COLOR=#800000]404[/COLOR]) {
                alert([COLOR=#800000]'Requested page not found. [404]'[/COLOR]);
            } [COLOR=#00008B]else[/COLOR] [COLOR=#00008B]if[/COLOR] (jqXHR.status == [COLOR=#800000]500[/COLOR]) {
                alert([COLOR=#800000]'Internal Server Error [500].'[/COLOR]);
            } [COLOR=#00008B]else[/COLOR] [COLOR=#00008B]if[/COLOR] (exception === [COLOR=#800000]'parsererror'[/COLOR]) {
                alert([COLOR=#800000]'Requested JSON parse failed.'[/COLOR]);
            } [COLOR=#00008B]else[/COLOR] [COLOR=#00008B]if[/COLOR] (exception === [COLOR=#800000]'timeout'[/COLOR]) {
                alert([COLOR=#800000]'Time out error.'[/COLOR]);
            } [COLOR=#00008B]else[/COLOR] [COLOR=#00008B]if[/COLOR] (exception === [COLOR=#800000]'abort'[/COLOR]) {
                alert([COLOR=#800000]'Ajax request aborted.'[/COLOR]);
            } [COLOR=#00008B]else[/COLOR] {
                alert([COLOR=#800000]'Uncaught Error.\
'[/COLOR] + jqXHR.responseText);
            }
        }
    });
}); 

After adding that code, that following error I get is from the first error code check: ‘Not connect.
Verify Network.’. I tested this is both firefox and Chrome with same results. I can verify that the post is successfully sending data to the correct url, and firebug is showing a code 200 response. Everything is working perfectly normal except that jquery things there is an error and won’t redirect the user to the confirmation page on success.

The issue is the URL you’re using, basically what you’re attempting to do is make a cross domain request which isn’t possible unless you allow it on the domain you’re sending the data to but that opens up a security issue within itself. What you need to do is point your script to a relative URL that is on the same server that your’re running the script on.

For example, on a local server hosted on your own PC you would simply use / as defining a FQDN (fully qualified domain name) can lead to jQuery thinking that it’s a cross domain request.

The url is for a 3rd party form processor that accepts get, post, and put submissions. The service is zapier.com , however since I was receiving the error there even with successful form submissions I began using the requestb.in service to try and troubleshoot it. I even tried using the "crossDomain: true;" parameter in the ajax call.

Basically I am trying to accomplish the following:

  1. Client submits form
  2. My php form-processor captures the data
  3. My php form-processor then Submits the data via POST or GET to the 3rd party form processor
  4. My php form-processor then redirects the user to a thank you page.

The 3rd party form processor does not have an option to redirect users after a form submission, so I am trying to implement some type of simple thank you page so the user does not get redirected outside my website to the 3rd party form processor. I am trying to keep the end-user on my website.

Quick question, I for a fact the 3rd party service is in fact receiving and processing the submitted form even though the ajax is invoking an error message. Also in the firebug console, I do see the post to the 3rd party website respond with a 200 code response. Someone told me if the crossdomain was the issue, instead of the 200 code in the console I would see an error mentioning the same origin policy. However my knowledge is limited, so not sure what the correct information relating to this might be.

I just looked and RequestBin say you need to use the URL they give you when you sign up as requestb.in doesn’t allow cross domain requests which I checked simply by look at the response headers for their site, their custom URL’s may offer this but since I’ve never used their service before I can’t say for sure.

Also another way you can accomplish this if you’re using PHP as a backend language is through cURL, you could simply create a script you call locally on the same server and submit the data behind the scenes. If I’m understanding your process wrong sorry in advanced but the picture you’ve painted thus far is confusing as you have gone from submitting via JavaScript to submitting via PHP.