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

Question

我正在使用下面的代码将下拉列表的选定值传递给php变量“ pack”。选择下拉列表的值后，刷新页面即可完成此操作。下拉列表是灯箱表单的一部分，该表单显示为弹出窗口。主要问题在于，不是刷新灯箱表单的弹出窗口（在其中是drowpdown），而是刷新后的整个页面。因此，以这种方式，一旦用户再次按下（后页的）“立即预订”按钮，灯箱表单就会消失并再次出现。这样，所选值将以表格形式显示。是否可能仅刷新弹出窗口？我期待着您的帮助。

  <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'));
}

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