主页 / 问题 / 1220947
Accepted
alex
Asked:2021-12-19 17:08:33 +0800 CST2021-12-19 17:08:33 +0800 CST

Javascript 不想与 Thymeleaf 一起使用

  • 772

在输入表单上，我检查输入的成本值。但是运行脚本找不到表单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>

我究竟做错了什么？

javascript

1 个回答

  1. Best Answer

    使用事项

    th:field="*{cost}"

    th:field不仅放下值（attribute value），
    还放下字段的名称（attribute name）
    。这种情况下，如果属性name已经放下，那么就被替换掉。

    相应地th:field="*{cost}"替换 name="input01"为 name="cost"

    因此，有JavaScript必要按如下方式提及该要素：

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

相关问题