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

Question

[Andmax]

Имеется вот такая форма:

<form role="form" action="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>

Выбираем цену 500 рублей,
при нажатии на кнопку мы переходим на страницу catalog/vse-tovaryi/?ms|price=500&msoption|tags=1

А если мы выбираем "Любая", переходим на catalog/vse-tovaryi/?ms|price=&msoption|tags=1

Вопрос: как вообще не печатать этот параметр "ms|price=" в URL, если выбрано значение с пустым value?
Чтобы при выборе цены "Любая" при переходе ссылка была такой: catalog/vse-tovaryi/?msoption|tags=1

Обрыл весь google, ответа не нашел.
Заранее благодарен!

Answer 1

[Михаил Горячкин]

Вот ловите накатал примерчик:
HTML:

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

JS:

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

Смысл заключается в генерации нужного вам url и подстановки его в аттрибут action вашей формы в связи с чем после нажатия на кнопку отправить, вы перейдете туда куда нужно.

Comments

[Andmax]

Михаил Горячкин Спасибо, сейчас попробую.

[Andmax]

Увы, но не работает. jsfiddle.net/myj0uLn4

[Михаил Горячкин]

Вот ей богу удивляюсь, все целиком написал и не работает обалдеть. А повнимательнее посмотреть то не судьба? Вы же сами в jsfiddle поставили отработку скрипта на OnLoad, а это значит что из моего кода вам надо убрать window.onload = function () { и все будет работать. Повнимательнее надо быть.

[Andmax]

Михаил Горячкин: Извините, вы правы...

Answer 2

[bkosun]

Вариант с удалением элемента с формы, если выбрана пустая опция:

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

А вообще, если отображаемая ссылка в браузере не имеет значения, правильно было бы просто игнорировать этот аргумент скриптом обработчиком, как уже написали выше.

Comments

[Andmax]

О! Спасибо большущее! Работает!
Да, полностью согласен с вами. Но разработчик фильтра мягко говоря не заинтересован в каких-либо правках...

Answer 3

[entermix]

Можно удалить этот select при клике по кнопке отправки формы JS скриптом

Answer 4

[Глюкъ Виртуален]

А не проще ли на стороне обработчика просто не учитывать "пустой" аргумент?
Подозреваю, что это уже сделано, а ваша реальная задача выходит за рамки вашего вопроса.

Comments

[Andmax]

Глюкъ Виртуален Да, так было бы проще.
Но это не сделано, т.к. обработчика вовсе нет.
Мы просто переходим на страницу с данным URL, далее его разбирает скрипт фильтра. А для того скрипта "ms|price=" значит "Нет ни одного подходящего товара".

[Глюкъ Виртуален]

Andmax: возьмите скрипт фильтра и сделайте там дополнительное условие.
Это будет правильнее предложенного вам выше костыля.

[Andmax]

Если бы я знал JS и php, я бы до победного разбирался сам =)

[Глюкъ Виртуален]

Andmax: Ванга умерла, а ясновидящих здесь нет :)