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, May 03 '16 at 12:43

score 1 · Accepted Answer · answered May 03 '16 at 13:16

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 03 '16 at 13:16

Manjeet Barnala

2,975
1
10
20

Yes , it works . But I dont know how many rows will be in my table . I try this: `` and `` But I get the same result - only the first row get – Nastya Gorobets May 03 '16 at 13:43
use same at both places... for tr `` for button `` – Manjeet Barnala May 03 '16 at 13:46
I get error : Uncaught TypeError: Cannot read property 'childNodes' of null – Nastya Gorobets May 03 '16 at 13:50
inspect your html and see is id printed in `makeOrder()` for each button ?? – Manjeet Barnala May 03 '16 at 13:51
1

print `${product.getProductName()}` between the single qoutes like this `makeOrder('PRODUCT_NANE')`; – Manjeet Barnala May 03 '16 at 13:54
Oh, it works great for me ! Than you Problem was in single qoutes – Nastya Gorobets May 03 '16 at 14:00

score 0 · Answer 2 · answered May 03 '16 at 12:44

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 03 '16 at 12:44

namlik

182
1
12

No, I dont need return all rows . I need return only row when I clicked button . – Nastya Gorobets May 03 '16 at 12:59
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. http://stackoverflow.com/a/9012576/6270761 – namlik May 03 '16 at 13:05

Get data from table row to Javascript

2 Answers2