jQuery ajax发布在IE，FF，Chrome中正常运行，但在Safari中无法正常运行

Question

I am posting a form to a remote server via the action method, but calling a jquery function to updata a database prior to the post - all works fine in IE, FF etc. ... but, Safari always fails to do the jquery database insert when return is true OR async: true, ... if both are false, (so the html form does not manage to post due to the false declaration) it works perfectly? But when true, the form will just POST, but the jquery ajax post will not run?

The Form ...

 <form action="http://anotherplace" method="post" id="myform" >

<button class="button-big" type="submit" id="myform-post" ><span>Continue</span></button>

The function ...

   $(document).ready(function() { //available when doc renders


   $("form#myform").submit(function(){

    var title = $("select#title").val();
    if (title == "") {
    $("select#title").css({backgroundColor:"#ccc"});        
    $("select#title").focus();
     return false;
   }

     var firstname = $("input#fname").val();
    if (firstname == "") {
     $("input#fname").css({backgroundColor:"#ccc"});
     $("input#fname").focus();
     return false;    }

      var surname = $("input#sname").val();
    if (surname == "") {
     $("input#sname").css({backgroundColor:"#ccc"});
     $("input#sname").focus();
     return false;    }



//Grab the form values to pass via AJAX for DB insert

var cameraMake = $("input#cameraMake").val();
var cameraModel = $("input#cameraModel").val();
var cameraValue = $("input#cameraValue").val();
var mp3Make = $("input#mp3Make").val();
var mp3Model = $("input#mp3Model").val();
var mp3Value = $("input#mp3Value").val();


        var dataString='&title='+ title  + '&firstname=' + firstname + '&surname=' + surname + '&add1=' + add1 + '&add2=' + add2 + '&add3=' + add3 + '&pcode=' + pcode + '&email=' + email + '&phone=' + phone +'&username=' + username + '&pword=' + pword; 

var ajaxComplete = false;
if( !ajaxComplete ){
        $.ajax({
            async: true,              
            type: "POST",
            url: "process-.php",
            data: dataString,
            success: function() {
               // $('#details').html("<div id='post-message'></div>");
               // $('#post-message').html("<h2 style='color:#fff'>Thanks for getting in touch.</h2>")

                ajaxComplete = true;
                this.submit();

            }
        });
        return false; // Abort form submission by now
    }else{
        return true; // Submit normally
    }
});


}); //End of document.ready

The script runs on an 'click' method based on the submit ID (does validation then the AJAX post).

Can ayone offer any advice on whe this fails in Safari (all versions tested) or offer a better solution to do what I need? - something to do with async / posting? As I say, set to false and it works fine ... BUT, I need the HTML form to still post!

Many Thanks!

Answer 1

If I understand correctly, you want to unload the page while there's a pending AJAX request. That has little chance to work correctly, even in the browsers where it appears to work.

My advice is to initially abort the form's POST request ( return false; ) and add code to the success handler to trigger the form submission when the AJAX request completes. You can use a flag variable so the AJAX request only triggers the first time.

Update:

Some quick, dirty and untested code. I've also realised you've omitted the start of the code block so I've simply invented it:

var ajaxComplete = false;
$("form#3-form").submit(function(){
    if( !ajaxComplete ){
        $.ajax({
            async: true,              
            type: "POST",
            url: "process-.php",
            data: dataString,
            success: function() {
                $('#details').html("<div id='post-message'></div>");
                $('#post-message').html("<h2 style='color:#fff'>Thanks for getting in touch.</h2>")

                ajaxComplete = true;
                this.submit();

            }
        });
        return false; // Abort form submission by now
    }else{
        return true; // Submit normally
    }
});

Answer 2

you should use

return false;

and then go with form action

window.location.url = "YOUR URL";

So

$.ajax({
    async: true,              
    type: "POST",
    url: "process-.php",
    data: dataString,
    success: function() {
        $('#details').html("<div id='post-message'></div>");
        $('#post-message').html("<h2 style='color:#fff'>Thanks for getting in touch.</h2>");
        window.location.url = "YOUR URL";
    }
});
return false;