Как передать параметры из формы в URL?

<form role="form" id="form" action="catalog/vse-tovaryi/" data-def="catalog/vse-tovaryi/">
  <select name="ms|price">
      <option value="">Любая</option>
      <option value="500">500 рублей</option>
  </select>
        <select name="msoption|tags">
      <option value="1">Тэг 1</option>
      <option value="2">Тэг 2</option>
  </select>

  <button type="submit">Подобрать</button>
</form>

window.onload = function () {
	var form = $('#form'), def = form.data('def'), data = {}, action;
  
  $(document).on('change', '#form select', function () {
  	var el = $(this), val = el.val(), name = el.attr('name');
    if (val) {
    	data[name] = val;
    } else {
      delete data[name];
    }
    action = def + "?";
    for(var i in data) {
      action += i + "=" + data[i] + '&';
    }
    action = action.substr(0, action.length - 1);
    form.attr('action', action);
  });
};

<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script type="text/javascript">
<!--
    $(function(){
        $("#sendForm").click(function(){ // При клике по кнопке #sendForm
            if ($("#msprice").val() == '') // Если в элементе #msprice выбрана опция с пустым значением
                $("#msprice").remove() // Удаляем #msprice с формы
        });
      }); 
-->
</script>

<form role="form" action="catalog/vse-tovaryi/">
  <select name="ms|price" id="msprice">
      <option value="">Любая</option>
      <option value="500">500 рублей</option>
  </select>
        <select name="msoption|tags">
      <option value="1">Тэг 1</option>
      <option value="2">Тэг 2</option>
  </select>

  <button type="submit" id="sendForm">Подобрать</button>
</form>