Question

我有一个在表格中使用核心库动态生成的书籍列表。用户可以选择要添加到购物车的书籍数量，然后单击“添加到购物车按钮”。我想要的是从输入传递值“quantity”并在单击按钮时将其传递给请求参数。我试过这种方式但是只传递了第一行数量的值，即使点击了第3行（例如）上的按钮：

<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＆＃39; qtty＆＃39;和document.getElementById（＆＃34; qtty＆＃34;）返回第一个。

您可以尝试为每个输入提供一个独特的标识：

<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>

但是，更好的解决方案可能是重构为每个元素使用表单。请参阅下面有关为每行创建表单的讨论：

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

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

1 个答案: