在提交表单之前将下拉列表的选定值传递给 php 变量

Question

我正在使用下面的代码将下拉列表的选定值传递给 php 变量“pack”。这是通过在选择下拉列表的值后刷新页面来完成的。下拉列表是作为弹出窗口显示的灯箱表单的一部分。主要问题是，不是只刷新灯箱表单的弹出窗口（下拉菜单所在的位置），而是刷新它后面/之前的整个页面。因此，以这种方式，一旦用户再次按下 Book Now 按钮（在后面的页面），灯箱表单就会消失并再次出现；这样，选定的值就会显示在表格中。是否可以只刷新弹出窗口？我期待您的帮助。

  <select style="width: 200px;" id="myselect" name="pack" onchange="window.location='index.php? 
  id='+this.value+'&pos='+this.selectedIndex;">
    <option value="" selected disabled>Select your package</option>
    <option value="1">Package 1</option>
    <option value="2">Package 2</option>
    <option value="3">Package 3</option>
  </select>

  <?php
  if(isset($_GET['id']))
  {
     $pack=$_GET['id'];
     echo $pack;
  ?>
   <script>
      var myselect = document.getElementById("myselect");
      myselect.options.selectedIndex = <?php echo $_GET["pos"]; ?>
   </script>
   <?php
   }
   ?>

Answer 1

您应该为此使用 JavaScript 和 AJAX 调用，这里有一些代码，您可以随意更改：

index.php

<script
    src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
    crossorigin="anonymous"></script>

<select style="width: 200px;" id="myselect" onchange="packSelected">
    <option value="" selected disabled>Select your package</option>
    <option value="1">Package 1</option>
    <option value="2">Package 2</option>
    <option value="3">Package 3</option>
</select>

<script>
    function packSelected () {
        // pack has been selected, make ajax request to php to process the selection
        $.post("packSelection.php",
            {
                // pass POST parameter 'packId' with the value of the dropdown selection
                packId: $('#myselect').val(),
            },
            function(data, status){
                // check status is success, this is a text version of the status code provided by ajax
                if (status === 'success') {
                    // decode the json we gave back from our php into an object
                    data = JSON.parse(data);
                    // check our php could process the input
                    if (data.result) {
                        // it could, do what you want
                        alert('AJAX Request Successful, packId: '+data.packId);
                    } else {
                        alert('AJAX Error: '+data.error);
                    }
                } else {
                    alert('AJAX Request Failed');
                }
            });
    }
</script>

packSelection.php

<?php
// uncomment line below to access session data about the user, if you are using a login system, useful to do stuff with the pack id
// session_start();

// define return content type
header('Content-Type: application/json');

// check packId is set
if (isset($_POST['packId'])) {
    $packId = $_POST['packId'];
    // DO WHATEVER YOU WANT WITH THE PACK ID HERE.
    // MAYBE:
    //   - Assign packId to the user through MySQL

    // tell AJAX we successfully processed the request and return the packId, could be useful
    echo json_encode(array('result' => 'true', 'packId' => $packId));
} else {
    echo json_encode(array('result' => 'false', 'error' => 'packId is not defined'));
}

如果您需要任何帮助，请发表评论，祝您好运。