I have table . There are three columns : Name , Price and button "Make Order". I must get data from each row to my Javascript. Each input have id such as productName and productPrice . Table code:

<table border="2px">
<tr>
<th>Name</th>
<th>Price</th>
</tr>
<c:forEach items="${productList}" var="product" varStatus="status">
<tr>
    <form>
    <td> ${product.getProductName()}</td>
    <input type="hidden" id="productName" name="productName" value=${product.getProductName()}>
    <td>${product.getPrice()}</td>
    <input type="hidden" id="productPrice" name="productPrice" value=${product.getPrice()}>
    <td><input type="submit" onclick="makeOrder()" value="Make Order"></td>
    </form>
</tr>
  </c:forEach>
  </table>

And my js:

<script type="text/javascript">
function makeOrder() {
    var n=document.getElementById("productName").value;
    var p=document.getElementById("productPrice").value;
    alert("n="+n);
    alert("p="+p);
    //var win=window.open("/user/makeOrder?productName=" + n + "&productPrice=" + p);
}

But when I click on my button I always alert first row of my table . How can I alert other row ?

I have table . There are three columns : Name , Price and button "Make Order". I must get data from each row to my Javascript. Each input have id such as productName and productPrice . Table code:

<table border="2px">
<tr>
<th>Name</th>
<th>Price</th>
</tr>
<c:forEach items="${productList}" var="product" varStatus="status">
<tr>
    <form>
    <td> ${product.getProductName()}</td>
    <input type="hidden" id="productName" name="productName" value=${product.getProductName()}>
    <td>${product.getPrice()}</td>
    <input type="hidden" id="productPrice" name="productPrice" value=${product.getPrice()}>
    <td><input type="submit" onclick="makeOrder()" value="Make Order"></td>
    </form>
</tr>
  </c:forEach>
  </table>

And my js:

<script type="text/javascript">
function makeOrder() {
    var n=document.getElementById("productName").value;
    var p=document.getElementById("productPrice").value;
    alert("n="+n);
    alert("p="+p);
    //var win=window.open("/user/makeOrder?productName=" + n + "&productPrice=" + p);
}

But when I click on my button I always alert first row of my table . How can I alert other row ?

• javascript
• html
• function
• jsp
• html-table

• But after button submit my page overload and adress string changes right . So it means that changed data don't pass to my js – Nastya Gorobets Commented May 3, 2016 at 12:43

2 Answers 2

Use a unique row id for each row and pass that id with makeOrder() function and then find child elements inside that row whose id is passed in function...

Here is working example....

function makeOrder(rowId) 
{
	var n=document.getElementById(rowId).childNodes[5].value;
    var p=document.getElementById(rowId).childNodes[9].value;
    alert("n="+n);
    alert("p="+p);
    //var win=window.open("/user/makeOrder?productName=" + n + "&productPrice=" + p);
}

<table border="2px">
	<tr>
	<th>Name</th>
	<th>Price</th>
	</tr>
	<tr id="row1">
		<form>
		<td>P1</td>
		<input type="hidden" id="productName" name="productName" value="P1">
		<td>$5</td>
		<input type="hidden" id="productPrice" name="productPrice" value="5">
		<td><input type="button" onclick="makeOrder('row1')" value="Make Order"></td>
		</form>
	</tr>
	<tr id="row2">
		<form>
		<td>P2</td>
		<input type="hidden" id="productName" name="productName" value="P2">
		<td>$6</td>
		<input type="hidden" id="productPrice" name="productPrice" value="6">
		<td><input type="button" onclick="makeOrder('row2')" value="Make Order"></td>
		</form>
	</tr>
</table>

You could call a function that gives all inputs with name productName, see below.

var n=document.getElementsByName("productName").value;
var p=document.getElementsByName("productPrice").value;
for(var i = 0; i < n.length; i++) {
    alert("row 1: " + n[i].value + p[i].value);
}

This should return all your rows. Each alert will show the data of 1 row.