Javascript не хочет работать с Thymeleaf

Question

На форме ввода выполняю проверку введенного значения cost. Но запуске скрипт не может найти форму вводу input01.

Вот так все работает:

<form name="form01" th:method="POST" th:action="@{/add-car/new}" th:object="${carEntity}">
    <input type="text" name="input01">
    ...
    <button type="submit" class="btn btn-primary" onclick="check()">Save</button>
</form>
<script>
    function check() {
        let inputVal = document.forms["form01"]["input01"].value;
        // Все OK!!!
        // ....
    }
</script>

А вот так нет:

<form name="form01" th:method="POST" th:action="@{/add-car/new}" th:object="${carEntity}">
    <input type="text" name="input01" th:field="*{cost}">
    ...
    <button type="submit" class="btn btn-primary" onclick="check()">Save</button>
</form>
<script>
    function check() {
        let inputVal = document.forms["form01"]["input01"].value;
        // Здесь происходит ошибка
        // Where Error:
        // "Uncaught TypeError: document.forms.form01.input01 is undefined"
        // ...
    }
</script>

Что я делаю не так?

Answer 1

Дело в использовании

th:field="*{cost}"

th:field не только проставляет значение (атрибут value),
но и название поля (атрибут name)
При этом, если атрибут name был проставлен, то он заменяется.

Соответственно th:field="*{cost}" заменил name="input01" на name="cost"

Соответственно в JavaScript необходимо обращаться к данному элементу следующим образом:

let inputVal = document.forms["form01"]["cost"].value;

БЛОГ НА HUSL

Javascript не хочет работать с Thymeleaf

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