Как сохранить выбранные опции в полях select, checkbox и radiobuttons на HTML странице?

Как с помощью JS скрипта сохранить состояние полей на HTML странице при переходе с одной страницы на другую в проекте на Spring Boot MVC с использованием Thymeleaf?
  • 19 июля 2024 г. 6:12
Ответы на вопрос 2
Для сохранения выбранных опций в полях select, checkbox и radiobuttons на HTML странице можно использовать localStorage или cookies.

Пример использования localStorage:

```html
<select id="selectField">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

<input type="checkbox" id="checkboxField" />
<label for="checkboxField">Checkbox</label>

<input type="radio" id="radioField1" name="radioGroup" value="option1" />
<label for="radioField1">Option 1</label>

<input type="radio" id="radioField2" name="radioGroup" value="option2" />
<label for="radioField2">Option 2</label>

<script>
  // сохранение выбранных опций в localStorage
  document.getElementById('selectField').addEventListener('change', function() {
    localStorage.setItem('selectedOption', this.value);
  });

  document.getElementById('checkboxField').addEventListener('change', function() {
    localStorage.setItem('checkboxValue', this.checked);
  });

  document.querySelectorAll('input[name="radioGroup"]').forEach(function(radio) {
    radio.addEventListener('change', function() {
      localStorage.setItem('selectedRadio', this.value);
    });
  });

  // восстановление выбранных опций при загрузке страницы
  document.getElementById('selectField').value = localStorage.getItem('selectedOption') || '';
  document.getElementById('checkboxField').checked = localStorage.getItem('checkboxValue') === 'true';
  document.querySelector('input[name="radioGroup"][value="' + localStorage.getItem('selectedRadio') + '"]').checked = true;
</script>
```

Чтобы сохранить состояние полей при переходе с одной страницы на другую в проекте на Spring Boot MVC с использованием Thymeleaf, можно использовать модель и передавать параметры между страницами.

Пример передачи параметров с помощью Thymeleaf:

```java
// controller
@RequestMapping("/page1")
public String page1(Model model) {
    // передача параметров на страницу
    model.addAttribute("selectedOption", "option1");
    model.addAttribute("checkboxValue", true);
    model.addAttribute("selectedRadio", "option1");
    return "page1";
}

// страница page1.html
<select id="selectField" th:value="${selectedOption}">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

<input type="checkbox" id="checkboxField" th:checked="${checkboxValue}" />
<label for="checkboxField">Checkbox</label>

<input type="radio" id="radioField1" name="radioGroup" value="option1" th:checked="${selectedRadio eq 'option1'}" />
<label for="radioField1">Option 1</label>

<input type="radio" id="radioField2" name="radioGroup" value="option2" th:checked="${selectedRadio eq 'option2'}" />
<label for="radioField2">Option 2</label>
```

При переходе на другую страницу, параметры можно передавать через URL или использовать сессии для хранения данных.
Не совсем понятно, что именно вам нужно сохранять и что именно не работает. 
Временное состояние формы, чтобы пользователь мог закрыть страницу, не отправляя изменения на сервер, и вернуться к ней позже? Или прям полноценное редактирование?

Если второе, то это и должно храниться на сервере. Или у вас при открытии формы поля формы не заполняются значениями из БД и она пуста? Тогда это отдельная проблема, не имеющая никакого отношения к JS.

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