javascript - 将单选按钮值传递到表单中 onClick 的 URL

Question

我需要一些帮助才能使以下表单与单选按钮值一起使用。我希望用户选择一个类别（使用select下拉菜单），然后选择一个大小（使用单选按钮），并在单击按钮时将类别和大小的值都传递到 URL 中。所以它会带用户到http://thewebsiteaddress.com/category/size.

除了单选按钮值之外，我在下面的基本表单工作正常 - 单击按钮时，它在 URL 中一直显示为“未定义”。我对此很陌生，如果能帮助我走上正确的道路或向我展示执行此任务的更好方法，我将不胜感激。

感谢您在这里的任何指导。

<script type="text/javascript">
function combineSelections(cat,sizes){
location.href='http://thewebsiteaddress.com/product-category/'+cat.value+'/'+sizes.value;
}
</script>
<form name="searchbysize">
<select name="categories">
<option value="">Select Product Category</option>
<option value="category-slug">Category Name</option>
</select>
<input type="radio" id="very-small" name="size" value="very-small" />
<label for="very-small">Very Small </label>

<input type="radio" name="size" value="small" />
<label for="small">Small </label>

<input value="Search for Products" onclick="combineSelections(categories,size)"
type="button"></form>

Answer 1

添加id="categories"到选择和id="size"单选按钮，然后使用document.getElementById()获取单选按钮的值并选择。

function combineSelections()
{
   var size = document.getElementById('size').value;
   var category = document.getElementById('categories').value;
   location.href='http://thewebsiteaddress.com/product-category/'+category+'/'+size;
}