поля формы автозаполнения на основе значения из поля выбора

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 и беру кусочки из других вопросов стека. То, что я хочу знать, - это использовать раскрывающееся меню наверху (выбрать свойство, за которым следует динамический список свойств по их идентификатору), как я могу заполнить разные поля формы в зависимости от существующих значений из базы данных sql?

Answer 1

Если я правильно понял, вы пытаетесь получить значения из базы данных каждый раз, когда выбрана опция выбора правильно? Это требует, чтобы вы делали запрос на сервер, так как вы не можете сделать это на стороне клиента.

Вам нужно будет добавить обработчик событий в поле выбора, а затем добавить ajax-вызов, который возвращает нужные вам значения.

Использование Jquery (немного более читаемым) // включить это в голову

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

// включить и изменить 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 при загрузке страницы. Тогда вызов 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/

---