Can't figure out how to generate url?

Question

JavaScript

I'm trying to do some filtering through a form. Used CMS Wordpress
Form code:

<form class="filter" action="/category/" method="get" onsubmit="location.href = this.action+document.getElementById('search').value;return false">
  <div class="form-group">
    <label class="label-padding" value="аренда">Раздел: 
      <select><!-- Раздел - селектлист -->
        <option  name = "">Все</option>
        <option value="аренда" name = "category[аренда]" id="аренда">аренда</option>
        <option value="продажа" name = category[продажа] id = "search">Продажа</option>
     	</select>
    </label>
    <label class="label-padding">Тип недвижимости: 
      <select name=""> <!-- Раздел - селектлист -->
        <option value="">Все</option>
        <option value="0">Вторичная недвижимость</option>
        <option value="1">Новостройки</option>
                        	<option value="2">Долевое строительство</option>
                        	<option value="3">Земельные участки</option>
                        	<option value="4">Коммерческая недвижимость</option>
     	</select>
    </label>
    <label class="label-padding">Район: 
      <select name=""> <!-- Раздел - селектлист -->
        <option value="">Все</option>
        <option value="0">Железнодорожный</option>
        <option value="1">Кировский</option>
                        	<option value="2">Лениский</option>
                        	<option value="3">Октябрьский</option>
                        	<option value="4">Свердловский</option>
                        	<option value="5">Советский</option>
                        	<option value="6">Центральный</option>
                        
     	</select>
    </label>
  </div>
  <div class="form-group" style="margin-left: 27px; margin-bottom: 15px;">
    <label>Площадь от: <!-- Интервал значений цены -->
      <input type="number" name=""/>
    </label>
    <label>до: 
    <input style="margin-right:110px;" type="number" name=""/>
    </label>
    <label>Цена от: <!-- Интервал значений цены -->
    <input type="number" name=""/>
    </label>
    <label>до: 
      <input type="number" name=""/>
    </label>
  </div>
  <div class="form-group" style="margin-right:250px; margin-bottom: 15px">
    Количество комнат:
    <label>1 <input type="checkbox" name="команты[1]" value="1"/></label>
    <label>2 <input type="checkbox" name="комнаты[2]" value="2"/></label>
    <label>3 <input type="checkbox" name="комнаты[3]" value="3"/></label>
    <label>4 <input type="checkbox" name="комнаты[4]" value="4"/></label>
    <label>более <input type="checkbox" name="rooms[]" value="5"/></label> <!-- Чекбоксы для комнат, пишутся в массив rooms[] -->
  </div>
  <div class="form-group" style="justify-content: flex-start; margin-left: 38px;">
  
  </div>
  <button type="submit" style="text-align: center; margin: 0 auto;">Поиск</button>
</form>

<style type="text/css">
  .form-group{
    display: flex;
    justify-content: space-around;
  }
  .label-padding{
    padding-right: 8px;
  }
</style>

url should be collected depending on what is selected in the form

Answer 1

codepen

$('form').on('submit', function(event) {
  event.preventDefault();
  console.log('https://site.com?' + $(this).serialize());
});