Ajax代码不起作用

Question

So I have this program in which the user enters a city and a country. The program looks in the database to see if the city doesn't already exists, if it does I show a warning message using ajax, if not i add the city to the database.

This is the form:

<form action="addCity.php" method="get" onsubmit="return validateCityInfoForm();">

onsumbit I call the javascript function validateCityInfoForm() that looks like this:

function validateCityInfoForm() {

                    var xmlhttp;
                    if (window.XMLHttpRequest)
                    {// code for IE7+, Firefox, Chrome, Opera, Safari
                        xmlhttp = new XMLHttpRequest();
                    }
                    else
                    {// code for IE6, IE5
                        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    xmlhttp.onreadystatechange = function()
                    {
                        if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                        {


                            if (xmlhttp.responseText == "true") {
                                document.getElementById("checkIfCityExistsWarning").style.display = "block";
                                document.getElementById("checkIfCityExistsWarning").innerHTML = "This city already exists!";
                                return false;
                            }
                        }
                    }
                    xmlhttp.open("GET", "checkIfCityExists.php?city=" + cityInput + "&country=" + countryInput, true);
                    xmlhttp.send();




} 

checkIfCityExists.php echoes "true" if the city already exists in the database and "false" otherwise.

The problem is that it always adds the city in the db even though the city already exists. checkIfCityExists.php returns "true" but it doesn't seem to matter.

I really don't know what the problem is, any help would be greatly appreciated. Thanks!

here is checkIfCityExists.php:

<?php
include ('database_connection.php');
$city = mysqli_real_escape_string($dbc, $_GET['city']);
$country = mysqli_real_escape_string($dbc, $_GET['country']);

//check if the city and country already exists in the database
$query_verify = "SELECT * FROM city WHERE name = '$city' AND country = '$country'";
$result_verify = mysqli_query($dbc, $query_verify);

if(mysqli_num_rows($result_verify) == 0) { //if the city does not appear in the database
    echo "false";
}
else {
    echo "true";
}

?>

Answer 1

The problem is, your onsubmit has no return. So validateCityInfoForm() returns undefined which does not prevent the Browser from executing the action. validateCityInfoForm() should return false to prevent the Browser from submitting the form. And then in the onreadystatechange call form.submit() if necessary.