2

Существует код, который динамически генерирует кнопки в зависимости от количества записей в БД

вроде как календарь

Сам код:

    <div class = "container">
                <?php 
                    foreach ($posts as $value) 
                    {
                        echo
                        "
                        <form method ='POST'>
                            <button class = 'cell' type= 'submit'>".$value['id']." </button>
                            <input name='modalId' type='hidden' value=".$value['id']." />
                        </form>
                        ";
                    } 
                ?>   
    </div>

и при нажатии на любую кнопку вылезает модальное окно( с помощью js), в которое нужно передать значение $value['id'] кнопки, на которую мы нажали, чтобы дальше можно было вывести остальные значения бд, зная айдишник.

Как это правильно реализовать?

Код js для модального окна

let modal = document.getElementsByClassName("modal")['0'];
let btn =  document.getElementsByClassName("cell");
let span = document.getElementsByClassName("close")['0'];

for(var i = 0; i < btn.length; i++){
   btn[i].onclick = function() 
   {
       modal.style.display = "block";

       return false;
   };
}

span.onclick = function ()
{
   modal.style.display = "none";
}

1 ответ 1

1

У Вас есть несколько вариантов реализации:
1. Без использования открытия окна через js (Добавил комментариев для понимания):

<?php

// Вы получаете массив, содержащий массивы данных, в которых есть id и какие-то значения:
$posts = array(
    array('id'=>'1', 'param'=>'bz1'),
    array('id'=>'2', 'param'=>'bz2'),
    array('id'=>'3', 'param'=>'bz3')
)
?>


<div class = "container">
    <?php
    foreach ($posts as $value) { // Для каждого массива в posts Вы выводите id кнопки
        echo
            "
                        <form method ='POST'>
                            <button class = 'cell' type= 'submit'>".$value['id']." </button>
                            <input name='modalId' type='hidden' value=".$value['id']." />
                        </form>
                        ";
    }
    ?>
</div>

<?php
if(isset($_POST['modalId'])){ // Если значение поля modalId введено, то
    $id = $_POST['modalId'];  // Получаем id
    $val = ''; // Создаём переменную
    foreach ($posts as $value){ // Перебираем существующий массив
        if ($value['id'] == $id){ // Если id полученной кнопки совпадает со значением в массиве
            $val = $value['param']; // Записываем параметр значения этого id
        }
    }
    // Выводим значения в модальное окно и отображаем его.
    echo '<div class="modal"><div>Параметр - '.$val.'</div> 
    <div class="close">Закрыть</div>
</div>';
}
?>



<script language="JavaScript">
    let modal = document.getElementsByClassName("modal")['0']; // Получаете первый элемент с классом modal
    let btn =  document.getElementsByClassName("cell"); // Получаете все элементы с классом cell
    let span = document.getElementsByClassName("close")['0']; // Получаете первый элемент с классов close

    span.onclick = function () {
        modal.style.display = "none";
    }
</script>

Если не хочется принципиально использовать для передачи данных php, а хочется на js, то:

<?php

// Вы получаете массив, содержащий массивы данных, в которых есть id и какие-то значения:
$posts = array(
    array('id'=>'1', 'param'=>'bz1'),
    array('id'=>'2', 'param'=>'bz2'),
    array('id'=>'3', 'param'=>'bz3')
)
?>


<div class = "container">
    <?php
    foreach ($posts as $value) { // Для каждого массива в posts Вы выводите id кнопки
        echo
            "
                        <form method ='POST'>
                            <button class = 'cell' type= 'submit'>".$value['id']." </button>
                            <input name='modalId' type='hidden' value=".$value['id']." />
                        </form>
                        ";
    }
    ?>
</div>

<div class="modal">
    <div class="close">Закрыть окно</div>
</div>



<script language="JavaScript">
    let modal = document.getElementsByClassName("modal")['0']; // Получаете первый элемент с классом modal
    let btn =  document.getElementsByClassName("cell"); // Получаете все элементы с классом cell
    let span = document.getElementsByClassName("close")['0']; // Получаем первый элемент с классом close

    for(var i = 0; i < btn.length; i++){ // Для каждого элемента с классом cell
        btn[i].onclick = function(c) { // Отслеживаете нажатие кнопки
            event.preventDefault(); // Отключаем автоматическую передачу данных через форму, чтобы работать в js.
            modal.style.display = "block"; // Показываете модальное окно
            let id = c.toElement.innerHTML; // Получаем id из текста кнопки
            let arr = '<?php print_r(json_encode($posts));?>'; // Передаём в js массив из php заранее кодируя в строку
            arr = JSON.parse(arr); // Парсим json.
            let val = ''; // Объявляем переменную (можно несколько или массив, куда получим значеия из массива по id)
            arr.forEach(function (z) { // Перебираем массив
                if (+z.id == id){ // id из json приводим к числу для сравнения. Если id совпадают, то...
                    val = z.param; // Записываем параметр этого элемента в переменную.
                }
            });
            let Param = document.createElement('div'); // Создаём div
            Param.innerText = val; // Записываем в параметр значение полученное из json
            let g = modal.children; // Получаем все child элемента
            for(let gg=0;gg<g.length;gg++){
                if (g[gg].className != 'close'){ // Удаляем все кроме той, у которой класс close
                    g[gg].parentNode.removeChild(g[gg]);
                }
            }
            modal.appendChild(Param); // Добавляем параметр в него
        };
    }

    span.onclick = function () {
        modal.style.display = "none";
    }
</script>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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