Как отправить данные из того div, в котором нажата кнопка?

Question

[Don_Conteo]

Прошу помощи знатоков. Есть несколько div с одинаковыми кнопками (значения для полей в дивах берутся из базы с помощью ТЛ) и модальное окно (одно для всех кнопок). Необходимо при нажатии на любую из этих кнопок открыть модальное окно и его в скрытый input (calor) добавить значение (количество ккал elem.calories) из поля а(куда оно поступило из базы при помощи ТЛ) из того div, в котором была нажата кнопка.

Кусок HTML

<td id="cont" valign="top">
                <div id="foodNuts">
                    <div class="foodN">
                        <img th:src="@{__${#httpServletRequest.scheme + '://' + #httpServletRequest.serverName + ':' + #httpServletRequest.serverPort}__/images/peanut.jpg}">
                        <p th:each="elem : ${food[0]}" th:text="${elem.name}"></p>
                        <a>Ккал на 100 грамм:</a>
                        <strong><a th:each="elem : ${food[0]}" th:text="${elem.calories}"></a></strong>
                        <input type="button" id="add" value="+" class="add">
                    </div>
                    <div class="foodN">
                        <img th:src="@{__${#httpServletRequest.scheme + '://' + #httpServletRequest.serverName + ':' + #httpServletRequest.serverPort}__/images/brasilNut.jpg}">
                        <p th:each="elem : ${food[1]}" th:text="${elem.name}"></p>
                        <a>Ккал на 100 грамм:</a>
                        <strong><a th:each="elem : ${food[1]}" th:text="${elem.calories}"></a></strong>
                        <input type="button" value="+" class="add">
                    </div>
                    <div class="foodN">
                        <img th:src="@{__${#httpServletRequest.scheme + '://' + #httpServletRequest.serverName + ':' + #httpServletRequest.serverPort}__/images/mindal.jpg}">
                        <p th:each="elem : ${food[2]}" th:text="${elem.name}"></p>
                        <a>Ккал на 100 грамм:</a>
                        <strong><a th:each="elem : ${food[2]}" th:text="${elem.calories}"></a></strong>
                        <input type="button" value="+" class="add">
                    </div>
                 </div>
            </td>

кусок JS

<script>
        $(function() {
            $(".add").click(function () {
                document.getElementById("modal-background").style.display = "block";
                let block = this.closest('.foodN');
                });

            $("#butClose").click(function () {
                document.getElementById("modal-background").style.display = "none";
                });

            $(document).mouseup(function (e){
                var modalctr = $("#modal-background");
                var modal = $(".popup");
                if (!modal.is(e.target) && modal.has(e.target).length === 0){
                modalctr.hide();
                }
            });
        });

        let nuts = document.getElementById('nutsPage'),
            mushrooms = document.getElementById('mushroomsPage')

        nuts.addEventListener( 'click', function( e ) {
            document.getElementById("foodMushrooms").style.display = "none";
            document.getElementById("foodNuts").style.display = "block";
        });

        mushrooms.addEventListener( 'click', function( e ) {
            document.getElementById("foodNuts").style.display = "none";
            document.getElementById("foodMushrooms").style.display = "block";
        });
    </script>

модальное окно

<div class="overlay" id="modal-background">
        <div class="flex-popup" id = flex>
            <div class="popup" id="popup">
                <input type="hidden" name="calor" id="calor">
                <input class="input" placeholder="Введите количество в граммах" id="quantity" type="text" width="50px" background-color="white">
                <button id="addToRes" class="addBtn" title="Добавить">Добавить</button>
                <button id="butClose" class="closeBtn" title="Отмена">Закрыть</button>
            </div>
        </div>
    </div>

Comments

[Lord_Dantes]

Код не читал, с вопроса это при нажатии определяем родителя и выбираем потом нужный контент на js :)

[Don_Conteo]

Lord_Dantes, так родителя я нашел. )) Вопрос именно в том, как именно мне бы дернуть значение из поля, которое туда поступило с ТЛ из базы ))

[Алексей Рудьковский]

Don_Conteo, найти дочерний элемент и взять нужный атрибут или содержимое? :-) У Вас есть код:
let block = this.closest('.foodN');
, найдите дочерние с помощью find:

let block = this.closest('.foodN');
block.find(' .... ').

[Don_Conteo]

Алексей Рудьковский, нижайше прошу прощения, но я пока очень плохо понимаю JS. Полночи просидел, так и не нашел инфы, что именно мне написать в find и как потом это закинуть в модальное окно. Я был бы премного благодарен, если бы вы подсказали решение несколько более развернуто ))

[Lord_Dantes]

Don_Conteo, любой пример с find находите и ставите потом свои данные. Не понимаете, попробуйте прочитать и понять что это) Далее получаете данные в переменную и её позже вставляете в ваше модальное окно. Также через JS.

Свою работу я предлагаю вам разбить на маленькие шаги и работать по ним)

[Don_Conteo]

Спасибо всем за подсказки! Решил вот таким способом:

var parent = $(e.currentTarget).parent();
        if(parent){
            var results = parent.find('a');
            var c = $(results[1]).html();
            document.getElementById("calor").value = c;
        };

Answer 1

[Максим]

Странно, что ты сам не догадался, вроде ты знаешь все то, что нужно чтобы это сделать.
Ты должен повесить обработчик события 'onclick' (addEventListener('click', function)) на тот блок где лежат эти дивы.
Далее ты проверяешь в функции обработчике, если (event.target.tagName == 'DIV') то
event.target.getElementsByTagName('input')[0].value - это и будет значение которое ты хочешь получить.
Чтобы отсечь остальные дивы по котором может сработать клик, добавь тогда нужным дивам отдельный класс или атрибут data-* и проверяй обработчик не по дивам а по элементам с этим атрибутом или с этим классом, только не забывай, что когда ищешь элементы по классу или атрибуту, этот метод будет возвращать массив.
И да, в обработчик не забудь поставить stopPropagation(), чтобы событие не срабатывало дальше на родительских элементах.

Comments

[Don_Conteo]

Спасибо! У меня остался один конкретный вопрос: как я могу получить значение из такой строчки:

<strong><a name="caloru" th:each="elem : ${food[0]}" th:text="${elem.calories}"></a></strong>

Как сделать это с обычными инпутами, я понимаю, оно работает. А вот отсюда значение как сдернуть, не понимаю. Должно прийти целое число.

[Максим]

Don_Conteo, Мне не знаком данный синтаксис. Я работаю с чистым джаваскриптом и даже jquery не использую.
Если мой предыдущий ответ помог, оцени пожалуйста ответ и отметь решением.

Answer 2

[Алексей]

Попробуй через событие OnClick это сделать

Answer 3

[Don_Conteo]

Решил вот таким способом:

var parent = $(e.currentTarget).parent();
        if(parent){
            var results = parent.find('a');
            var c = $(results[1]).html();
            document.getElementById("calor").value = c;
        };