2017-06-28 20 views
0

的JavaScript

// JQuery script is on ajax.php page 
// JQUERY PIECE TO PROCESS STATE AND CITY VALUES 
// BASED ON COUNTRY SELECTION 

function change_CountryNo() { 
    var xmlhttp = new XMLHttpRequest(); 
    xmlhttp.open("GET", "ajax.php?CountryNo=" + document.getElementById("CountryNodd").value, false); 
    xmlhttp.send(null); 
    document.getElementById("StateID").innerHTML = xmlhttp.responseText; 


    if (document.getElementById("CountryNodd").value == "CountryNo") { 
    document.getElementById("CityID").innerHTML = "<select><option>City</option></select>"; 

    } 
} 

function change_StateID() { 
    var xmlhttp = new XMLHttpRequest(); 
    xmlhttp.open("GET", "ajax.php?StateID=" + document.getElementById("StateIDdd").value, false); 
    xmlhttp.send(null); 
    document.getElementById("CityID").innerHTML = xmlhttp.responseText; 

    if (getElementById("StateIDdd").value == "StateID") { 
    document.getElementById("CityID").innerHTML = "<select><option>City</option></select>"; 

    } 
} 


<!DOCTYPE html> 
<html> 

<head> 

    <!-- index.php --> 

    <!-- THIS CODE PROVIDES A DROP DOWN FORM 
FOR USER TO SELECT COUNTRY THEN STATE THEN CITY 
A JQUERY SCRIPT PROCESSES THE COUNTRY VALUE 
TO PRODUCE THE APPROPRIATE STATES AND 
PROCESSES THE STATE VALUE TO PRODUCE 
THE APPROPRIATE CITIES --> 


    <title>Country, State, City Selection</title> 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="css/styles.css"> 

</head> 

<body> 


    <!-- THESE FILES ARE DATABASE CONNECTION AND FUNCTIONS 
FOR VARIOUS LOGIN, USER SESSION VARIABLES TO IDENTIFY 
THE CONTACT NO OF USER UPDATING THEIR LOCATION --> 

    <?php include("includes/header.php") ?> 

    <?php include("includes/nav.php") ?> 



    <?php //Check user's login status 
if (logged_in() === false) { 

     echo "Redirecting..."; 
     redirect("../index.html"); 
     } 
?> 

    <!-- responsive setup for form --> 
    <div class="row"> 
    <div class="col-lg-6 col-lg-offset-3"> 
    </div> 
    </div> 
    <!-- end of class row div --> 
    <div class="row"> 
    <div class="col-md-6 col-md-offset-3"> 
     <div class="panel panel-login"> 
     <div class="panel-heading"> 
      <div class="row"> 
      <div class="col-xs-12"> 
       <div class="col-xs-6"> 
       </div> 
       <div class="col-xs-6"> 
       <a href="Country-State-City.php" class="active" id="">Country-State-City Selection</a> 
       </div> 
      </div> 
      <hr> 
      </div> 
      <!-- end of class row div --> 
      <div class="panel-body"> 
      <div class="row col-md-12" style="text-align: center"> 
       <form method="POST" action="<?php echo htmlspecialchars($_SERVER[" PHP_SELF "]);?>" autocomplete="off"> 
       <div id="CountryNo" class="col-xs-3 form-group" style="font-size: 75%"> 
        <select id="CountryNodd" name="CountryNodd" onChange="change_CountryNo()" class="form-control selectpicker" style="width:100%;"> 
         <option>Country</option> 
         <?php 
          $res=mysqli_query($con, "SELECT * FROM countries ORDER BY Country_Descrip"); 
          while($row=mysqli_fetch_array($res)) 
          { 
         ?> 
          <option value="<?php echo $row["CountryNo"]; ?>"><?php echo $row["Country_Descrip"]; ?></option> 
          <?php $CountryNodd = $_POST["CountryNo"]; ?> 
         <?php    } 

         ?> 
        </select> 
       </div> 

       <div id="StateID" class="col-xs-3 form-group" style="font-size: 75%"> 
        <select id="StateIDdd" name="StateID" class="form-control selectpicker" style="width:100%;"> 
        <option>Product</option> 
        </select> 
       </div> 
       <div id="CityID" class="col-xs-3 form-group" style="font-size: 75%"> 
        <select id="CityIDdd" name="CityIDdd" class="form-control selectpicker" style="width:100%;"> 
       <option>Brand</option> 
       </select> 
       </div> 
       <div class="form-group"> 
        <img src="img\..." class="img-responsive" alt="Country-State-City Image" width="100%" height="auto"> 
        <div class="col-lg-12 text-center"> 
        <br> 
        <input type="submit" name="reset" id="reset" tabindex="3" class="form-control btn btn-register" value="Reset Country-State-City Selections" required> 
        </div> 
       </div> 
       <div class="form-group"> 
        <div class="col-lg-12 text-center"> 
        <br> 
        <input type="submit" name="Update My Country-State-City" id="update" tabindex="4" class="form-control btn btn-register" value="Update My Country-State-City" required> 
        </div> 
       </div> 
       </form> 
       <!-- end of form --> 
      </div> 
      <!-- end of row col-md-12 div --> 
      </div> 
      <!-- end of panel-body div --> 
     </div> 
     <!-- end of panel-heading div --> 
     </div> 
     <!-- end of panel-login div --> 
    </div> 
    <!-- end of col-md-6 col-md-offset-3 div --> 
    </div> 
    <!-- end of class row div --> 



    <!-- ajax.php --> 

    <!DOCTYPE HTML> 
    <html> 

    <head> 
    <title>ajax.php</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 


    <?php 

