1

Имеется форма для записи. На ней присутствует выбор мастера (обслуживающего персонала), форма с датами и временем, поля с вводом информации о заказчике и кнопка ЗАПИСАТЬСЯ. Располагается это все на одной странице в одном теге 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>

4
  • Добавьте часть Вашей разметки html и напишите название полей в БД.
    – Denis640Kb
    Commented 15 февр. 2020 в 21:56
  • Я внес нужные изменения.
    – Kirzzz
    Commented 15 февр. 2020 в 22:38
  • Попытался использовать вот такой код, но почему то ничего не работает <?php if($_POST['master'] == '#desavir_Полина') { echo '#desavir_Полина'; } else if($_POST['master'] == '#desavir_Света') { echo '#desavir_Света'; } else { echo '#desavir_pedi_Света'; } ?>
    – Kirzzz
    Commented 16 февр. 2020 в 1:39
  • Совсем забыл, извиняюсь. 5 Минут. Сейчас напишу какие есть варианты реализации на мой взгляд.
    – Denis640Kb
    Commented 16 февр. 2020 в 1:42

1 ответ 1

4

Прежде всего, необходимо сделать запрос БД для получения массивов возможных периодов времени. Реализаций здесь может быть несколько.
Я бы советовал сделать запрос подключения к БД в отдельном файле и подключить его в основной используя 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;
                        }
                    }
                })
            }
        }

Таким образом, у нас получится быстрая и адаптивная возможность менять данные в зависимости от выбранного мастера.

9
  • 1
    ни чё себе тебе скучно ...:)) Commented 16 февр. 2020 в 2:35
  • @MaximLensky Аахахаха и не говорите )
    – Denis640Kb
    Commented 16 февр. 2020 в 2:36
  • Я как то немного обалдел даже... Огромнейшее спасибо, просто занимаюсь веб программированием от силы недели две, не знаю чтоб без вас делал.
    – Kirzzz
    Commented 16 февр. 2020 в 2:47
  • @Kirzzz Да не за что ) Все мы с чего-то начинаем. Это нормально. Если будут вопросы по скрипту - смело обращайтесь )
    – Denis640Kb
    Commented 16 февр. 2020 в 2:51
  • @Denis640Kb не знал как еще обратиться, поэтому оставляю комментарий. JavaScript работает отлично(делается вывод только из одной БД как и планировалось). Но вывод на странице я получаю такого формата '.$value['date'].' . Сначала грешил на то, что соединения с БД нет, но как выяснилось с ним все нормально, как и с названием полей. Поэтому даже и предположить не могу почему такой вывод
    – Kirzzz
    Commented 16 февр. 2020 в 17:19

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.