Как сделать вывод данных из БД в зависимости от выбранного radio button?
Имеется форма для записи. На ней присутствует выбор мастера (обслуживающего персонала), форма с датами и временем, поля с вводом информации о заказчике и кнопка ЗАПИСАТЬСЯ. Располагается это все на одной странице в одном теге form. При нажатии на кнопку ЗАПИСАТЬСЯ все введенные данные включая мастеров, дату и время и информации о заказчике отправляются в БД.
Как сделать так, чтобы при выборе разных мастеров, менялась форма с датами и временем?
В БД также имеются три таблицы соответствующие датам и времени трех мастеров.
Если не сложно подскажите еще, как задавать CSS свойства выведенным объектам?
Название таблиц и полей в БД для каждого мастера:
table - #desavir_Полина
поля: ID_date_polina,date,time
table - #desavir_Света
поля: ID_date_sveta,date,time
table - #desavir_Света2
поля: ID_date_sveta2,date,time
<main>
<form action="php/rec.php" method="post">
<div id="Page_center">
<div class="employee">
<div class="section_name">
<snap class="section_text">Выберите мастера</snap>
</div>
<label class="employee_data">
<input type="radio" name="master" value="#desavir_Полина" required checked>
<snap class="info_of_employee">Полина</snap>
</label>
<label class="employee_data">
<input type="radio" name="master" value="#desavir_Света">
<snap class="info_of_employee">Света</snap>
</label>
<label class="employee_data">
<input type="radio" name="master" value="#desavir_pedi_Света">
<snap class="info_of_employee">Света</snap>
</label>
</div>
<div class="date">
<div class="section_name">
<snap class="section_text">Выберите дату и время</snap>
</div>
?????????????????????????????????????????????
<div >
</div>
</div>
<div class="rules">
<div class="section_name">
<snap class="section_text">Ознакомьтесь с правилами</snap>
</div>
<div class="info_rules">
<snap class="info_rules_text">
▪БЛАБЛАБЛА
</snap>
</div>
</div>
<div class="data">
<div class="section_name">
<snap class="section_text">Введите данные</snap>
</div>
<div class="container_input_field">
<div class="input_field_info">
<snap class="name_of_input_field">Имя</snap>
<snap class="name_of_input_field" title="Напишите, пожалуйста свое ФИО. Для того, чтобы попасть в здание мы должны внести Вас в список на охране">Фамилия*</snap>
<snap class="name_of_input_field">Тел.</snap>
<snap class="name_of_input_field">Instagram</snap>
</div>
<div class="input_field">
<input type="text" class="form-control" name="client_name" placeholder="Введите Имя" required>
<input type="text" class="form-control" name="client_surename" placeholder="Введите Фамилию" required>
<input type="text" class="form-control" name="client_tel" placeholder="Введите Телефон">
<input type="text" class="form-control" name="client_inst" placeholder="Введите nickname" required>
</div>
</div>
</div>
<div class="submit_button">
<input type="submit" value="Записаться" class="button_or" name="zapis_button">
</div>
</div>
</form>
Ответы (1 шт):
Прежде всего, необходимо сделать запрос БД для получения массивов возможных периодов времени. Реализаций здесь может быть несколько.
Я бы советовал сделать запрос подключения к БД в отдельном файле и подключить его в основной используя include или require.
Пример: include "bd.php";
Далее Вы можете прямо в этом же файле сделать запрос в БД по каждому из участников, либо по id мастера, либо лучше по дате(Так как предыдущие даты Вам нет необходимости проверять, так как на предыдущее число не должно быть возможности сделать запись к мастеру).
Читайте, пожалуйста, комментарии во всех примерах для полного понимания.
Запрос, в Вашем случае выглядел бы следующим образом. Не знаю, используется ли PDO, по-этому пример с mysqli:
$servername = ""; // Тут указываете ip Вашей базы данных
$username = ""; // Логин пользователя mysql
$password = ""; // Пароль пользователя mysql
$db = ""; // Название базы данных.
$conn = mysqli_connect($servername, $username, $password, $db); // Выполняем подключение
if ($conn->connect_errno) { // Проверяем ошибки
// Соединение не удалось.
echo "Ошибка: Не удалась создать соединение с базой MySQL и вот почему: \n";
echo "Номер ошибки: " . $conn->connect_errno . "\n";
echo "Ошибка: " . $conn->connect_error . "\n";
exit;
}
$today = date("Y-m-d"); // Формат даты делаем такой же как и в базе данных
$query = "SELECT * FROM `desavir_Полина` WHERE (date>='$today')"; // Готовимзапрос в БД
$q = mysqli_query($conn, $query); //Отправляем запрос
$q = mysqli_fetch_array($q); //Получаем данные по мастеру Полины в массиве.
// Так же для каждого мастера
Далее, в основном файле делаем параметры фильтрации через функцию if.
Если мастер "Полина", то показываем одни данные, если другой, то другие.
Вот условный пример (лишнее удалил, чтобы не нагружало понимание примера):
<main>
<form action="php/rec.php" method="post">
<div id="Page_center">
<div class="employee">
<div class="section_name">
<snap class="section_text">Выберите мастера</snap>
</div>
<label class="employee_data">
<input type="radio" name="master" value="#desavir_Полина" required checked>
<snap class="info_of_employee">Полина</snap>
</label>
<label class="employee_data">
<input type="radio" name="master" value="#desavir_Света">
<snap class="info_of_employee">Света</snap>
</label>
<label class="employee_data">
<input type="radio" name="master" value="#desavir_pedi_Света">
<snap class="info_of_employee">Света</snap>
</label>
</div>
<div class="date">
<div class="section_name">
<snap class="section_text">Выберите дату и время</snap>
</div>
<select id="Polina">
<?php foreach ($q as $key=>$value){
echo '<option>'.$value['date'].'</option>'; //Выводим даты в селект, ну или в другие параметры по желанию
}?>
</select>
<select id="Sveta1">
<?php foreach ($q1 as $key=>$value){ // Где $q1 это данные запроса в mysql по таблице Светы1
echo '<option>'.$value['date'].'</option>'; //Выводим даты в селект, ну или в другие параметры по желанию
}?>
</select>
<select id="Sveta2">
<?php foreach ($q2 as $key=>$value){ // Где $q2 это данные запроса в mysql по таблице Светы2
echo '<option>'.$value['date'].'</option>'; //Выводим даты в селект, ну или в другие параметры по желанию
}?>
</select>
</div>
</div>
<div class="submit_button">
<input type="submit" value="Записаться" class="button_or" name="zapis_button">
</div>
</div>
</form>
И к нему добавляем JS файл, для того, чтобы данные менялись сразу, а не при перезагрузке, как в PHP.
window.onload = function () {
document.getElementById('Polina').hidden = true;
document.getElementById('Sveta1').hidden = true;
document.getElementById('Sveta2').hidden = true;
var masters = document.getElementsByName('master'); // Ищем все поля с именем master
for(let i=0;i<masters.length;i++){
masters[i].addEventListener('change', function () { //Прослушиваем изменения
if (masters[i].checked == true){ // Проверяем выбран ли элемент
if (i == 0){ // 0 У нас Полина, так как в массиве начинается отсчёт с 0. В зависимости от этого показываем нужные поля и скрываем ненужные
document.getElementById('Polina').hidden = false;
document.getElementById('Sveta1').hidden = true;
document.getElementById('Sveta2').hidden = true;
} else if (i == 1){ // 1 Это Света1. В зависимости от этого показываем нужные поля и скрываем ненужные
document.getElementById('Sveta1').hidden = false;
document.getElementById('Polina').hidden = true;
document.getElementById('Sveta2').hidden = true;
} else if (i == 2){ // 2 Это Света2 . В зависимости от этого показываем нужные поля и скрываем ненужные
document.getElementById('Sveta2').hidden = false;
document.getElementById('Polina').hidden = true;
document.getElementById('Sveta1').hidden = true;
}
}
})
}
}
Таким образом, у нас получится быстрая и адаптивная возможность менять данные в зависимости от выбранного мастера.