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

Question

我需要一些帮助才能使以下表单与单选按钮值一起使用。我希望用户选择一个类别（使用selectdrop down），然后选择一个大小（使用单选按钮），并在单击按钮时将类别的值和大小都传递到 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;
}