Question

My table is :

<script type="text/javascript">
 $(".icon_add").live("click", function(e) {
                e.preventDefault();
                var $link = $(this);
                var docid = $($(this).parent().children("input[type=hidden][id=DocId]")[0]).val();
                var doctitle = $($(this).parent().children("input[type=hidden][id=DocTitle]")[0]).val(); // For getting the value of 'DocTitle' - undifined
                alert(doctitle);
                var grpid = $('#BldGrpId').val();
                var contents = '<li><span class="remove_item"><a href="#"> &nbsp;</a>' + doctitle + '</li>';
                $("#LstBldDoc").append(contents);
                $("#LstDocTemp tr[id='" + docid + "']").remove();
                $.post("/BuildGroup/EditDocTempForBldGrp", { docId: docid, bldGrpId: grpid });
            });
   </script>
<table id="LstDocTemp" class="grid_view" border="0" cellpadding="0" cellspacing="0">
                <tbody>
                    <tr>
                        <th class="selct_column" align="left">
                            &nbsp;
                        </th>
                        <th class="selct_column" align="left">
                            <input name="checkbox6" id="chkSelectAll" type="checkbox" />
                        </th>
                        <th class="doc_title_1" align="left">
                            Document title
                        </th>
                        <th class="description" align="left">
                            Description
                        </th>
                        <th class="revision" align="center">
                            Revision
                        </th>
                        <th class="part_no" align="left">
                            Parts name
                        </th>
                        <th class="issue_no" align="center">
                            Issue
                        </th>
                        <th class="actions" align="center">
                            Actions
                        </th>
                    </tr>
                    <% int slNo = 1; %>
                    <%foreach (var item in Model)
                      { %>
                    <tr id="<%= Html.Encode(item.DocId) %>">
                        <td>
                            <%--<%= slNo %>--%>
                        </td>
                        <td>
                            <input type="checkbox" name="chkItem" class="chk" id="chkbox_<%=Html.Encode(item.DocId) %>" />
                        </td>
                        <td>
                            <%= Html.Hidden("DocTitle", item.DocTitle)%>
                            <a href='<%= Url.Action("DetailsDocumentTemplate", "Document", new { id = item.DocId })%>'>
                                <%=Html.Encode(item.DocTitle) %></a>
                        </td>
                        <td align="left">
                            <%--<%= Html.Hidden("DocDesc", item.DocDesc)%>--%>
                            <%= Html.Encode(item.DocDesc) %>
                        </td>
                        <td align="center" class="dark_highlight">
                            <%--<%= Html.Hidden("DocRevision", item.DocRevision)%>--%>
                            <%= Html.Encode(item.DocRevision) %>
                        </td>
                        <td align="left">
                            <%= Html.Hidden("PartListId", item.PartListId)%>
                            <%--<%= Html.Hidden("PartNo", item.PartNo)%>--%>
                            <%= Html.Encode(item.PartNo) %>
                        </td>
                        <td align="center" class="light_highlight">
                            <%--<%= Html.Hidden("IssueNo", item.IssueNo)%>--%>
                            <%=Html.Encode(item.IssueNo) %>
                        </td>
                        <td align="center">
                            <%= Html.Hidden("DocId", item.DocId)%>
                            <a class="icon_add" title="Add">Add</a>
                        </td>
                    </tr>
                    <%slNo++;
                      } %>
               </tbody>
            </table>

Here the alert(doctitle); is poping “undefined”. I need to get value of DocTitle (hidden field) when “addSelected” is clicked.

Please can anyone help me out of this??

Answer 1

You cannot use the same ID multiple times – but apparently you are doing that since you are using a static id in a loop. Doing so basically breaks everything – you cannot expect selectors to work properly with duplicate IDs.

After fixing this, the following code should work to get the value of the hidden field:

$link.closest('tr').find('input:hidden[name=DocTitle]').val();

Explanation: First climb up the DOM tree starting at $link until the current element is <tr>. Then search for hidden input fields with the given name and get its value.