How can I send data from whatever div the button is clicked in?

  • 0
    I ask the help of experts. There are several divs with the same buttons (values ​​for fields in divs are taken from the base using TL) and a modal window (one for all buttons). When you click on any of these buttons, open a modal window and add a value (number of kcal elem.calories) from the field a (where it came from the base using TL) to the hidden input (calor) from the div in which the button was clicked .

    Piece of 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>


    a piece of 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>


    modal
    <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>
    JavaScript Iris Craig, Aug 21, 2020

  • 3 Answers
  • 0
    It’s strange that you didn’t figure it out yourself, it’s like you know everything you need to do to do this.

    You have to hang the 'onclick' event handler (addEventListener ('click', function)) on the block where these divas are located.

    Next, you check in the handler function if (event.target.tagName == 'DIV') then

    event.target.getElementsByTagName ('input') [0] .value - this will be the value you want to receive.

    To cut off the rest of the divas on which a click can be triggered, then add a separate class or data- * attribute to the necessary divs and check the handler not by divs but by elements with this attribute or with this class, just do not forget that when you are looking for elements by class or attribute , this method will return an array.

    And yes, do not forget to put stopPropagation () in the handler so that the event does not fire further on the parent elements.
    Anonymous

  • 0
    Try to do it through the OnClick event
    Joseph Meyer

  • 0
    I solved it this way:

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

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!