1

Доброй ночи подскажите пожалуйста как с помощью js передать значение при клике.

Есть такая конструкция:

<label class="booking__variant selected">
    <input type="hidden" name="tour_id" value="1">
    <input type="hidden" name="variant_id" value="1">
    <input type="radio" name="booking">
    <span class="radio"></span>
    <div class="price-img">
       <img src="" alt="" class="img-fluid">
    </div>
    <div class="price-info">
       <p class="cost-tour">8 <span>RUB</span></p>
        <p>Praesentium ipsa exercitationem qui natus et et...</p>
    </div>
</label>

Как при клики на label, передать значения в форму, которая расположена далее на сайте.

<form action="" method="post" class="form-booking" autocomplete="off">
<input type="text" name="tour_id" value="">
<input type="text" name="variant_id" value="">
</form>

Нужно чтобы значения value из input с именем tour_id где label попало в форму в value input tour_id, ну и из variant_id в variant_id в форме.

Также прошу заметить что label может быть как 1, так и 3 или более, со своими значениями.

Заранее спасибо.

1 ответ 1

1

document.querySelectorAll('label.booking__variant').forEach(lbl =>
  lbl.addEventListener('click', function(e) {
    var form = document.querySelector('.form-booking');
    form.querySelector('[name="tour_id"]').value = this.querySelector('[name="tour_id"]').value;
    form.querySelector('[name="variant_id"]').value = this.querySelector('[name="variant_id"]').value;
  })
);
<label class="booking__variant selected">
    <input type="hidden" name="tour_id" value="1">
    <input type="hidden" name="variant_id" value="1">
    <input type="radio" name="booking">
    <span class="radio"></span>
    <div class="price-info">
       <p class="cost-tour">8 <span>RUB</span></p>
        <p>Praesentium ipsa exercitationem qui natus et et...</p>
    </div>
</label>
<label class="booking__variant selected">
    <input type="hidden" name="tour_id" value="2">
    <input type="hidden" name="variant_id" value="2">
    <input type="radio" name="booking">
    <span class="radio"></span>
    <div class="price-info">
       <p class="cost-tour">10 <span>RUB</span></p>
        <p>Praesentium ipsa exercitationem qui natus et et...</p>
    </div>
</label>

Form:
<form action="" method="post" class="form-booking" autocomplete="off">
  <input type="text" name="tour_id" value="">
  <input type="text" name="variant_id" value="">
</form>

2
  • Все работает отлично, спасибо!)
    – dim97
    Commented 7 окт. 2020 в 13:39
  • @dim97 Пожалуйста. Успехов!
    – user176262
    Commented 7 окт. 2020 в 13:40

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.