javascript - 获取 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

例如，如果用户选择了“欧洲”和“食品”，我希望表单将他/她带到:

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 - 调用仅用于演示目的。
您可以(并且应该)在您的生产代码中删除它们。

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