Есть HTML форма с фильтрами, после отправки GET запроса или после обновления страницы все значения input'ов слетают. Как с помощью js/jquery вытянуть из адресной строки значения полей и подставиь их обратно в input'ы?
2 ответа
Если очень нужно достать из адресной строки, то можно воспользоваться встроенным объектом для URL адресов, который сам разбирает строку на составляющие.
Алгоритм такой:
- Берете текущий url из свойства window.location.href
- На основе url создаете объект URL
- Он помещает строку с GET параметрами (которые идут после ? в url) в свойство search объекта URl
- Если такая строка есть, то перебираем коллекцию объекта URL searchParams, которая содержит пары [имя параметра, значение параметра]
По имени параметра можно найти соответствующий input и заполнить его
Простейший пример:function fillInputs(form) { let url = new URL(window.location.href); if (!url.search) return; for (let [name, value] of url.searchParams) { form.elements[name].value = value; } } fillInputs(document.forms.myForm);
Для более сложных случаев (например с радио кнопками) нужно либо дописывать, либо воспользоваться sessionStorage или localStorage.
Хочу предложить ещё вариант вытягивания из адресной строки:
<form id=form>
<span id=inputs_txt>
<input type=text name=lastname>
<input type=text name=firstname>
<input type=text name=other>
</span>
<input type=submit>
</form>
<script>
var inputsspan = document.getElementById("inputs_txt");
var inputs_txt = inputsspan.getElementsByTagName("input");
var parametr = location.search.substring(1).split("&");
for(i = 0; i < parametr.length; i ++) inputs_txt[i].value = parametr[i].split("=")[1];
</script>
Т. е., инпуты заполняются данными с адресной строки после отправки данных и последующих обновлений страницы. Для реализации этой задачи после обновления без отправки понадобится куки или localstorage.
Window.sessionStorage
илиWindow.localStorage
.