Get data from table row to Javascript

Question

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 ?

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
– Nastya Gorobets, Commented May 3, 2016 at 12:43

Manjeet Barnala · Accepted Answer · 2016-05-03 13:16:03Z

1

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>

answered May 3, 2016 at 13:16

Manjeet Barnala

2,9951 gold badge13 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Nastya Gorobets Over a year ago

Yes , it works . But I dont know how many rows will be in my table . I try this: <tr id=${product.getProductName()}> and <td><input type="button" onclick="makeOrder(document.getElementById('productName').value)" value="Make Order"></td> But I get the same result - only the first row get

Manjeet Barnala Over a year ago

use same at both places... for tr <tr id=${product.getProductName()} > for button <input type="button" onclick="makeOrder(${product.getProductName()})" value="Make Order">

Nastya Gorobets Over a year ago

I get error : Uncaught TypeError: Cannot read property 'childNodes' of null

Manjeet Barnala Over a year ago

inspect your html and see is id printed in makeOrder() for each button ??

Manjeet Barnala Over a year ago

print ${product.getProductName()} between the single qoutes like this makeOrder('PRODUCT_NANE');

|

namlik · Accepted Answer · 2016-05-03 12:44:52Z

0

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.

answered May 3, 2016 at 12:44

namlik

1921 silver badge12 bronze badges

2 Comments

Nastya Gorobets Over a year ago

No, I dont need return all rows . I need return only row when I clicked button .

namlik Over a year ago

Ah, look into this answer, this way you'll get the button on which is clicked and from there you should be able to make your way to the data you want using siblings. stackoverflow.com/a/9012576/6270761

Collectives™ on Stack Overflow

Get data from table row to Javascript

2 Answers 2

6 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related