1

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

  1. Имеет ли право на жизнь вариант организации запроса формы который я сделал? Нужно чтобы пустые поля поиска не участвовали в запросе, сообразил только так.
  2. После перехода объявления отображаются, но форма очищается, что логично. Как правильно организовать заполнение ее после перехода на страницу результатов поиска? Чтобы введенные значения в ней сохранились. Разбирать 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 : ''}`
    })
3
  • Непустые это > 0.
    – Alexey Ten
    18 июн 2020 в 4:29
  • Но смысл этого желания всё равно непонятен. Чем вам мешают пустые поля?
    – Alexey Ten
    18 июн 2020 в 5:12
  • @AlexeyTen банальное желание не растягивать длинный url, так как в форме поиска позднее появятся еще порядка 5 полей которые будут не обязательны для заполнения. 18 июн 2020 в 7:23

3 ответа 3

0
  1. Не плохая реализация, но могут возникнуть проблемы:
  • если поле 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('&'):'');
    });
  1. Данные с формы лучше тянуть с ссылки. Тут предложили через local/session Storage. Способ не плохой, но не до конца практичный. Одним из достоинством использования get-параметров - это возможность передача ссылки другому лицу(пользователю).
1
  • Спасибо за подробный ответ! Буду дополнять решение. 18 июн 2020 в 7:19
0
  1. Вполне нормальная штука(котик), лучше чем у большинства на стаке написано, ток семиколон пропал в конце

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

1
  • Спасибо за ответ! я думал про sessionStorage, но пока через разбор get строки все организовал, чтобы как писали в комментарии выше можно было ссылку скидывать 18 июн 2020 в 7:20
0

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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.