Question

我需要一些帮助，让以下表单使用单选按钮值。我希望用户选择一个类别（使用select下拉列表）然后选择一个大小（使用单选按钮），并在单击按钮时将类别和大小的值传递到URL。因此，用户需要http://thewebsiteaddress.com/category/size。

我在下面的基本表单工作正常，除了单选按钮值 - 单击按钮时它在URL中显示为'undefined'。我对此非常陌生，并希望能帮助我走上正确的道路或向我展示更好的方式来完成这项任务。

感谢您提供任何指导。

<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;
}

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

1 个答案: