Aviran Katz Aviran Katz - 5 months ago 8
HTML Question

Get an HTML form to submit query in a "Django-ish" format

I want to create a form that sends the user to a URL in a "Django-ish" format (although I'm not using Django).

For example - A form that would contain two

select
controls, in the following way:

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


I want the redirection to be in that structure:
.../category/chosen-category+chosen-location


For instance, if the user has chosen "Europe" and "Food", I want the form to take him/her to:

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


EDIT:

The select tags don't have to be inside a form. I'm open to suggestions.

Answer

This is a solution based on native 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>

The console.log-calls are just inside for demonstration purposes.
You can (and should) remove them in your productive code.

The window.location must be un-commented for it to work.
It is just commented out for us to be able to see the console-log output.

So your productive code could look something like this:

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