"Django-ish"形式のクエリーを送信するためのHTMLフォームを取得

Question

ユーザーをURLに「Django-ish」形式で送信するフォームを作成したいと思います（私はDjangoを使用していませんが）。

例えば - 次のように、2つのselectコントロールが含まれていますフォーム：ユーザーが持っている場合、例えば.../category/chosen-category+chosen-location

：

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

私はリダイレクトがその構造になりたいです"ヨーロッパ" と "食" を選択し、私は、フォームが彼を取るしたい/彼女へ：

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

EDIT：

選択タグはフォーム内にある必要はありません。私は提案に開放されています。

Answer 1

これは、ネイティブのJavaScriptをベースとしたソリューションです：console.log -callsは、デモの目的のためだけの内部です

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>

。
あなたの生産的なコードでそれらを削除することができます。

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