Passing different elements to a Javascript function with same id

Question

I have a jsp file where i am retrieving data from database in the form of a table. My jsp is as below:

<%
ResultSet rs1 = stmt.executeQuery("select * from book where category='Fiction'");
%>

<h1><font size="3">
<form name="f1" id="f1" method="post">
<table border="1">
    <tr>
        <th>Name of the Book</th>
        <th>Author</th>
        <th>ISBN</th>
        <th>Price</th>
        <th>Publication</th>
        <th>Description</th>
    </tr>
    <%
    while(rs1.next())
    {
    %>
    <tr> 
        <td id="bname"><%= rs1.getString(1) %></td>
        <td id="aname"><%= rs1.getString(2) %></td>
        <td id="isbn"><%= rs1.getString(3) %></td>
        <td id="price"><%= rs1.getString(4) %></td>
        <td id="pname"><%= rs1.getString(5) %></td>
        <td id="desc"><%= rs1.getString(7) %></td>
        <td><input type="button" value="Add to Cart" onclick="cart()"></input></td>
    </tr>  
    <%
    }
    %>

The output of this will be in number of rows. When i click the button 'Add to Cart' it should pass the cell elements to the javascript function and thereby to a servlet through JS function.

the problem i am facing here is, as the id of every 'td' is same, though i click in the second row of he table, only the elements of the first row are passing into the javascript function.

Here is my javascript function:

function cart()
{
    var bname = window.document.getElementById("bname").textContent;
    var isbn = window.document.getElementById("isbn").textContent;
    var price = window.document.getElementById("price").textContent;
    alert(bname);
    alert(isbn);
    alert(price);
}

the above 'alert's are displaying the values of the first rows only though i click the button present in the second row.

I tried so many alternatives online but couldn't solve the problem.

Two elements cannot have the same id. An id must be unique within the document. — James Montagne
– James Montagne, Commented Mar 21, 2013 at 14:36
it is right. I tried in this way too. i declared a variable 'i' and used it as below: int i = 0; %> <td id="bname<%=++i>"><%= rs1.getString(1) %></td> .................... Now how can i pass the id which contains a scriptlet tag also, to the Javascript function? — Yashwanth Aluru
– Yashwanth Aluru, Commented Mar 21, 2013 at 14:41

Leftium · Accepted Answer · 2013-03-21 15:34:53Z

2

Never have the same ID twice in one page
concat a unique key, preferably the id of the row, to the id of the TD. Use that calculated id in your code. Should be simple

code:

//assuming 0 is the ID index in the row  
<td id="bname<%= rs1.getString(0) %>"><%= rs1.getString(1) %></td>

<td><input type="button" value="Add to Cart"
           onclick="cart(<%= rs1.getString(0) %>)"></input></td>

...
...
...

function cart(id) {  
    var bname = window.document.getElementById("bname"+id).textContent;
    var isbn = window.document.getElementById("isbn"+id).textContent;
    var price = window.document.getElementById("price"+id).textContent;

    alert(bname);   
    alert(isbn);
    alert(price);
}

edited Mar 21, 2013 at 15:34

Leftium

18.1k6 gold badges74 silver badges110 bronze badges

answered Mar 21, 2013 at 14:42

Itay Moav -Malimovka

53.8k68 gold badges198 silver badges292 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 11:51:56Z

The best solution would be to use class attributes instead of id:

An id is supposed to identify exactly one element per page.
A class identifies multiple elements of the same type, or "class," per page.

You can query a subset of the entire DOM (for example the <tr> that was clicked) for elements with the classes you are interested in. Usually a library like jQuery or Dojo is used to simplify the querying.

If you just want something that works:

HMR's solution is good, but it is a little rigid. It assumes each <td> (bname, aname, isbn...) exists and placed in a certain order.
I have modified Itay's solution below for easy copy-pasting. It works by adding a unique prefix (the isbn) to each id to make it unique:

JSP:

<tr> 
    <td id="<%= rs1.getString(3) %>_bname"><%= rs1.getString(1) %></td>
    <td id="<%= rs1.getString(3) %>_aname"><%= rs1.getString(2) %></td>
    <td id="<%= rs1.getString(3) %>_isbn"><%= rs1.getString(3) %></td>
    <td id="<%= rs1.getString(3) %>_price"><%= rs1.getString(4) %></td>
    <td id="<%= rs1.getString(3) %>_pname"><%= rs1.getString(5) %></td>
    <td id="<%= rs1.getString(3) %>_desc"><%= rs1.getString(7) %></td>
    <td><input type="button" value="Add to Cart"
               onclick="cart('<%= rs1.getString(3) %>_')"></input></td>
</tr>

JavaScript:

function cart(prefix)
{
    var bname = window.document.getElementById(prefix + "bname").textContent;
    var isbn = window.document.getElementById(prefix + "isbn").textContent;
    var price = window.document.getElementById(prefix + "price").textContent;
    alert(bname);
    alert(isbn);
    alert(price);
}

HMR · Accepted Answer · 2013-03-22 00:41:55Z

0

Why not use this, the values you seek are relative to the element that's clicked. Don't need to give id's to any of the elements.

Note that I am passing the button that's clicked to the card function:

 onclick="cart(this)"

Here is the full code.

<!doctype html>
<html lang="en">
    <head> 
        <meta charset="utf-8" />  
        <title>Test the script</title>  
    <script> 
        function cart(button)
        {
            var tds=button.parentNode
              .parentNode.getElementsByTagName("td");
            var bname = tds[0].textContent;
            var isbn = tds[1].textContent;
            var price = tds[2].textContent;
            console.log(bname);
            console.log(isbn);
            console.log(price);
            console.log(tds);
        }
    </script>
    </head>
    <body> 
<h1><font size="3">Title</font></h1>
<form name="f1" id="f1" method="post">
<table border="1">
    <tr>
        <th>Name of the Book</th>
        <th>Author</th>
        <th>ISBN</th>
        <th>Price</th>
        <th>Publication</th>
        <th>Description</th>
    </tr>
    <tr> 
        <td >aname1</td>
        <td >bname1</td>
        <td >isbn1</td>
        <td >price1</td>
        <td >pname1</td>
        <td >desc1</td>
        <td><input type="button" value="Add to Cart" onclick="cart(this)"></input></td>
    </tr>  
    <tr> 
        <td >aname2</td>
        <td >bname3</td>
        <td >isbn4</td>
        <td >price2</td>
        <td >pname2</td>
        <td >desc2</td>
        <td><input type="button" value="Add to Cart" onclick="cart(this)"></input></td>
    </tr>  
    </table>
    </body>
</html>

edited Mar 22, 2013 at 0:41

answered Mar 21, 2013 at 14:47

HMR

39.5k26 gold badges99 silver badges176 bronze badges

4 Comments

HMR Over a year ago

For older versions of IE textContent is innerText I think, so if you want to support that as well you have to check for that.

Yashwanth Aluru Over a year ago

I have so many rows displayed in my jsp. What to do if I have to pass the td elements of the second row if I click the buttin in the second row of the table?

HMR Over a year ago

If you click the button in the second row then the information of the second row will be fetched. In javascript and in Java "this" refers to the current object, in your case the button that's been clicked.

HMR Over a year ago

Sorry, have been using jQuery so much that I forgot that this context is window if you didn't bind the click event using jQuery. Changed my code.

Collectives™ on Stack Overflow

Passing different elements to a Javascript function with same id

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related