$ .post和alert（）问题

Question

I have a a form that I am using jQuery $.post to grab form data and send it to a php script. The script then sends back some data. The issue I am having is that sometimes (10% of the time maybe) when the submit button is clicked on the form the alert box won't appear? It work's almost always but the odd time no alert box is displayed yet if the form passes the php validation checks the data is still entered. Is it a timing issue? I noticed as well that when testing on mobile the alerts do not display at all. Here is the JavaScript code:

var jsonObj;
$(document).ready(function(){
    $('#form').submit(function(){
        var wScore = parseInt(document.getElementById('wScore').value);
        var lScore = parseInt(document.getElementById('lScore').value);
        var errors = 0;
        if(lScore > wScore){
            errors = 1;
        }
        if(errors != 0){
            alert('Winnings runs MUST be greater than losing runs.');
            return false;
        }
        var selNameW = document.getElementById("exampleInputEmail1");
        document.getElementById("textWinner").value = selNameW.options[selNameW.selectedIndex].text;
        var selNameL = document.getElementById("exampleInputPassword1");
        document.getElementById("textLoser").value = selNameL.options[selNameL.selectedIndex].text;
        $.post('query.php',$('#form').serialize()) 
            .done(function(data){
                jsonObj = JSON.parse(data);
                if(jsonObj.status == 'error'){
                    alert(jsonObj.errorMessage);
                }else{
                    alert("Successfully Entered! Winner: " + jsonObj.winner + " Loser: " + jsonObj.loser);
                }
        });
    });
});

PHP CODE:

<?php 

include "dbconnect.php";

$jsonData = [];

extract($_POST);

$exampleInputEmail1 = intval($exampleInputEmail1);
$exampleInputPassword1 = intval($exampleInputPassword1);

$qqq = "SELECT * FROM games WHERE winner = '$exampleInputEmail1' AND game_date = '$inputDate' AND loser = '$exampleInputPassword1'";

$result = $conn->query($qqq);


if($password !== 'slopitch19'){
        $error = ['status' => 'error', 'errorMessage' => 'The password is incorrect or was left blank!'];
        $jsonData = json_encode($error);
    }

else if(empty($inputDate) || empty($wScore) || empty($lScore) || empty($password)){
    $error = ['status' => 'error', 'errorMessage' => 'A field was left blank.'];
    $jsonData = json_encode($error);
}

else if($exampleInputEmail1 == $exampleInputPassword1){
    $error = ['status' => 'error', 'errorMessage' => 'The winning team cannot be the same as the losing team.'];
    $jsonData = json_encode($error);
}

else if ($result->num_rows == 0){
    $sql2 = "INSERT INTO games (winner, loser, game_date, winner_name, loser_name, winner_score, loser_score) VALUES ('$exampleInputEmail1', '$exampleInputPassword1','$inputDate', '$textWinner', '$textLoser', '$wScore', '$lScore')";

    $sql = "UPDATE teams SET wins = wins + 1 WHERE team_id = '$exampleInputEmail1'";

    $sql3 = "UPDATE teams SET losses = losses + 1 WHERE team_id = '$exampleInputPassword1'";

    $values = ['status' => 'success', 'winner' => $textWinner, 'loser' => $textLoser];

    $jsonData = json_encode($values);

    $conn->query($sql);
    $conn->query($sql3);
    $conn->query($sql2);

    $conn->close();

}else if($result->num_rows > 0){
        $error = ['status' => 'error', 'errorMessage' => 'Someone else has already entered this game!'];
        $jsonData = json_encode($error);
}

echo $jsonData;




    ?>

Answer 1

I fixed the issue. I think for some reason mobile browsers especially have an issue with jQuery $.post

Changing to $.ajax worked as follows:

var jsonObj;
$(document).ready(function(){
    $('#form').submit(function(e){
        e.preventDefault();
        var wScore = parseInt(document.getElementById('wScore').value);
        var lScore = parseInt(document.getElementById('lScore').value);
        var errors = 0;
        if(lScore > wScore){
            errors = 1;
        }
        if(errors != 0){
            alert('Winnings runs MUST be greater than losing runs.');
            return false;
        }
        var selNameW = document.getElementById("exampleInputEmail1");
        document.getElementById("textWinner").value = selNameW.options[selNameW.selectedIndex].text;
        var selNameL = document.getElementById("exampleInputPassword1");
        document.getElementById("textLoser").value = selNameL.options[selNameL.selectedIndex].text;
        $.ajax({
           type: 'POST',
           url: 'query.php',
           data: $('#form').serialize(),  
           success: function(data){
                jsonObj = JSON.parse(data);
                if(jsonObj.status == 'error'){
                    alert(jsonObj.errorMessage);
                }else{
                    alert("Successfully Entered! Winner: " + jsonObj.winner + " Loser: " + jsonObj.loser);
                }
           }
        });
    });
});