Я пытаюсь представить два раскрывающихся списка с данными JSON в мою таблицу базы данных. Я могу получить данные, вставленные в таблицу, но столбцы "дата" и "время" показывают идентификатор и родительский идентификатор вместо даты и времени, доступных в выпадающих меню. Может ли кто-нибудь сказать мне, почему это? (Отображение основного релевантного кода)
<?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>
Не устанавливайте атрибут value
<option>
если вы не хотите, чтобы форма получала это значение вместо видимого текста.
Если вы пишете такой вариант внутри <select name="date">
:
<option value="">Select an option</option>
Затем форма POSTing будет доставлять $_POST['date'] = ''
.
Если вы пишете:
<option>Select an option</option>
Затем форма POSTing будет выдавать $_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>');
}
});
Вы переписываете пустую опцию в #date, так что это не нужно в html. Вы можете изменить следующую строку:
html_code += '<option value="' + value.id + '">' + value.avail + '</option>';
чтобы:
html_code += '<option value="' + value.avail + '" data-id="'+value.id+'">' + value.avail + '</option>';
Опубликованное значение для "даты" и "времени" будет выбранным атрибутом значения параметра, но это приведет к поломке выбора даты и получению времени на основе этого идентификатора. В этом случае вы можете добавить атрибут идентификатора данных и использовать его для получения времени, которое означает, что следующий код изменится:
var date_id = $(this).val();
чтобы:
var date_id = $(this).data('id');