基于选择字段的值自动填充表单字段

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/

---