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

Question

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

<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") 返回第一个。

您可以尝试为每个输入指定一个不同的标识符：

<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：是否可以以 XHTML 有效方式在每个表行中包含 FORM 标记？