Выбрать раскрывающийся список можно отправить только один раз

Я создал веб-страницу с двумя раскрывающимися списками выбора: один для выбора типа самолета, а другой для выбора места пилота. Проблема, с которой я сталкиваюсь, заключается в том, что когда я выбираю опцию в одном раскрывающемся списке, содержимое другого раскрывающегося списка исчезает. Я хочу одновременно отображать как базовый вес выбранного типа самолета, так и вес выбранного сиденья пилота.

Вот пример того, чего я пытаюсь достичь:

Если я выберу Aircraft Type: M503-1, я увижу базовый вес для этого типа самолета.
Затем, если я выберу Pilot Seat Type: Captain, я хочу, чтобы на странице отображались одновременно базовый вес M503-1 и вес сиденья Captain.

Я пробовал использовать переменные сеанса для хранения значений $basicWeight и $pilotSeatWeight, но, похоже, это работает не так, как ожидалось. Как я могу гарантировать, что оба $basicWeight и $pilotSeatWeight отображаются вместе на основе выбора, сделанного в обоих раскрывающихся списках?

<?php
session_start();
$_SESSION['selectedAircraftID'] = "0";
?>


<!--AIRCRAFT DETAIL TABLE-->
<?php
include 'db.php';      

$aircraftID = '0';
$basicWeight = '0';
$CGArm = '0';
$lat = '0';

if (isset($_POST['aircraftType'])) {
  $selectedAircraftID = $_POST['aircraftType'] ; 
  $sql = "SELECT * FROM aircraft WHERE aircraftID = '$selectedAircraftID'";

  $result = $conn->query($sql);

    if ($result->num_rows > 0) {
      while ($row = $result->fetch_assoc()) {
        $aircraftID = $row['aircraftID'];
        $basicWeight = $row['basicWeight'];
        $CGArm = $row['CGArm'];
        $lat = $row['lat'];
      }
    }  
  }  
  ?>
  

<!--Basic Weight ROW PHP-->
<?php
  include 'db.php';

  if (isset($_POST['aircraftType'])) {
    $selectedAircraftID = $_POST['aircraftType'];

    $sql = "SELECT * FROM aircraft WHERE aircraftID = '$selectedAircraftID'";

    if ($selectedAircraftID == "N/A") {
      $aircraftID = "0";
      $basicWeight = "0";
      $CGArm = "0";
      $lat = "0";
    } else {
      $result = $conn->query($sql);

      if ($result-> num_rows > 0) {
        while($row = $result -> fetch_assoc()){
          $aircraftID = $row['aircraftID'];
          $basicWeight = $row['basicWeight'];
          $CGArm = $row['CGArm'];
          $lat = $row['lat']; 
        }
      }
    }
  } else {
    $conn->close();
  }
?>   


<!--PILOT ROW PHP-->
<?php           

  $pilotSeatWeight = '0';
  $pilotSeatLong = '0'; 
  $pilotSeatLat = '0'; 
  include 'db.php';

  if (isset($_POST['pilotSeatType'])) {
    $selectedseatID = $_POST['pilotSeatType'];

    $sql = "SELECT * FROM mainseat WHERE seatID = '$selectedseatID'";

            
      $result = $conn->query($sql);

      if ($result-> num_rows > 0) {
        while($row = $result -> fetch_assoc()){
          $pilotSeatWeight = $row['seatWeight'];
          $pilotSeatLong = $row['seatLong'];
          $pilotSeatLat = $row['seatLat']; 
        }
      } 
    } else {
    $conn->close();
  }
?>  


