Передать значение input radio в другой input через js?

Question

[Coreproseo]

Есть калькулятор с такими полями: input text передают значения нормально, а input radio передают только значение value первого элемента. как передать значение выбранного элемента radio.

<div class="flat-item">
                        <div class="flat-item-title">
                           <h3 class="calc-h4">Трубы</h3>
                        </div>
                        <div class="flat-item-box">
                           <button class="decrease" type="button">-</button>
                           <input class="calc-number" type="text" name="field5" id="field5" value="2"/>
                           <button class="increase" type="button">+</button>
                        </div>
                     </div>
                     <div class="flat-item">
                        <div class="flat-item-title">
                           <h3 class="calc-h4">Лампы</h3>
                        </div>
                        <div class="flat-item-box">
                           <button class="decrease" type="button">-</button>
                           <input class="calc-number" type="text" name="field6" id="field6" value="5"/>
                           <button class="increase" type="button">+</button>
                        </div>
                     </div>

                  </div>

                  <div class="calculator-faktura">
                     <div class="flat-item">
                        <div class="flat-item-title">
                           <h3>Материал</h3>
                        </div>
                        <div class="flat-item-box">
                           <div class="box-calc"><input class="calc-radio" type="radio" id="field7" name="material" value="ПВХ"><div>ПВХ</div></div>
                           <div class="box-calc"><input class="calc-radio" type="radio" id="field7" name="material" value="Ткань"><div>Ткань</div></div>
                        </div>
                     </div>

Код JS

$('.popup-link').on('click', function () {
      $('.popup').addClass('open');
      $('#data1').val($('#field1').val());
      $('#data2').val($('#field2').val());
      $('#data3').val($('#field3').val());
      $('#data4').val($('#field4').val());
      $('#data5').val($('#field5').val());
      $('#data6').val($('#field6').val());
      $('#data7').val($('#field7').val());
      
   });
   $('.close-popup').on('click', function () {
      $('.popup').removeClass('open');
   });

});

Answer 1

[Wispik]

Во-первых, id должен быть уникальным у каждого элемента
Во-вторых, в случае радио, их лучше искать по имени, на jquery вроде так будет:
$('input[name="material"]:checked').val();

Comments

[Coreproseo]

Я не особо знаю jquery,
Так мы получаем значение из радио:
$('input[name="material"]:checked').val();

А как мне его поместить в #data7 ???

Буду очень благодарен

[Wispik]

Coreproseo,

$('#data7').val($('input[name="material"]:checked').val())

[Coreproseo]

Wispik,
Огромное спасибо. Выручил

[Coreproseo]

Может еще выручите, значения передаются, но теперь они не отправляются почему-то

Вот код:

<form class="ajax-contact-form" id="add_feedback">
						<input type="text" required placeholder="Имя*" class="required" name="calc-name" id="calc-name">
						<input type="text" required placeholder="Телефон*" class="required" name="calc-phone" id="calc-phone">
                  <div class="note"></div>
						<p>
                     Вы указали следующие данные:
                  </p>
                  <div class="popup-list">
                     Общая площадь, м²: <input type="text" class="calc-data" name="data1" id="data1">
                  </div>
                  <div class="popup-list">
                     Кол-во потолков, шт: <input type="text" class="calc-data" name="data2" id="data2">
                  </div>
                  <div class="popup-list">
                  Высота, м: <input type="text" class="calc-data" name="data3" id="data3">
                  </div>
                  <div class="popup-list">
                  Углы: <input type="text" class="calc-data" name="data4" id="data4">
                  </div>
                  <div class="popup-list">
                  Трубы: <input type="text" class="calc-data" name="data5" id="data5">
                  </div>
                  <div class="popup-list">
                  Лампы: <input type="text" class="calc-data" name="data6" id="data6">
                  </div>
                  <div class="popup-list">
                  Материал: <input type="text" class="calc-data" name="material" id="data7">
                  </div>
                
                  
						<input class="order-btn" type="submit" id="submit-feedback" value="Отправить сообщение">
					</form>

$body    = "Имя: $calc_name \nТелефон: $calc_phone \n\n";
		$body 	= $body."\n Данные заявки: \n Общая площадь, м²: $data1";
		$body 	= $body."\n Кол-во потолков, шт: $data2";
		$body 	= $body."\n Высота, м: $data3";
		$body 	= $body."\n Углы: $data4";
		$body 	= $body."\n Трубы: $data5";
		$body 	= $body."\n Лампы: $data6";
		$body 	= $body."\n Материал: $data7";
		$body 	= $body."\n Цвет: $data8";
		$body 	= $body."\n Фактура: $data9";
		$headers = 'From: [e-mail] <' . $email_to . '>' . "\r\n" . 'Reply-To: ' . $email_to;