Форум

andrey8501 · #1 (**permalink**) 11.10.2019, 13:40

Добрый день

Подскажите пожалуйста
хочу на сайте реализовать вместо купить, купить в 1 клик
будет открываться модальное окно с формой имя, телефон

на сайте идет цикл с товарами, напр. 30шт на странице
шаблон формирования самого блока внутри цикла

<div>
  <div class="pr-name"><? echo = $name; ?></div>
  <div class="pr-img"><? echo = $img; ?></div>
  <div class="pr-price"><? echo = $price; ?></div>
  <a class="button" id="modal">Купить в 1 клик</a>
</div>

в нем переменными выводятся
название, картинка, цена

как на js сделать, что бы нажимая напр. на 3й или 10й товар на кнопку купить в 1 клик, в input type="hidden", в модальном окне подставилось значение именно этого товара?
Сейчас так, подставляется значение 1го товара, на какой не нажми

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

<div id="#modal">
  <form>
    <input type="hidden" name="<? echo = $name; ?>"/>
    <input type="text" name="Имя"/>
    <input type="text" name="Телефон"/>
  </form>
</div>

Спасибо

рони · #2 (**permalink**) 11.10.2019, 14:00

andrey8501,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script>
   addEventListener('click', ({target}) => {
   if(target.closest('.button')) {
      const parent = target.closest('.item'),
            div = parent.querySelector('.pr-name'),
            text = div.textContent;
            //document.querySelector('#modal [type="hidden"]').value = text;
         document.querySelector('#modal [name="article"]').value = text;
   }

   })
  </script>
</head>

<body>
<div class="item">
  <div class="pr-name">товар 1</div>
  <div class="pr-img"><? echo = $img; ?></div>
  <div class="pr-price"><? echo = $price; ?></div>
  <button class="button" type="button" >Купить в 1 клик</button>
</div>
<div class="item">
  <div class="pr-name">товар 2</div>
  <div class="pr-img"><? echo = $img; ?></div>
  <div class="pr-price"><? echo = $price; ?></div>
  <button class="button" type="button" >Купить в 1 клик</button>
</div>

<div class="item">
  <div class="pr-name">товар 3</div>
  <div class="pr-img"><? echo = $img; ?></div>
  <div class="pr-price"><? echo = $price; ?></div>
  <button class="button" type="button" >Купить в 1 клик</button>
</div>


<div id="modal">
  <form>
    <input type="text" name="article"/>
    <input type="text" name="Имя"/>
    <input type="text" name="Телефон"/>
  </form>
</div>

</body>
</html>

рони · #3 (**permalink**) 11.10.2019, 14:01

andrey8501,
id это уникальный номер!!!

andrey8501 · #4 (**permalink**) 11.10.2019, 14:24

Благодарю
что то у меня оно с модальным окном никак не хочет работать

https://codepen.io/natojezlo/pen/zYYveGB

andrey8501 · #5 (**permalink**) 11.10.2019, 14:30

Спасибо. разобрался

рони · #6 (**permalink**) 11.10.2019, 14:33

andrey8501,
для примера я добавил поле [name="article"] либо уберите строку 14, либо добавьте это поле.
для вас строка 13, раскомментируйте эту строку.

andrey8501 · #7 (**permalink**) 11.10.2019, 20:44

Спасибо большое

Форум

Справочник

Discord чат

Курсы javascript