如何使用单选按钮分配网址参数值并在iframe中加载 [英] How to assign url parameter value and load in iframe using radio buttons

问题描述

使用选择/选项标签可以正常工作，但在使用单选按钮时无法成功.

Using select/option tag works fine but no success when I use radio buttons.

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>

我想使用以下格式，但结果是未定义" ...

I want to use below format but the result is "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

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

推荐答案

使用formdata和get方法来获取表单的值，如下所示:

Use formdata together with the get method to get the form's value like this:

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>

这篇关于如何使用单选按钮分配网址参数值并在iframe中加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！