[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.