mediol-name
@mediol-name
Developer

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

Есть некая карточка товара (код ниже)
<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. Но, как взять это сделать - не знаю. Подскажите пожалуйста.
  • Вопрос задан
  • 70 просмотров
Решения вопроса 1
khegay
@khegay
Founder, NNDB Kazakhstan
Вызывайте модальное окно бутстрапа не через 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')
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы