Submitting a form via ajax (jquery) in IE9 + crossdomain

Question

I hope you can help me. I have a sign-up form on a page. That form needs to be submitted via AJAX to a different server (cross-domain).

This is the form:

<form id="remindMe" method="post">
   <input type="text" name="firstname" id="firstname" required>
   <input type="text" name="lastname" id="lastname" required>
   <input type="email" name="email" id="email" required>
   <input type="submit" value="Submit">
</form>

This is my jQuery code to submit the form:

$("#remindMe").submit(function() {
    $.post('https://other-server.com/form.php', $('#remindMe').serialize()).done(function({ 
        $('#remindMe').hide(); 
        $('#remindSub').hide(); 
        $('#successMail').show();
    }); 
   return false;
});

And this is the form.php

<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
header('Access-Control-Max-Age: 1000');
header('Access-Control-Allow-Headers: Content-Type');
require "config.php";

$firstname = $con->real_escape_string($_POST['firstname']);
$lastname = $con->real_escape_string($_POST['lastname']);
$email = $con->real_escape_string($_POST['email']);

$con->query("INSERT INTO form (firstname,lastname,email)
VALUES ('$firstname','$lastname','$email')");

$con->close();
?>

This works very well on all major browsers, except IE9 (and older). As I know, this is a crossdomain issue, since IE9 uses xdomainrequest to submit the form data. But I don't know how to edit my code in order to get it working on IE9.

Thanks for your help.

Answer 1

OK, it's working now. Here is the thing:

You cannot submit real post data via cross-domain in IE9. However RAW post data are possible.

so, I came accross a very helpful snippet of code, that I added to my javascript. The JavaScript code now looks like this:

$("#remindMe").submit(function() {

if ( window.XDomainRequest ) {
jQuery.ajaxTransport(function( s ) {
    if ( s.crossDomain && s.async ) {
        if ( s.timeout ) {
            s.xdrTimeout = s.timeout;
            delete s.timeout;
        }
        var xdr;
        return {
            send: function( _, complete ) {
                function callback( status, statusText, responses, responseHeaders ) {
                    xdr.onload = xdr.onerror = xdr.ontimeout = jQuery.noop;
                    xdr = undefined;
                    complete( status, statusText, responses, responseHeaders );
                }
                xdr = new XDomainRequest();
                xdr.onload = function() {
                    callback( 200, "OK", { text: xdr.responseText }, "Content-Type: " + xdr.contentType );
                };
                xdr.onerror = function() {
                    callback( 404, "Not Found" );
                };
                xdr.onprogress = jQuery.noop;
                xdr.ontimeout = function() {
                    callback( 0, "timeout" );
                };
                xdr.timeout = s.xdrTimeout || Number.MAX_VALUE;
                xdr.open( s.type, s.url );
                xdr.send( ( s.hasContent && s.data ) || null );
            },
            abort: function() {
                if ( xdr ) {
                    xdr.onerror = jQuery.noop;
                    xdr.abort();
                }
            }
        };
    }
});
}

    $.post('https://other-server.com/form.php', $('#remindMe').serialize()).done(function({ 
    $('#remindMe').hide(); 
    $('#remindSub').hide(); 
    $('#successMail').show();
}); 
   return false;
});

This will submit the form via AJAX as RAW POST DATA.

Now in my PHP script, I added some lines, that will fetch the raw post data and put it into the normal $_POST array.

<?php
 header('Access-Control-Allow-Origin: *');
 header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
 header('Access-Control-Max-Age: 1000');
 header('Access-Control-Allow-Headers: Content-Type');
 require "config.php";

 if (isset($HTTP_RAW_POST_DATA)){
     $parts = explode('&', $HTTP_RAW_POST_DATA);
     foreach ( $parts as $part ) {
         list($key, $value) = explode('=', $part, 2);
         $_POST[$key] = urldecode($value);
     }
 }

 $firstname = $con->real_escape_string($_POST['firstname']);
 $lastname = $con->real_escape_string($_POST['lastname']);
 $email = $con->real_escape_string($_POST['email']);

 $con->query("INSERT INTO form (firstname,lastname,email)
 VALUES ('$firstname','$lastname','$email')");

 $con->close();
 ?>

And now, it works in ALL browsers. :-)