php - 使用 AJAX 调用时 POST 变量为 null

Question

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

我使用了ECHO方法来检查它是否返回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 必须位于选择框上。您设置idbooking_date在选择框以外的文本框上。写为:

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