Как изменить строку запроса для подчиненной формы

Question

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

Пример: Когда я ищу тест, URL будет / someaction? Q = test & select1 = & select2 = Требуемый URL: / someaction? Q = test

<form action="/search" action="Get">
        <label>Search term <input name="q"></label>

<select id="select1" name="select1">
<option value="1">option 1</option>
</select>

<select id="select2" name="select2">
<option value="1">option 1</option>
</select>


        <input type="submit">
    </form>

Answer 1

Поскольку вы используете метод GET для действия формы, вы можете обработать событие submit для предотвращения обычной отправки и убрать пустые значения с помощью функции replace() с регулярным выражением, а затем использовать location.href для перенаправления на целевой URL:

$('form').submit(function (e) {
    e.preventDefault(); 

    var queryString = $(this).serialize().replace(/&?[\w\-\d_]+=&|&?[\w\-\d_]+=$/gi, "");
    url = this.getAttribute('action') + (queryString.length > 0 ? "?" + queryString : "");

    // returns URL /search?q=something when both select elements are empty 
    location.href = url;
});

Или отключите элементы select без значений на лету, используя attr() или prop(), чтобы предотвратить их использование в строке запроса, используя обычное событие отправки формы:

$('form').submit(function () {
    $('select').each(function () {
        if ($(this).val() == '') {
            $(this).prop('disabled', 'disabled'); // or prop('disabled', true)
    });
});