如何在单击按钮时在请求参数中传递 html 输入值

Question

我有一个使用 table 中的核心库动态生成的书籍列表。用户可以 select 将一定数量的书籍添加到他的购物车并单击 "Add to cart button"。我想要的是从输入传递值 "quantity" 并在单击按钮时将其传递到请求参数中。我试过这种方式，但只有第一行数量的值被传递，即使点击了第三行的按钮（例如）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<c:forEach var="book" items="${books}">
    <tr>
        <td><img alt="" src="images/${book.getIsbn()}.jpg" width="100"></td>
        <td><c:out value="${book.getIsbn()}"></c:out></td>
        <td><c:out value="${book.getTitle()}"></c:out></td>
        <td><input type="number" id="qtty"></td>
        <td>
            <button onclick='window.location ="usercart.htm?isbn=${book.getIsbn()}&qtty="+document.getElementById("qtty").value'>Add to cart</button>
        </td>
    </tr>
</c:forEach>

Answer 1

看起来这里的问题是您有多个具有相同 ID 'qtty' 和 document.getElementById("qtty") returns 第一个的输入。

您可以尝试为每个输入赋予不同的标识符：

<td><input type="number" id="qtty_${book.isbn}"></td>
<td>
    <button onclick='window.location ="usercart.htm?isbn=${book.getIsbn()}&qtty="+document.getElementById("qtty_${book.isbn}").value'>Add to cart</button>
</td>

但是，更好的解决方案可能是重构为每个element.See使用一个表单下面关于为每一行创建一个表单的讨论：

HTML: Is it possible to have a FORM tag in each TABLE ROW in a XHTML valid way?

如何在单击按钮时在请求参数中传递 html 输入值

How to pass html input value in a request parameter on a button click

jquery

jsp

jstl

core

jakarta-ee