<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<?php
//error_reporting(0); //hide error
//Demo 4: GuessingA.php set cookies to avoid many submit times
header("Content-Type:text/html; charset=utf-8"); 
$servername = "localhost";
$username = "id21593489_id17615458_tangb";
$password = "c5t9QN19L(W6EPRq";
$database = "id21593489_id17615458_zadmin_website";

$conn = mysqli_connect($servername, $username, $password)or die("cannot connect to the db, please press 'F5' Key");//connect server
mysqli_select_db($conn,$database)or die("cannot open the selected db, please press 'F5' Key");//select db
mysqli_query($conn,"set names utf8");//utf8 to select data, allow show chinese
$data=mysqli_query($conn,"SELECT DISTINCT Continent FROM `Country` WHERE 1 ORDER BY Continent;") or die("no data");//all table in contact db
?>
  <title>e-Travel System</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="icon" type="image/png" href="/images/favicon/favicon-32x32.png" sizes="32x32">
        <link rel="icon" type="image/png" href="/images/favicon/favicon-16x16.png" sizes="16x16">
	<link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/w3.css">
</head>

<body>
<div id="wrapper">
<div id="main" class="clearfix">
<div class="w3-center w3-blue w3-padding-48">
<h1>Search City in Continent</h1>
</div>

<form>
<div class="w3-content w3-container w3-padding-64">
    
      <p>Complete the form and search. Total 4079 cities in database.</p>
      <div class="w3-row-padding" style="margin:0 -16px 8px -16px">
        <div class="w3-half">
          <p>Continent: 
		  <select class="w3-input w3-border w3-hover-light-grey" name="continent" id="continent" onchange="showAbsence(this.value)" required>
				<option disabled selected value> -- select an option -- </option>
		  <?php
				if (!$data)  die ("");
					else {
					while ($row=mysqli_fetch_array($data,MYSQLI_ASSOC))  {
						print("<option value=" .str_replace(' ','', $row["Continent"]) . ">" . $row["Continent"] . "</option>");
					}
					}
					
					mysqli_close($conn);
					?>
			</select>		
			</p>
		  </div>
        
      </div>
	  <p id="displayContinent"></p>
	
    
</div>
</form>
</div>
</div>

<script>
function showAbsence(str) {
	if (str.length == 0) { 
        document.getElementById("displayContinent").innerHTML = "";
        return;
    } else {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("displayContinent").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET", "continent_name.php?q=" + str, true);
        xmlhttp.send();
    }
}
</script>

<div id="footer" class="w3-center w3-dark-grey w3-padding-48 w3-hover-text-black">
	 &copy; 2016
	 <script>new Date().getFullYear()>2016&&document.write("-"+new Date().getFullYear()); </script>
	 , <a href="/">tangb.tk</a>, 
	 All Rights Reserved
     &middot; 
</div>


</body>
</html>