获取 HTML 表单以"Django-ish"格式提交查询

Question

我想创建一个将用户发送到" django-ish"格式的URL的表单（尽管我不使用django）。

例如 - 以下方式包含两个select控件的表格：

<select name="location" >
  <option value="europe">Europe</option>
  <option value="asia">Asia</option>
  <option value="australia">Australia</option>
  <option value="africa">Africa</option>
  <option value="america">America</option>
</select>
<select name="category">
  <option value="food">Food</option>
  <option value="clothing">Clothing</option>
  <option value="electronics">Electronics</option>
</select>

我希望重定向处于该结构：.../category/chosen-category+chosen-location

例如，如果用户选择了"欧洲"one_answers"食物"，我希望该表格将他/她带到：

：

http://wwww.mydomain.com/category/food+europe

编辑：

选择标签不必在表单内。我愿意接受建议。

Answer 1

这是基于本机JavaScript的解决方案：

document.addEventListener('DOMContentLoaded', function(event) { 
  
  var searchForm = document.getElementById('catLocSearch');
  
  searchForm.addEventListener('submit', function(e) {
    var searchLocation = this.location.value,
        searchCategory = this.category.value,
        location = window.location;
    
    console.log('Form submitted');
    console.log(this);
    console.info('Values: ', searchLocation, searchCategory);
    console.log('New Location: ', location.protocol + '//' + location.host + '/category/' + searchCategory + '+' + searchLocation);
    
    // window.location = location.protocol + '//' + location.host + '/category/' + searchCategory + '+' + searchLocation;
    
    e.preventDefault();
  });
  
});

<form id="catLocSearch">
  <select name="location">
    <option value="europe">Europe</option>
    <option value="asia">Asia</option>
    <option value="australia">Australia</option>
    <option value="africa">Africa</option>
    <option value="america">America</option>
  </select>
  <select name="category">
    <option value="food">Food</option>
    <option value="clothing">Clothing</option>
    <option value="electronics">Electronics</option>
  </select>
  <input type="submit" value="Search" />
</form>

console.log -calls仅用于演示目的。
您可以（并且应该）将它们删除在您的生产代码中。

window.location必须没有用才能工作。
我们只是评论了我们能够看到控制台运行的输出。

因此您的生产代码看起来像这样：

  var searchForm = document.getElementById('catLocSearch');
  searchForm.addEventListener('submit', function(e) {
    var searchLocation = this.location.value,
        searchCategory = this.category.value,
        location = window.location;
    window.location = location.protocol + '//' + location.host + '/category/' + searchCategory + '+' + searchLocation;
    e.preventDefault();
  });