Отправка формы при выборе SELECT и добавление GET-параметров

Question

У меня есть select с сортировкой постов.

 <form class="order" action="" method="GET" id="sort">
     <select name="orderby" class="orderby" aria-label="Shop order">
       <option value="lenght"><?php pll_e('Sorting by Lenght');?></option>
        <option value="price"><?php pll_e('Sorting by Price');?></option>
        <option value="year"><?php pll_e('Sorting by Year');?></option>
     </select>
     <input type="hidden" name="paged" value="1">
  </form>

Я написал на JQ скрипт, который бы отправлял эту форму, заодно и выводил бы get-параметры в строку. То есть хотелось бы, чтобы получалось так: site.ru/?orderby=length. Ну и страница бы перезагружалась бы.

 <script>
jQuery( function( $ ) {
 $('#sort').on('change', function() {
  $(this.form).submit();
  console.log('мовпк');
});
 } );

 </script>

И еще вопрос - а можно ли сделать так, чтобы get-параметры с формы подтягивались к другим. Чтобы если уже содержались параметры, то получалось бы вот так:

site.ru/?lenght=50&orderby=length

Спасибо за помощь!

Answer 1

В JQuery слабоват, но вот решение на JavaScript

<script>
const select = document.getElementById('selectItem');

function load() {
  const sel = window.location.search.replace('?', '').split('&').filter((item) => item.indexOf(select.name) !== -1);
  if (sel.length) {
    select.value = sel[0].split('=')[1];
  }
}
jQuery( function( $ ) {
  $('#sort').on('change', function() {
    $(this.form).submit();
    let search = window.location.search.replace('?', '').split('&');
    search = search.filter((item) => item.indexOf(select.name) === -1);
    search.push(select.name + '=' + select.value);
    window.location.search = '?' + search.join('&');
    console.log('мовпк');
  });
} );
</script>

В html в тег <body>

<body onload="load()">

Данные будут автоматом подтягиваться в select при загрузке и автоматом ее перегружать, при выборе нового значения в select

БЛОГ НА HUSL

Отправка формы при выборе SELECT и добавление GET-параметров

Ответы (1 шт):