Question

我正在尝试将两个带有JSON数据的下拉列表提交到我的数据库表中。我可以获得插入表中的数据，但“日期”和“时间”列显示ID和父ID，而不是下拉列表中可用的日期和时间。谁能告诉我为什么会这样？（主要相关代码显示）

<?php

session_start();
include('includes/config.php');
error_reporting(0);

if (isset($_POST['submit'])) {
  $arenadate = $_POST['date'];
  $arenatime = $_POST['time'];
  $useremail = $_SESSION['login'];
  $sql       = "INSERT INTO  tblbooking(userEmail,ArenaDate,ArenaTime) VALUES(:useremail,:date, :time)";
  $query     = $dbh->prepare($sql);
  $query->bindParam(':useremail', $useremail, PDO::PARAM_STR);
  $query->bindParam(':date', $arenadate, PDO::PARAM_STR);
  $query->bindParam(':time', $arenatime, PDO::PARAM_STR);
  $query->execute();
  $lastInsertId = $dbh->lastInsertId();
  if ($lastInsertId) {
    echo "<script>alert('Booking successful.');</script>";
  }
  else {
    echo "<script>alert('Something went wrong. Please try again');</script>";
  }
}

?>

<form action="" method="post">
    <div class="contact_form gray-bg">
        <div class="form-group">
            <label for="" class="control-label">Select Date</label>
            <select name="date" id="date" class="form-control white_bg"
                    data-width="120px" style="color:black" required>
                <option value="">Select Date</option>
            </select>
        </div>

        <div class="form-group">
            <label for="" class="control-label">Select Time</label>
            <select name="time" id="time" class="form-control white_bg"
                    data-width="120px" style="color:black" required>
                <option value="">Select Time</option>
            </select>
        </div>
      <?php if ($_SESSION['login']) {
        ?>
          <div class="modal-footer text-center">
              <input type="submit" name="submit" value="Confirm Booking"
                     class="btn btn-xs uppercase">
          </div>
      <?php } else { ?>
          <a href="#loginform" class="btn btn-xs uppercase" data-toggle="modal"
             data-dismiss="modal">Login To Book Seat</a>
      <?php } ?>
    </div>
    </div>
    </div>
</form>
</div>
</div>
</section>

<script>
  $(document).ready(function (e) {

    function get_json_data(id, parent_id) {
      var html_code = '';
      $.getJSON('date_list.json', function (data) {
        ListName = id.substr(0, 1).toUpperCase() + id.substr(1);
        html_code += '<option value="">Select ' + ListName + '</option>';
        $.each(data, function (key, value) {
          if (value.parent_id == parent_id) {
            html_code += '<option value="' + value.id + '">' + value.avail + '</option>';
          }
        });
        $('#' + id).html(html_code);
      });
    }

    get_json_data('date', 0);

    $(document).on('change', '#date', function () {
      var date_id = $(this).val();
      if (date_id != '') {
        get_json_data('time', date_id);
      } else {
        $('#time').html('<option value="">Select Time</option>');
      }
    });

  });
</script>

Answer 1

您正在覆盖#date中的空选项，因此html中确实不需要。您可以从以下位置更改以下行：

html_code += '<option value="' + value.id + '">' + value.avail + '</option>';

为：

html_code += '<option value="' + value.avail + '" data-id="'+value.id+'">' + value.avail + '</option>';

＆＃39; date＆＃39;的过帐值和＆＃39;时间＆＃39;将是选定的选项值属性，但这将打破选择日期并根据该ID获取时间。在这种情况下，您可以添加data-id属性并使用它来获取时间，这意味着以下代码将从以下更改：

var date_id = $(this).val();

为：

var date_id = $(this).data('id');

Answer 2

除非您希望表单接收该值而不是可见文本，否则请勿设置value标记的<option>属性。

如果你在<select name="date">：

中写下这样的选项

<option value="">Select an option</option>

然后POST表单将传递$_POST['date'] = ''。

如果你写：

<option>Select an option</option>

然后POST表单将传递$_POST['date'] = 'Select an option'。

就表单传递而言，永远不需要将选项文本复制为值。

如果您想在每个<option>标记内存储数据，我将提供与aCMoFoCord相同的建议，因为data-属性对于它们可以容纳的值是干净且灵活的。

具体来说，我说：

function get_json_data(id, parent_id) {
      var html_code = '';
      $.getJSON('date_list.json', function (data) {
        ListName = id.substr(0, 1).toUpperCase() + id.substr(1);
        html_code += '<option value="">Select ' + ListName + '</option>';
        $.each(data, function (key, value) {
          if (value.parent_id == parent_id) {
            html_code += '<option data-id="' + value.id + '">' + value.avail + '</option>';
          }
        });
        $('#' + id).html(html_code);
      });
    }

然后：

$(document).on('change', '#date', function () {
    if ($(this).val() != '') {
        get_json_data('time', $(this).data('id'));
    } else {
        $('#time').html('<option value="">Select Time</option>');
    }
});

下拉列表中的JSON值显示ID号而不是数据库中的字符串

2 个答案: