Как передать в input разные data при открытии popup?

Question

На html несколько товаров:

<div class="order_button">
    <a href="" class="open_popup" data-product="Товар-1">заказать</a>
</div>
<div class="order_button">
    <a href="" class="open_popup" data-product="Товар-2">заказать</a>
</div>

При клике на ссылку "заказать" открывается модальное окно:

<div class="popup_bg" id="cart">    
    <form class="popup" action="" method="POST">
        <a href="#products" class="close-popup">&#10006</a>
        <p>Оформить заявку</p>
        <input id="product" type="text" class="form-text" value="" readonly>
        <button type="submit">заказать</button>
    </form>
</div>

input отметил как readonly, с целью автоматического присвоения данных с data-product. К сожалению, при открытии модального окна, данные в input остаются пустыми. Сам код по открытию модального окна следующий:

let popupBg = document.querySelector('.popup_bg');
let popup = document.querySelector('.popup');
let openPopupButtons = document.querySelectorAll('.open_popup');
let closePopupButton = document.querySelector('.close-popup');


openPopupButtons.forEach((button) => {
    button.addEventListener('click', (e) => {
        e.preventDefault();
        popupBg.classList.add('active');
        popup.classList.add('active');
        let product = $(this).data('product');
        $('#product').val(product);
        return false;
    })
});

closePopupButton.addEventListener('click', () => {
    popupBg.classList.remove('active');
    popup.classList.remove('active');
});

document.addEventListener('click', (e) => {
    if(e.target === popupBg) {
        popupBg.classList.remove('active');
        popup.classList.remove('active');
    }
});

Кто сможет помочь с решением данной задачи? Буду благодарен!

Answer 1

Проблема в том, что используете стрелочную функцию button.addEventListener('click', (e) => {... у нее this ссылается на Window.

Если используете стрелочную функцию тогда используйте e.target. Если нужен this тогда прописываете function (e)....

PS: 29.06.2022

Вот пример реализации с this - стрелочная функция

let popupBg = document.querySelector('.popup_bg');
let popup = document.querySelector('.popup');
let openPopupButtons = document.querySelectorAll('.open_popup');
let closePopupButton = document.querySelector('.close-popup');


openPopupButtons.forEach((button) => {
  button.addEventListener('click', (e) => {
    e.preventDefault();
    popupBg.classList.add('active');
    popup.classList.add('active');
    let product = $(e.target).data('product');
    $('#product').val(product);
    return false;
  })
});

closePopupButton.addEventListener('click', () => {
  popupBg.classList.remove('active');
  popup.classList.remove('active');
});

document.addEventListener('click', (e) => {
  if (e.target === popupBg) {
    popupBg.classList.remove('active');
    popup.classList.remove('active');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="order_button">
  <a href="" class="open_popup" data-product="Товар-1">заказать</a>
</div>
<div class="order_button">
  <a href="" class="open_popup" data-product="Товар-2">заказать</a>
</div>

<div class="popup_bg" id="cart">
  <form class="popup" action="" method="POST">
    <a href="#products" class="close-popup">&#10006</a>
    <p>Оформить заявку</p>
    <input id="product" type="text" class="form-text" value="" readonly>
    <button type="submit">заказать</button>
  </form>
</div>

Вот пример реализации с this - в function(e){.....}

let popupBg = document.querySelector('.popup_bg');
let popup = document.querySelector('.popup');
let openPopupButtons = document.querySelectorAll('.open_popup');
let closePopupButton = document.querySelector('.close-popup');


openPopupButtons.forEach((button) => {
  button.addEventListener('click', function(e) {
    e.preventDefault();
    popupBg.classList.add('active');
    popup.classList.add('active');
    let product = $(this).data('product');
    $('#product').val(product);
    return false;
  })
});

closePopupButton.addEventListener('click', () => {
  popupBg.classList.remove('active');
  popup.classList.remove('active');
});

document.addEventListener('click', (e) => {
  if (e.target === popupBg) {
    popupBg.classList.remove('active');
    popup.classList.remove('active');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="order_button">
  <a href="" class="open_popup" data-product="Товар-1">заказать</a>
</div>
<div class="order_button">
  <a href="" class="open_popup" data-product="Товар-2">заказать</a>
</div>

<div class="popup_bg" id="cart">
  <form class="popup" action="" method="POST">
    <a href="#products" class="close-popup">&#10006</a>
    <p>Оформить заявку</p>
    <input id="product" type="text" class="form-text" value="" readonly>
    <button type="submit">заказать</button>
  </form>
</div>

БЛОГ НА HUSL

Как передать в input разные data при открытии popup?

Ответы (1 шт):