Подставление значений из GET запроса в input. JS

114
11 мая 2021, 19:20

Есть HTML форма с фильтрами, после отправки GET запроса или после обновления страницы все значения input'ов слетают. Как с помощью js/jquery вытянуть из адресной строки значения полей и подставиь их обратно в input'ы?

Answer 1

Если очень нужно достать из адресной строки, то можно воспользоваться встроенным объектом для URL адресов, который сам разбирает строку на составляющие.
Алгоритм такой:

  1. Берете текущий url из свойства window.location.href
  2. На основе url создаете объект URL
  3. Он помещает строку с GET параметрами (которые идут после ? в url) в свойство search объекта URl
  4. Если такая строка есть, то перебираем коллекцию объекта URL searchParams, которая содержит пары [имя параметра, значение параметра]
  5. По имени параметра можно найти соответствующий 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.

Answer 2

Хочу предложить ещё вариант вытягивания из адресной строки:

<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.

READ ALSO
tampermonkey запуск скрипта через контекстное меню

tampermonkey запуск скрипта через контекстное меню

Как запустить скрипт нажав правую кнопку мыши и выбрав нужный скрипт? Использую этот параметр:

128
На сколько это правильно? (DOM)

На сколько это правильно? (DOM)

Только начал учить Js, сейчас прохожу блок по DOMНаписал абстрактную регистрацию пользователя с проверкой на совпадение паролей, на сколько...

89
Увеличение значения объекта

Увеличение значения объекта

Есть три кнопкиПо нажатию на первую кнопку запускается первый секундомер, по нажатию на вторую останавливается первый и запускается второй...

117
При обращении к массиву по индексу &ldquo;undefined&rdquo;

При обращении к массиву по индексу “undefined”

Создаю массив из массивов данных полученного из CSV файлаПри обращении к конкретному массиву по индексу выводит "undefined"

90