如何在 HTML 中使用变量

Question

I am trying to use a variable in my HTML file called "Description", that I defined like this:

       <h1 th:text="'Product ' + ${item.itemCode}"></h1>
            <div class="inset">
                <p>
                    <label>Item Code</label>
                    <b th:text= "${item.itemCode}"></b>
                <p>
                <p>
                    <label>Item Description</label>
                    <b th:text= "${item.Description}" contenteditable="true" name="Description" id="Description"></b>
                <p>
                <p>
                    <label>Item Price</label>
                    <b th:text= "${item.Price}" contenteditable="true" name="price" id="price"></b>
                <p>
                <p>
                    <label>Item Creation Date</label>
                    <b th:text= "${item.creationDate}" contenteditable="true" name="date" id="date"></b>
                <p>
                <p>
                    <label>Item Creator</label>
                    <b th:text= "${item.creatorUser}" contenteditable="true" name="creator" id="creator"></b>
                <p>
                <p>
                    <label>Item State</label>
                    <b th:text= "${item.itemEnum.getEstado()}"></b>
                <p>

                <p>
                    <a th:href="@{/api/item/saveChanges(itemCode = ${item.itemCode}, description = getVariable())}"> <input name="submit" type="submit" value="Save Changes" /></a>
                </p>
                <p th:if="${item.itemEnum.getEstado() == 'Active'}">
                    <a th:href="@{/api/item/changeInactive/{itemCode}(itemCode = ${item.itemCode})}"> <input name="submit" type="submit" value="Deactivate" width="100%"/></a>
                </p>
                <p th:if="${item.itemEnum.getEstado() == 'No Active'}">
                    <a th:href="@{/api/item/changeActive/{itemCode}(itemCode = ${item.itemCode})}"> <input name="submit" type="submit" value="Activate" width="100%" /></a>
                </p>

            </div>
<script>
    function getVariable(){
        return document.getElementById("Description");
    }
</script>

Basically, I get that variable from my controller. However, it is editable. What I want is to be able to get the current value of "Description" so I can send it back to the controller to update it, something like this:

<a th:href="@{/api/item/saveChanges(description = ${Description})

Answer 1

You can use it something like this:

<textarea rows="7" cols="10" th:text= "${item.Description}" name="Description" >

Receive it in the controller, if the user updates it, you will get an updated value.