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

时间:2019-12-30 23:11:37

标签: php dropdown onchange

我正在使用以下代码将下拉列表的选定值传递给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
   }
   ?>

1 个答案:

答案 0 :(得分:0)

您应该为此使用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'));
}

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