json下拉列表中的值,显示数据库中的id号而不是字符串

dsf9zpds  于 2021-06-23  发布在  Mysql
关注(0)|答案(2)|浏览(400)

我试图将两个包含json数据的下拉列表提交到我的数据库表中。我可以得到插入到表中的数据,但是'date'和'time'列显示id和父id,而不是下拉列表中可用的日期和时间。有人能告诉我这是为什么吗(主要相关代码(显示)

  1. <?php
  2. session_start();
  3. include('includes/config.php');
  4. error_reporting(0);
  5. if (isset($_POST['submit'])) {
  6. $arenadate = $_POST['date'];
  7. $arenatime = $_POST['time'];
  8. $useremail = $_SESSION['login'];
  9. $sql = "INSERT INTO tblbooking(userEmail,ArenaDate,ArenaTime) VALUES(:useremail,:date, :time)";
  10. $query = $dbh->prepare($sql);
  11. $query->bindParam(':useremail', $useremail, PDO::PARAM_STR);
  12. $query->bindParam(':date', $arenadate, PDO::PARAM_STR);
  13. $query->bindParam(':time', $arenatime, PDO::PARAM_STR);
  14. $query->execute();
  15. $lastInsertId = $dbh->lastInsertId();
  16. if ($lastInsertId) {
  17. echo "<script>alert('Booking successful.');</script>";
  18. }
  19. else {
  20. echo "<script>alert('Something went wrong. Please try again');</script>";
  21. }
  22. }
  23. ?>
  24. <form action="" method="post">
  25. <div class="contact_form gray-bg">
  26. <div class="form-group">
  27. <label for="" class="control-label">Select Date</label>
  28. <select name="date" id="date" class="form-control white_bg"
  29. data-width="120px" style="color:black" required>
  30. <option value="">Select Date</option>
  31. </select>
  32. </div>
  33. <div class="form-group">
  34. <label for="" class="control-label">Select Time</label>
  35. <select name="time" id="time" class="form-control white_bg"
  36. data-width="120px" style="color:black" required>
  37. <option value="">Select Time</option>
  38. </select>
  39. </div>
  40. <?php if ($_SESSION['login']) {
  41. ?>
  42. <div class="modal-footer text-center">
  43. <input type="submit" name="submit" value="Confirm Booking"
  44. class="btn btn-xs uppercase">
  45. </div>
  46. <?php } else { ?>
  47. <a href="#loginform" class="btn btn-xs uppercase" data-toggle="modal"
  48. data-dismiss="modal">Login To Book Seat</a>
  49. <?php } ?>
  50. </div>
  51. </div>
  52. </div>
  53. </form>
  54. </div>
  55. </div>
  56. </section>
  57. <script>
  58. $(document).ready(function (e) {
  59. function get_json_data(id, parent_id) {
  60. var html_code = '';
  61. $.getJSON('date_list.json', function (data) {
  62. ListName = id.substr(0, 1).toUpperCase() + id.substr(1);
  63. html_code += '<option value="">Select ' + ListName + '</option>';
  64. $.each(data, function (key, value) {
  65. if (value.parent_id == parent_id) {
  66. html_code += '<option value="' + value.id + '">' + value.avail + '</option>';
  67. }
  68. });
  69. $('#' + id).html(html_code);
  70. });
  71. }
  72. get_json_data('date', 0);
  73. $(document).on('change', '#date', function () {
  74. var date_id = $(this).val();
  75. if (date_id != '') {
  76. get_json_data('time', date_id);
  77. } else {
  78. $('#time').html('<option value="">Select Time</option>');
  79. }
  80. });
  81. });
  82. </script>
7kjnsjlb

7kjnsjlb1#

不要设置 value 属性 <option> 标记,除非希望窗体接收该值而不是可见文本。
如果你在一个 <select name="date"> :

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

然后投递表格就会送达 $_POST['date'] = '' .
如果你写:

  1. <option>Select an option</option>

然后投递表格就会送达 $_POST['date'] = 'Select an option' .
在表单传递方面,永远不需要将选项文本作为值复制。
如果要在每个 <option> tag,我会给你和acmofocord一样的建议因为 data- 属性对于它们可以保存的值是干净和灵活的。
具体来说,我是说:

  1. function get_json_data(id, parent_id) {
  2. var html_code = '';
  3. $.getJSON('date_list.json', function (data) {
  4. ListName = id.substr(0, 1).toUpperCase() + id.substr(1);
  5. html_code += '<option value="">Select ' + ListName + '</option>';
  6. $.each(data, function (key, value) {
  7. if (value.parent_id == parent_id) {
  8. html_code += '<option data-id="' + value.id + '">' + value.avail + '</option>';
  9. }
  10. });
  11. $('#' + id).html(html_code);
  12. });
  13. }

然后:

  1. $(document).on('change', '#date', function () {
  2. if ($(this).val() != '') {
  3. get_json_data('time', $(this).data('id'));
  4. } else {
  5. $('#time').html('<option value="">Select Time</option>');
  6. }
  7. });
展开查看全部
oiopk7p5

oiopk7p52#

您正在覆盖#date中的空选项,因此html中实际上不需要该选项。您可以更改以下行:

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

收件人:

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

“date”和“time”的过帐值将是“selected options value”属性,但这将中断基于该id选择日期和获取时间的过程。在这种情况下,可以添加数据id属性并使用该属性获取时间,这意味着以下代码将从:

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

收件人:

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

相关问题