SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Nov 2001
    Location
    Fort Lauderdale
    Posts
    814
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JQuery successful Ajax form posting results in error code.

    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:

    Code:
    $("#form4").submit(function(e) {
        e.preventDefault();
        var frm = $('#form4');
        $.ajax({
            type: 'POST',
            url: 'http://requestb.in',
            data: frm.serialize(),
            success : function() {
                window.location = "http://www.google.com";
            },
            /*error : function() {
                alert("Something went bad");
            }*/
        });
    Here is my form HTML:

    Code:
    <form action="" method="post" id="form4" name="form4" enctype="multipart/form-data">
        <input id="name" name="name" type="text" tabindex="1" value="Insert your name" class="required">
        <input id="email" name="email" type="text" tabindex="2" value="Insert your e-mail" class="required email">
        <input id="phone" name="phone" type="text" tabindex="3" value="Insert your phone number">
        <input type="submit" name="submit_button" value="Try it free">
    </form>
    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:

    Code:
    $(function() {
        $.ajaxSetup({
            error: function(jqXHR, exception) {
                if (jqXHR.status === 0) {
                    alert('Not connect.\n Verify Network.');
                } else if (jqXHR.status == 404) {
                    alert('Requested page not found. [404]');
                } else if (jqXHR.status == 500) {
                    alert('Internal Server Error [500].');
                } else if (exception === 'parsererror') {
                    alert('Requested JSON parse failed.');
                } else if (exception === 'timeout') {
                    alert('Time out error.');
                } else if (exception === 'abort') {
                    alert('Ajax request aborted.');
                } else {
                    alert('Uncaught Error.\n' + jqXHR.responseText);
                }
            }
        });
    });
    After adding that code, that following error I get is from the first error code check: 'Not connect.\n 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.

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,196
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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.

  3. #3
    SitePoint Guru
    Join Date
    Nov 2001
    Location
    Fort Lauderdale
    Posts
    814
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Guru
    Join Date
    Nov 2001
    Location
    Fort Lauderdale
    Posts
    814
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by chris.upjohn View Post
    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.
    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.

  5. #5
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,196
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •