Блог

Главная - Вопросы по программированию - Javascript Thymeleaf не находит форму

Javascript Thymeleaf не находит форму

#java #spring-boot #thymeleaf

#java #весенняя загрузка #thymeleaf

Вопрос:

В форме ввода я выполняю проверку введенного значения затрат. Но запуск скрипта не может найти ввод формы 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>

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

Ответ №1:

Согласно https://www.thymeleaf.org/doc/tutorials/2.1/thymeleafspring.html,

 <input type="text" th:field="*{datePlanted}" />

эквивалентно

 <input type="text" id="datePlanted" name="datePlanted" th:value="*{datePlanted}" />

Следовательно th:field="*{cost}" , при добавлении имя и идентификатор элемента формы меняются на name="cost" id="cost" . таким образом, входной элемент document.forms [«form01»] будет выглядеть так

<input type="text" name="cost" id="cost">

Либо получить доступ к элементу как

document.forms["form01"]["cost"]

Или добавьте идентификатор формы, как показано ниже, и ваш существующий код должен работать.

<input id="input01" type="text" name="input01" th:field="*{cost}"> .

Надеюсь, это поможет решить вашу проблему.