Как передать html текст в значение value поля input?

Question

[Иван Медведев]

Есть некая карточка товара (код ниже)

<div class="card">
  <h3>по 1.000 лайков</h3>
  <p>на 5 последних фото</p>
  <p class="price">190 грн <span>(379 грн)</span></p>
  <p><strong>В ПОДАРОК ИДЕТ:<!-- <br>Курс "Инстаграм на миллион" --></br>5000 Пресетов Lightroom</strong></p>
  <p>100% безопасность<br>Поддержка 24/7<br>Гарантия результата</p>
  <button class="btn btn-bye" data-toggle="modal" data-target="#modal">Заказать в 1 клик</button>
</div>

Необходимо передать текст тега h3 и стоимость (190) в форму, которая открывается в модальном окне (код ниже), для дальнейшей отправки этих данных на почту.

<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Услуга - 2.000 подписчиков</h5>
              <small>+ по 100 ЛАЙКОВ на 5 последних фото</small>
            </div>
            <div class="modal-body">
                <form action="modal.php" method="POST">
                    <div class="form-group">
                      <input type="taxt" name="insta" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Введите ссылку на свой Инстаграм аккаунт" required>
                    </div>
                    <div class="form-group">
                      <small id="emailHelp" class="form-text text-muted">Введите свой адрес почты, чтобы получить курс.</small>
                      <input type="email" name="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Введите email" required>
                    </div>
                    <div class="form-group form-check">
                      <input type="checkbox" class="form-check-input" id="exampleCheck1" required checked>
                      <label class="form-check-label" for="exampleCheck1"><p>Даю согласие на обработку персональных данных. Ознакомлен с тарифами <a href="policy.html" target="_blank">Политикой конфиденциальности</a> и условиями <a href="oferta.html" target="_blank">Договора оферты</a></p></label>
                    </div>
                    <button type="submit" class="btn btn-submit"">Перейти к оплате</button>
                </form>
            </div>
          </div>
        </div>
    </div>

На сайте много таких карточек товара и делать для каждой из них отдельное модальное окно, я думаю, неправильно.

Подозреваю, что это делается через скрытые инпуты с типом hidden. Но, как взять это сделать - не знаю. Подскажите пожалуйста.

Answer 1

[Roman Khegay]

Вызывайте модальное окно бутстрапа не через data-атрибуты, а через javascript и передавайте туда заголовок и стоимость:

<button onclick="openModal(headline, price)">Открыть модальное окно</button>

function openModal(headline, price) {
    var modal = $('#myModal');
    // нужно добавить уникальный класс к h3 и .price
    $(modal).find('.h3-modal__title').text(headline);
    $(modal).find('.modal__price').text(price);
    $(modal).modal('show')
}

Comments

[Иван Медведев]

Спасибо! А что в модальном написать и где, чтобы туда передались значения? Что-то в инпуты? Я , к сожалению, не знаком пока с js

[Roman Khegay]

Иван Медведев, JS сам найдет нужный элемент через .find() и потом изменить внутреннюю часть текста через .text()

[Иван Медведев]

Roman Khegay, это я понимаю, что найдет. А как оно передаст это значение в нужный инпут? Мне ведь надо, чтобы эти значения передавались дальше на почту и в платежку по API.

[Roman Khegay]

Иван Медведев, тогда вот такой код:
В форме добавьте два инпута:

<input type="hidden" name="headline" id="form-headline-input">
<input type="hidden" name="price" id="form-price-input">

function openModal(headline, price) {
    var modal = $('#myModal');
    // нужно добавить уникальный класс к h3 и .price
    $(modal).find('.h3-modal__title').text(headline);
    $(modal).find('.modal__price').text(price);
    $(modal).find('#form-headline-input').val(headline);
    $(modal).find('#form-price-input').val(price);
    $(modal).modal('show')
}

[Иван Медведев]

Roman Khegay, спасибо большое!