Как подставить ссылку для iframe, используя данные полей ввода html?

Question

[Korgmen]

На странице есть поля ввода и кнопка для перехода к выбору более развернутой сортировки. Открывается сортировка во всплывающем окне, внутри iframe тега
Как взять данные из полей ввода и встроить в src айфрейма, чтобы по нажатию на кнопку всплывающего окна(переходу к развернутой сортировке), данные ранее заполненных полей остались в таких же полях развернутой сортировки.
Эта развернутая сортировки генерируется по ссылке, но на отдельной странице. Раньше было реализовано на отдельной странице, через банальный onclick и document.location.href, просто данные из инпута подставлялись в ссылку.
Пробовал вот так:

$(function(){
                        var webq = "https://ссылка";
                        var webw = +document.getElementById('id поля из которого вытаскивается значение').value;

                      $('#id блока с фреймом iframe')[0].src= webq + webw;
});

но в таком случаем просто подставляется первое значение с инпута, в независимости от выбранного тобой. Грубо говоря, значение инпута не вытаскивается, при открытии всплывающего окна

Comments

[Alex]

Покажиье работающий пример кода.

[Korgmen]

Александр Козак,

//инпуты и кнопка открытия расширенной сортировки
<div class="container">
                  //инпуты. Один из них ниже, как пример
                    <div class="col">
                      <p class="modal_up_input_p">Кол-во человек:</p>
                      <input id="Adult" type="number" value="1" min="1" max="6" step="1"/>
                    </div>
                  <div class="row modal_last_row" style="margin-bottom: 5px;">
                    <div class="col">
                      <button type="button" id="b_modal" onclick="$('#modal_web').modal('show'); $('#sel_modal').modal('hide');" class="btn btn-outline-secondary btn_round">Подобрать услугу</button>
                  </div>
                </div>  
</div>

//всплывающее окно с фреймом
<div class="modal"  role="dialog" id="modal_web" style="position: absolute; bottom: auto;">
            <div class="modal-dialog  modal-lg" role="document" style="max-width: 90%;">
              <div class="modal-content">
               <div class="modal-header">
                  <p class="modal-title" style="font-size: 25px;">Подбор услуги
                  </p>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div id="divWeb" class="modal-body">
                  <iframe class ="mt-frame" scrolling="yes" width="100%" height="700px"></iframe>
                </div>
                <div class="modal-footer">
                   <button type="button" class=" btn btn-warning sg_button" data-dismiss="modal">Закрыть</button>
                </div>
              </div>
            </div>
        </div>

$(function(){
                        var webq = "https://ссылка";
                        var webw = +document.getElementById('Adult').value;

                      $('#divWeb iframe')[0].src= webq + webw;
});

Answer 1

[Alex]

Атрибут ID у элементов должен быть уникален. В вашем случае нужно изменить способ выбора правильного инпута. Использовать не ИД а классы