<!DOCTYPE html>
  <html lang = "en">
  <head>
      <meta charset = "UTF-8">
      <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
      <title>Weight and balance calculation</title>

      <link rel = "preconnect" href = "https://fonts.googleapis.com">
      <link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin>
      <link href = "https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel = "stylesheet">

      <link rel = "stylesheet" href = "styles/home.css">
    </head>
    <body>
       <div class = "aircraft-details-container">
        <div class = "aircraft-details-header">Aircraft Details</div>
        
          <table class = "aircraft-details-table">
            <thead>
              <tr>
                <th class = "aircraft-details-th">DATE</th>
                <th class = "aircraft-details-th">AIRCRAFT</th>
                <th class = "aircraft-details-th">BASIC WEIGHT</th>
                <th class = "aircraft-details-th">C OF G</th>
                <th class = "aircraft-details-th">LAT(MM)</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class = "aircraft-details-td">
                  <input class = "aircraft-details-date" type = "date" name = "selectedDate">
                </td>
                <td class = "aircraft-details-td">
                  <form method = "POST" id = "aircraftForm">
                    <select class = "aircraft-select" name = "aircraftType" onchange = "submitForm()">
                      <option value = "-" >N/A</option>
                      <?php
                          include 'db.php';
                          
                          if (isset($_POST['aircraftType'])) {
                            $selectedAircraftID = $_POST['aircraftType'];
                          } else {
                            $selectedAircraftID = "-";
                          }

                          $sql = "SELECT * FROM aircraft";
                          $result = $conn->query($sql);

                          while($row = $result-> fetch_assoc ()) {
                            $aircraftID = $row['aircraftID'];

                            if ($aircraftID == $selectedAircraftID) {
                              $selected = 'selected';
                            } else {
                              $selected = '';
                            }

                            echo "<option value='$aircraftID' $selected>$aircraftID</option>";
                          }   
                      ?>    
                    </select>
                  </form>
              </td>

              <td class='aircraft-details-td'><?php echo $basicWeight ?></td>
                  <td class='aircraft-details-td'><?php echo $CGArm ?> </td>
                  <td class='aircraft-details-td'><?php echo $lat ?> </td>
                </tr>
            </tbody>
          </table>
        </div>

        <!---Passenger Details Table -->

        <div class = "passenger-details-container">
          <div class = "passenger-details-header">Passenger Details</div>
          <table class = "passenger-details-table">
          <thead>
            <tr>
              <th class = "passenger-details-th">ITEM</th>
              <th class = "passenger-details-th">WIGHT (KG)</th>
              <th class = "passenger-details-th">SEAT</th>
              <th class = "passenger-details-th">ROW</th>
              <th class = "passenger-details-th">SEAT WEIGHT (KG)</th>
              <th class = "passenger-details-th">CG ARM (MM)</th>
              <th class = "passenger-details-th">MOMENTS LONG (KGMM)</th>
              <th class = "passenger-details-th">LAT(MM)</th>
              <th class = "passenger-details-th">MOMENTS LAT (KGMM)</th>
            </tr>
          </thead>
          <tbody>

          <!--BASIC WEIGHT ROW -->

          <tr>
            <td class='passenger-details-td'>Basic Weight</td>
            <td class='passenger-details-td'><?php echo $basicWeight; ?></td>
            <td class='passenger-details-td'>N/A</td>
            <td class='passenger-details-td'>N/A</td>
            <td class='passenger-details-td'>N/A</td>
            <td class='passenger-details-td'><?php echo $CGArm; ?></td>
            <td class='passenger-details-td'><?php echo(floatval($basicWeight) * floatval($CGArm)); ?></td>
            <td class='passenger-details-td'><?php echo $lat; ?></td>
            <td class='passenger-details-td'><?php echo (floatval($basicWeight) * floatval($lat)); ?></td>
          </tr>

          <!--PILOT ROW -->

          <tr>
            <td class='passenger-details-td'>Pilot</td>
            <td class='passenger-details-td'>80.0</td>
            <td class='passenger-details-td'>
              <form id = "pilotForm" method = "POST">
                <select class = "select-main" name = "pilotSeatType" onchange = "submitpilotForm()">
                <option value = "-">N/A</option>
                <?php
                $pilotSeatType = "";

                if (isset($_POST['pilotSeatType'])) {
                    $pilotSeatType = $_POST['pilotSeatType'];
                }
                ?>
                <option value = "pilotSeat" <?php if ($pilotSeatType === 'pilotSeat') echo 'selected'; ?>>Pilot Seat</option>
                <option value = "coPilotSeat" <?php if ($pilotSeatType === 'coPilotSeat') echo 'selected'; ?>>Co Pilot Seat</option>
                <select>
              </form> 
            </td>
            <td class='passenger-details-td'>N/A</td>
            <td class='passenger-details-td'><?php echo $pilotSeatWeight; ?></td>
            <td class='passenger-details-td'><?php echo $pilotSeatLong; ?></td>
            <td class='passenger-details-td'><?php echo (floatval(80) * $pilotSeatWeight); ?></td>
            <td class='passenger-details-td'><?php echo $pilotSeatLat; ?></td>
            <td class='passenger-details-td'><?php echo (floatval(80) * $pilotSeatLat); ?></td>
          </tr>



          <script>

            function submitForm() {
                document.getElementById("aircraftForm").submit(); 
            }
  
            function submitpilotForm() {
              document.getElementById("pilotForm").submit(); 
            }
   

          </script>

          </tbody>
          </table>
        </div>

        
      </body>
    </html>

К вашему сведению: ваш код открыт для SQL-инъекций

— 22.09.2023 10:18

Как вы пытались решить проблему? Где ты застрял? Также имейте в виду, что ваш запрос очень уязвим для SQL-инъекций. Ознакомьтесь с подготовленными заявлениями, чтобы избежать взлома

— 22.09.2023 10:18

Почему бы не поместить оба поля в одно и то же <form? Затем, когда форма будет отправлена, оба выбранных значения будут отправлены в PHP одновременно. На данный момент у вас есть отдельные формы, каждая из которых содержит одно значение, и вы можете отправить только одну форму за раз.

— 22.09.2023 11:28

Предупреждение: вы широко открыты для SQL-инъекций и должны использовать подготовленные параметризованные операторы вместо того, чтобы создавать запросы вручную. Их предоставляет PDO или MySQLi . Никогда не доверяйте никакой информации! Даже если ваши запросы выполняются только доверенными пользователями, вы все равно рискуете повредить свои данные . Сбежать недостаточно!

— 22.09.2023 14:23

javascript php html

22.09.2023 10:11

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ваш код немного упущен, но я постараюсь ответить на главный вопрос. Вам следует добавить 2 скрытых ввода в обе формы, чтобы обрабатывать выбранную опцию из другой формы.

один скрытый ввод для идентификатора и другой тип места в первой форме.
один скрытый ввод для идентификатора и другой для веса во второй форме.

Поэтому, когда пользователь меняет одну из форм, значения будут сохранены на скрытых входах другой формы с помощью $_POST. Но имейте в виду, что это может привести к конфликту, если пользователи продолжают изменять значения выбора или одновременно менять выбор!

Лучше всего использовать jQuery $.post, Ajax или даже XMLHttpRequest. Таким образом, вы можете динамически обновлять формы и значения без каких-либо конфликтов. Если вам нужна более подробная информация, выберите свой путь и дайте мне знать, каким путем вы хотите пойти.

Конечно, в любое время :)

— 22.09.2023 15:12

22.09.2023 13:04