Form will not submit via ajax in ie8 - cross domain response failing

Question

I am a beginner with jQuery, AJAX and php. Here is what I am trying to achieve:
- If a user enters the website through a page that does not already have an email form, show a modal pop-up asking them to opt-in with email address.
- Once user clicks submit, change the content in the modal to show a thank you message and then automatically close the modal, allowing the user to interact with the page they originally came to.
- Send submitted info to a database
-I do not want to redirect them to a confirmation page upon submit, but it would be OK if the modal did not automatically close and instead just displayed a confirm message.

I have to host the php on a different server than the website is hosted on, so I think am having a cross-domain response issue. I am able to successfully submit the form (submission goes into database) in Firefox, Chrome, Safari and IE10, and I don't see any error messages in the console when I submit the form. However, data will not transmit from IE8.

I've done some research online and read about using JSON, JSONP, and XDR but a) I'm not clear as to how to implement (over my head right now) and b) seems using these methods seems to increase the risk of someone getting access to these email address submissions.

What can I do to make this work in IE8? Any guidance will be appreciated. An iFrame was the closest alternative I could find so far, but the scrollbars do not disappear and they are unacceptable.

Here are my scripts (web server automatically uses jquery 1.3.2 and I have to use a newer version for the modal, hence the use of noConflict. Not an option to remove reference to 1.3.2):

        <script type="text/javascript">
        var jQuery_1_7_2 = jQuery.noConflict(true);
        function validateEmail(email) { 
        var reg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return reg.test(email);
        }
        jQuery_1_7_2(document).ready(function(){
        var emailFormExists = jQuery_1_7_2('#e2ma_signup_form');
        if (document.cookie.indexOf('visited=true') == -1 && !(emailFormExists.length)){
        var fifteenDays = 1000*60*60*24*15;
        var expires = new Date((new Date()).valueOf() + fifteenDays);
        document.cookie = "visited=true;expires=" + expires.toUTCString();
        jQuery_1_7_2.fancybox({width:"100%", inline:true, href:"#inline"});
        }
        else
        {
        jQuery_1_7_2('#e2ma_signup_form').length
        var fifteenDays = 1000*60*60*24*15;
        var expires = new Date((new Date()).valueOf() + fifteenDays);
        document.cookie = "visited=true;expires=" + expires.toUTCString();  
        }
        jQuery_1_7_2("#contact").submit(function() { return false; });


        jQuery_1_7_2("#send").on("click", function(){
        var emailval  = jQuery_1_7_2("#email").val();
        var mailvalid = validateEmail(emailval);

        if(mailvalid == false) {
        jQuery_1_7_2("#email").addClass("error");
        }
        else if(mailvalid == true){
        jQuery_1_7_2("#email").removeClass("error");
        }



        if(mailvalid == true) {
        // if both validate we attempt to send the e-mail
        // first we hide the submit btn so the user doesnt click twice
        jQuery_1_7_2("#contact").fadeOut("fast", function(){
            jQuery_1_7_2(this).before("<p><strong>Thanks for opting in!</strong></p>");
            setTimeout("jQuery_1_7_2.fancybox.close()", 1000);
        });

        jQuery_1_7_2.ajax({
        type: 'POST',
        url: 'http://domain.com/scripts/email-opt-in.php',
        data: jQuery_1_7_2("#contact").serialize(),
        success: function(data) {
        if(data == "true") {
        jQuery_1_7_2("#contact").fadeOut("fast", function(){
            jQuery_1_7_2(this).before("<p><strong>Thanks for opting in!</strong></p>");
            setTimeout("jQuery_1_7_2.fancybox.close()", 1000);
        });
        }
        }
        });
        }
        }); 
        });
        </script>

Here is the php:

        <?php require_once('../Connections/Liz.php'); ?>
        <?php
        $insertSQL = "INSERT INTO optin (id, email) VALUES ('','".$_POST['email']."')";
        mysql_select_db($database_Liz, $Liz);
        $Result1 = mysql_query($insertSQL, $Liz) or die(mysql_error());
        ?>

and here is my html:

        <div id="inline">
            <h2>Join the mailing list!</h2>

            <form id="contact" name="contact" action="#" method="post">
                <label for="email">Your E-mail</label>
                <input type="email" id="email" name="email" class="txt">

                <button id="send">Submit</button>
            </form>
        </div>

Answer 1

First of all, I have to say that using jQuery_1_7_2() definitely looks bad for code rewrite! May I suggest var $j = jQuery.noConflict(true); -- then you can use your usual $j(window).method()'s

Anyways, you may face more trouble than its worth with cross-site posting via AJAX calls. This link may be related: CORS with jQuery and XDomainRequest in IE8/9

Using an IFRAME to post sounds like a good idea - but I don't understand why you can't hide the scrollbars. You can use CSS to move the iframe to -999em (vertical) off of the browsers viewport or wrap it in a hidden div.