//THIS FILE PROCESSES THE JQUERY SELECT BASED ON COUNTRY INPUT AND 
//THE STATE INPUT 


// Turn off error reporting 
error_reporting(0); 

$con=mysqli_connect('localhost', 'root', '', 'contact_info'); 
mysqli_set_charset($con,"utf8"); 
if (!$con) { 
    die('Could not connect: ' . mysqli_error()); 
} 


// Get the Country and State Values User Selects 

$CountryNo=$_GET["CountryNo"]; 
$StateID=$_GET["StateID"]; 


//Check user selection for country and list states 

if($CountryNo!="Country") 
{ 
    $query="SELECT State_ID, StateCountry_ID, State_Description FROM states WHERE StateCountry_ID=$CountryNo ORDER BY State_Description"; 
    $result=mysqli_query($con, $query); 
    echo "<select id='StateIDdd' onchange='change_StateID()' selected>"; 
    echo "<option>"; echo "State"; echo "</option>"; 
    while($row=mysqli_fetch_array($result)) 
    { 
     echo "<option value='$row[State_ID]'>"; echo $row["State_Description"]; echo "</option>"; 

    } 
    echo "</select>"; 

} 

//Check user selection for state and list cities 

if($StateID!="State") 
{ 
     $query="SELECT CityID, City_Name, CountryNo, CityState_ID FROM cities WHERE CityState_ID=$StateID ORDER BY City_Name"; 
     $result=mysqli_query($con, $query); 
     echo "<select>"; 

     while($row=mysqli_fetch_array($result)) 
     { 
      echo "<option value='$row[CityID]' selected>"; echo $row["City_Name"]; echo "</option>"; 

     } 
     echo "</select>"; 


} 
?> 


     <?php include("ajax2.php") //Go to post to MySQL processing 
?> 

    </head> 

    </html> 




    <!-- ajax2.php --> 


    <!-- THIS FILE POSTS THE COUNTRY, STATE, CITY VALUES TO 
MYSQLI AND UPDATES THE USER'S CONTACT LOCATION --> 


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 


    <?php include("includes/header.php") ?> 

    <?php include("includes/nav.php") ?> 


    <? 
// Turn off error reporting 
error_reporting(0); 

$con=mysqli_connect('localhost', 'root', '', 'contact_info'); 
mysqli_set_charset($con,"utf8"); 
if (!$con) { 
    die('Could not connect: ' . mysqli_error()); 
} 

?> 


    <? 
// Ensure user is logged in to get values 
// for ContactNo 

php if (logged_in() === false) { 

     echo "Redirecting..."; 
     redirect("../index.html"); 
     } 

    //store country, state, city selection and update contact's location 

     $CountryNo  = $_POST['CountryNodd']; 
     $StateID  = $_POST['StateIDdd']; 
     $CityID   = $_POST['CityIDdd']; 


    //Update MySQL 
     $sql = "UPDATE contact_location SET CountryNodd=$CountryNo, StateID=$StateID, CityID=$CityID"; 
     $sql.= "WHERE ContactNo=$ContactNo"; //Contact info is from contact table accessed via function include in header.php 

     $res_update = mysqli_query($con,$sql); 
      if($res_update) { 
       echo "Location updated successfully"; 
       } 
       else { 
        echo "Not working..."; 
       } 


?> 

我讀過相關的問題/響應,但沒有解決我的問題。 我對jQuery非常陌生&使用MySQL後端進行PHP編程。

創建一個3級下拉式(國家/州/市)表格,其中用戶 可以選擇國家/城市城市值,該值將更新 MySQL。

雖然我可以GET和POST國家變量,我已經 不成功的州和市。我可以看到State變量的正確值 ,但我沒有看到City變量的值。
此外,我不能發佈狀態或城市變量:我得到一個 「Index Undefined」錯誤的變量與每個變量相關聯。

+0

ajax請求是異步的,所以'responseText'不會在'xmlhttp.send'之後被立即填充。你需要實現回調函數'onreadystatechange' [manual](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/onreadystatechange) – Jeff

+0

,顯然方法(GET和POST)需要比賽。 (您添加到網址的所有內容都在$ _GET中) – Jeff

+0

PHP在代碼片段中不起作用,所以您的示例在此不起作用。改用PHP小提琴或類似的服務。 – Soaku

回答

0

已解決:POST執行發生在JavaScript操作之前,這是因爲PHP,服務器端在Java客戶端之前執行。在城市選擇發生的時候,我將MySQL更新代碼移到了PHP腳本中。

我不會提供代碼,因爲我收到的意見迄今爲止表明我的文檔需要工作。當然,我們非常感謝這些反饋,並將採取措施改進未來的職位。謝謝!

相關問題