Как передать входное значение html в параметре запроса нажатием кнопки

Question

У меня есть список книг, динамически генерируемых с использованием основной библиотеки внутри таблицы. Пользователь может выбрать количество книг для добавления в корзину и нажимает кнопку «Добавить в корзину». Я хочу передать значение «количество» из ввода и передать его в параметре запроса при нажатии кнопки. Я попробовал этот путь, но только значение первого количества строк передается, даже если кнопка на 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 '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> 

Однако, лучшее решением может быть реорганизовать использовать форму для каждого element.See обсуждения ниже по созданию формы для каждой строки:

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