Как назначить значение параметра url и загрузить его в iframe с помощью переключателей

Question

Использование тега select / option работает нормально, но безуспешно при использовании переключателей.

function xxx(){
 var base_url = 'https://example.com/?test=';
 var select_value = document.getElementById('myid').value;
 var target_url = base_url + select_value;
 var ifr = document.getElementById('myiframe');
 ifr.src = target_url;
 return false;
}

    <form>
      <select id="myid" onchange="xxx();">
        <option value="VALUE1">Featured</option>
        <option value="VALUE2">Hey</option>
        <option value="VALUE3">Wish</option>
      </select>
    </form>
<iframe src="" id="myiframe" width="460" height="300"></iframe>

Я хочу использовать формат ниже, но результат "undefined" ...

<form id="myid" onchange="xxx();">
  <input type="radio" name="name1" value="VALUE1"> featured<br>
  <input type="radio" name="name1" value="VALUE2"> hey<br>
  <input type="radio" name="name1" value="VALUE3"> wish
</form>

Я получаю

https://example.com/?test=UNDEFINED

вместо

https://example.com/?test=VALUE1 или VALUE2 или VALUE3

Answer 1

Используйте formdata вместе с методом get, чтобы получить значение формы следующим образом:

function xxx(){
 let data = new FormData(document.querySelector('form'))
 var base_url = 'https://example.com/?test=';
 var target_url = base_url + data.get('name1');
 var ifr = document.getElementById('myiframe');
 console.log(target_url);
 ifr.src = target_url;
 return false;
}

 <form id="myid" onchange="xxx();">
  <input type="radio" name="name1" value="VALUE1"> featured<br>
  <input type="radio" name="name1" value="VALUE2"> hey<br>
  <input type="radio" name="name1" value="VALUE3"> wish
</form>
<iframe src="" id="myiframe" width="460" height="300"></iframe>

Answer 2

Я не ПРО в JavaScript, но думаю, что он работает

function xxx(){
 var base_url = 'https://example.com/?test=';
 var select_value = document.getElementById('myid').value;
 var target_url = base_url + select_value;
 var ifr = document.getElementById('myiframe');
 ifr.src = target_url;
 return false;
}

<form>
      <select id="myid" onchange="xxx();">
        <option value="VALUE1">Featured</option>
        <option value="VALUE2">Hey</option>
        <option value="VALUE3">Wish</option>
      </select>
      
    </form>
    
    <form>
    <input type="radio" id="myid" onchange="xxx();" name="value" value="value1">
<label for="value1">Featured</label><br>
<input type="radio" id="myid" onchange="xxx();" name="value" value="value2">
<label for="value2">Hey</label><br>
<input type="radio" id="myid" onchange="xxx();" name="value" value="value3">
<label for="value3">Wish</label></form>


<iframe src="" id="myiframe" width="460" height="300"></iframe>