Почему я не могу с помощью JS записать в поле input новое значение

Question

Почему я не могу с помощью JS записать в поле input новое значение. После выполнение скрипта, там по остается значение полученное из th:field="*{name}". Каким-то образом Thymeleaf блокирует запись. Но в тоже время я могу туда вводить данные вручную и менять это поле.

Вот код:

<form name="form01" th:method="POST" th:action="@{/add-car/new}" th:object="${carEntity}">
    <input type="text" name="input01" id="inputVal" th:field="*{name}">
    ...
    <button type="submit" class="btn btn-primary" onclick="setVal()">Save</button>
</form>
<script>
    function setVal() {
        document.getElementById("inputVal").value = "Piter";
    }
</script>

Answer 1

Кнопка submit по умолчанию вызывает переадресацию страницы.

Поэтому необходимо отключить это поведение с помощью event.preventDefault();

<form id="form01" th:method="POST" th:action="@{/add-car/new}" th:object="${carEntity}">
    <input type="text" name="input01" id="inputVal" th:field="*{name}">
    ...
    <button type="submit" class="btn btn-primary">Save</button>
</form>
<script>
    //получаем форму
    const form = document.querySelector('#form01');
    //добавляем обработчик события на сабмит формы
    form.addEventListener('submit',setVal, false);
    function setVal(event) {
        event.preventDefault(); //блокируем переодресацию страницы
        document.getElementById("inputVal").value = "Piter";
    }
</script>

Описание задачи: имеется форма на которой отображаются данные объекта, пользователь может изменить эти данные и сохранить их, отправив на сервер изменения Проблема возникла с полем input type="time", почему-то в нем не отображаются данные, я решил через JS занести туда значение, при нажатии на кнопку SAVE. Решение предложенное Daniil Loban, прекрасно работает для поля input type="text", но не записывает в поле input type="time", т.е. опять я пришел к тому с чего начал.

БЛОГ НА HUSL

Почему я не могу с помощью JS записать в поле input новое значение

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