Убрать пустые get из запроса

Question

Необхдимо при отправке формы отправлять get запрос и переводить пользователя на страницу результата(по сути обычная форма поиска). Но возникло несколько вопросов:

Имеет ли право на жизнь вариант организации запроса формы который я сделал? Нужно чтобы пустые поля поиска не участвовали в запросе, сообразил только так.
После перехода объявления отображаются, но форма очищается, что логично. Как правильно организовать заполнение ее после перехода на страницу результатов поиска? Чтобы введенные значения в ней сохранились. Разбирать url и тянуть их оттуда? Сейчас реализовано так:

    searchForm.addEventListener('submit', (e)=>{
        e.preventDefault();
        let name = searchForm.querySelector('#detailName').value
        let markAuto = searchForm.querySelector('#carName').value
        let modelAuto = searchForm.querySelector('#carModel').value
        window.location = `url/search?${name.length > 1 ? 'name=' + name : ''}
        ${markAuto.length > 1 ? '&mark_auto =' + markAuto : ''}
        ${modelAuto.length > 1 ? '&model_auto =' + modelAuto : ''}`
    })

Answer 1

Вполне нормальная штука(котик), лучше чем у большинства на стаке написано, ток семиколон пропал в конце
Я бы в sessionStorage записывал и не парился, как раз сразу после preventDefault... хотя я не так понял, сначала подумал что поиск "только на главной", но и через сессионную коробку можно реализовать, либо да, через юрл, но ток через бэкенд, т.е. куда ты запрос отправляешь - оно возвращает форму заполненную, либо да х2, как ты предложил, парсить юру(л), но такоэ(

Answer 2

Не плохая реализация, но могут возникнуть проблемы:

если поле name пустое, будет генерироваться не верная ссылка: url/search?&mark_auto =...;
лучше лишний раз проверять данные, какие мы хотим получить. В данном случае это не критично, но не помешало бы;
я бы не использовал вместо id - класс. Это даст возможность использовать форму поиска несколько раз на странице. Конфликта не должно быть, так как Вы ищите от элемента searchForm
Не плохо было бы, если не один фильтр не задействован, не делать переадресацию. (зависит от идеи).

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

   searchForm.addEventListener('submit', (e)=>{
        e.preventDefault();
        let name = searchForm.getElementById('#detailName'),
            markAuto = searchForm.getElementById('#carName'),
            modelAuto = searchForm.getElementById('#carModel'),
            new_url = [];

        if(name && name.value.length>1){
           new_url.push('name=' + name.value);
        }
        if(markAuto && markAuto.value.length>1){
           new_url.push('mark_auto=' + markAuto.value);
        }
        if(model_auto && model_auto.value.length>1){
           new_url.push('model_auto=' + model_auto.value);
        }
        window.location = `url/search`+(new_url.length>0 ? '?'+new_url.join('&'):'');
    });

Данные с формы лучше тянуть с ссылки. Тут предложили через local/session Storage. Способ не плохой, но не до конца практичный. Одним из достоинством использования get-параметров - это возможность передача ссылки другому лицу(пользователю).

Answer 3

form.onsubmit = function(e) {
    e.preventDefault();
    const elements = [...this.elements]
        .filter(element => element.hasAttribute('name') && element.value);

    const data = elements.map(element => [element.name, element.value]);
    
    const params = new URLSearchParams(data);
    
    const url = `url/search?${params.toString()}`;
    
    //window.location = url;
    
    console.log(url);
}

<form id="form">
    <input type="text" name="detailName">
    <input type="text" name="carName">
    <input type="text" name="carModel">
    <button type="submit">SUBMIT</button>
</form>

БЛОГ НА HUSL

Убрать пустые get из запроса

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