Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.10.2019, 13:40
Интересующийся
Отправить личное сообщение для andrey8501 Посмотреть профиль Найти все сообщения от andrey8501
 
Регистрация: 08.10.2019
Сообщений: 17

Как передать параметр в модальное окно?
Добрый день

Подскажите пожалуйста
хочу на сайте реализовать вместо купить, купить в 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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

andrey8501,
id это уникальный номер!!!
Ответить с цитированием
  #4 (permalink)  
Старый 11.10.2019, 14:24
Интересующийся
Отправить личное сообщение для andrey8501 Посмотреть профиль Найти все сообщения от andrey8501
 
Регистрация: 08.10.2019
Сообщений: 17

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

https://codepen.io/natojezlo/pen/zYYveGB
Ответить с цитированием
  #5 (permalink)  
Старый 11.10.2019, 14:30
Интересующийся
Отправить личное сообщение для andrey8501 Посмотреть профиль Найти все сообщения от andrey8501
 
Регистрация: 08.10.2019
Сообщений: 17

Спасибо. разобрался
Ответить с цитированием
  #6 (permalink)  
Старый 11.10.2019, 14:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

andrey8501,
для примера я добавил поле [name="article"] либо уберите строку 14, либо добавьте это поле.
для вас строка 13, раскомментируйте эту строку.
Ответить с цитированием
  #7 (permalink)  
Старый 11.10.2019, 20:44
Интересующийся
Отправить личное сообщение для andrey8501 Посмотреть профиль Найти все сообщения от andrey8501
 
Регистрация: 08.10.2019
Сообщений: 17

Спасибо большое
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как передать параметр при загрузке файла? iceworm jQuery 1 27.04.2014 09:38
Есть Ext.grid.Panel. Как в store передать параметр? tigeralhimik ExtJS 7 29.03.2012 20:38
Как вывести возвращаемое функцией значение не через модальное окно? Bandicoot Общие вопросы Javascript 1 10.03.2011 18:34
Как передать параметр id pegass jQuery 2 16.02.2011 08:43
Как передать параметр? greatilya Events/DOM/Window 10 15.06.2010 11:50