使用AJAX调用时POST变量为null

Question

我正在尝试使用POST AJAX call在下拉列表中选择的值。但是，当从下拉列表中选择值时，POST变量将保持空白。

我已经使用ECHO method来检查它是否返回POST值。但是它是空的。

以下是参考代码：

Javascript（Jquery和Ajax）：

<script>
$(document).ready(function(){
    $("#booking_date").change(function(){ //listen when the option change   
        var optionValue = $("#booking_date").val();  //get the new value

        $.ajax({
            url: "doctordetails.php", //php file which recive the new value and save it to the database
            data: { optionValue: optionValue },  //send the new value
            type: "POST"  ,                  //use POST method
            success: function(data) {
                console.log(optionValue);
            }
        });
    });
});
</script>   

HTML：

<div class="row">
  <div class="col-6">
    <div class="form-group">
      <input class="form-control" type="text" id="booking_date" name="booking_date" data-lang="en" data-min-year="2017" data-max-year="2020" data-disabled-days="10/17/2017,11/18/2017">
    </div>
  </div>
  <div class="col-6">
    <div class="form-group">
      <select class="form-control">
        <option value="">Select slot</option>>
        <?php
            require_once("dblogin.php");
        ?>
        <option value="<?php echo $_POST[" optionValue "]; ?>">
          <?php echo $_POST["optionValue"]; ?>
        </option>
      </select>
    </div>
  </div>
</div>

预期结果：

$_POST应该返回booking_date的选定值，并且$_POST值将在SQL查询中使用。

Answer 1

如果这是下拉列表，则ID必须在选择框中。您在其他选择框之外的文本框上设置了booking_date ID。写为：

<select id="booking_date" class="form-control"> </select>

Answer 2

如果要从select（下拉列表）进行赋值，则必须在<select>而不是文本框<input>上设置id

   <select id="booking_date" class="form-control">
      <option value="">Select slot</option>>
      <?php require_once("dblogin.php"); ?>
      <option value="<?php echo $_POST["optionValue"]; ?>">
            <?php echo $_POST["optionValue"]; ?>
      </option>

   </select>

关于脚本：

<script>
$(document).ready(function(){
    $("#booking_date").change(function(){ //listen when the option change   
        var optionValue = $(this).val();  //get the new value

        $.ajax({
            url: "doctordetails.php", //php file which recive the new value and save it to the database
            data: { getValue: optionValue },  //send the new value
            type: "POST"  ,                  //use POST method
            success: function(data) {
                console.log(data);
            }
        });
    });
});
</script>