基於選擇字段的值自動填充表單字段

Question

使用php和html，我有一個表單用於輸入屬性數據到sql數據庫中，屬性的每個主鍵都有一個名爲'property_id'的主鍵，每當它自動生成通過表單添加新的屬性。我創建了另一個表單，以便不插入新的屬性數據，而是更新現有的屬性數據，下面的代碼就是該表單。

<fieldset> 
     Select Property:<br> 
     <select required name="id"> 
     <option value"">Select a property</option> 
      <?php 
      //Database connection 
      (It's there but I've removed it for this question) 
      // Create connection 
      $conn = new mysqli($servername, $username, $password, $dbname); 
      // Check connection 
      if ($conn->connect_error) { 
       die("Connection failed: " . $conn->connect_error); 
      } 

      $result = $conn->query("select * FROM property"); 

      while ($row = $result->fetch_assoc()) { 
       unset($id, $unit, $street, $suburb); 
       $id = $row['id']; 
       $unit = $row['unit']; 
       $street = $row['street']; 
       $suburb = $row['suburb']; 
       echo "<option value='$id'>$unit $street $suburb</option>"; 
      } 
      echo "</select>"; ?> 
     <br /> 
     Unit:<br> 
     <input type="number" name="unit" required value="<?php echo $unit;?>"> 
     <br /> 
     Street:<br> 
     <input type="text" name="street" required value="<?php echo $street;?>"> 
     <br /> 
     Suburb:<br> 
     <input type="text" name="suburb" required value="<?php echo $suburb;?>"> 
     <br /> 
     Postcode:<br> 
     <input type="number" name="postcode" required value="<?php echo $postcode;?>"> 
     <br /> 
     State:<br> 
     <select required name="state"> 
     <option value="">Please Select</option> 
     <option value="ACT">ACT</option> 
     <option value="NSW">NSW</option> 
     <option value="NT">NT</option> 
     <option value="QLD">QLD</option> 
     <option value="SA">SA</option> 
     <option value="TAS">TAS</option> 
     <option value="VIC">VIC</option> 
     <option value="WA">WA</option> 
     </select> 
     <br /> 
     Employee ID:<br> 
     <input type="number" name="employee" required value="<?php echo $employee;?>"> 
     <br /> 
     Owner ID:<br> 
     <select required name="property"> 
     <option value"">Select an owner</option> 
      <?php 
      //Database connection 
      (It's there but I've removed it for this question) 
      // Create connection 
      $conn = new mysqli($servername, $username, $password, $dbname); 
      // Check connection 
      if ($conn->connect_error) { 
       die("Connection failed: " . $conn->connect_error); 
      } 

      $result = $conn->query("select owner_id, first_name, last_name FROM property_owner"); 

      while ($row = $result->fetch_assoc()) { 
       unset($id, $unit, $street, $suburb); 
       $id = $row['owner_id']; 
       $fName = $row['first_name']; 
       $lName = $row['last_name']; 
       echo "<option value='$id'>$fName $lName</option>"; 
      } 
      echo "</select>"; ?> 
     <br /> 
     Type of Property:<br> 
     <input type="radio" name="type" value="Apartment" required checked>Apartment<br /> 
     <input type="radio" name="type" value="Town House">Town House<br /> 
     <input type="radio" name="type" value="House">House<br /> 
     <br /> 
     Rent:<br> 
     <input type="number" name="rent" value="<?php echo $rent;?>"><br /> 
     Bedroom:<br> 
     <input type="number" name="bedroom" value="<?php echo $bedroom;?>"><br /> 
     Bathroom:<br> 
     <input type="number" name="bathroom" value="<?php echo $bathroom;?>"><br /> 
     Furnished:<br> 
     <input name="furnished" type="radio" value="1" checked>Yes<br> 
     <input name="furnished" type="radio" value="0" checked>No<br> 
     Property Description:<br> 
     <textarea name="description" cols="50" rows="15"></textarea> 
     <br /> 
     <p></p> 
     <input type="submit" name="SUBMIT" value="Submit"> 

我一直在關注W3學校的教程，並從其他stackflow問題中抽取一些小部分。我想知道的是，使用頂部的下拉菜單（選擇屬性，然後是動態ID屬性列表），我如何根據sql數據庫中現有的值填充不同的表單域？

Answer 1

如果我理解正確，您每次選擇選項都選擇正確時試圖從數據庫獲取值？這要求您提出服務器請求，因爲您無法在客戶端執行此操作。

您將需要添加一個事件處理程序到您的選擇框，然後添加一個ajax調用，返回您需要的值。

使用jQuery（有點更具可讀性） //包括這頭

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

// include和修改下面的JavaScript：

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('select[name=id]').on('change', function(){ 
      var id = $(this).val(); 
      $.ajax(url: 'getDataFromSQL.php?id=' + id, 
       success: function(data){ 
        /*prepop the form from the data returned*/ 
        /* e.g. if you are returning json */ 
        /* $('input[name=id]').val(data.rent); */ 
       } 
      ); 
     }); 
    }); 
</script> 

，或者你可以輸出全部來自變量SQL Server數據庫頁面加載。然後，不需要ajax調用，但您的表單不會盡可能實時。

你需要什麼瞭解：

你要知道 https://softwareengineering.stackexchange.com/questions/206254/difference-between-a-server-and-a-client

您可能要查找AJAX客戶端和服務器端之間的區別 http://www.codeproject.com/Articles/14142/AJAX-Explained

您可能希望探索活動聽衆： https://api.jquery.com/category/events/

---