Question

Say I have a table html like so and jquery.

I want to find the value of groupid that have in Save click.

I am getting undefined value

<table border="0" id="tableJoinList" cellpadding="4" cellspacing="5">
<tr><td colspan="3" align="left" style="padding-bottom:7px">
    <img src="../../Content/Images/doublelinegray.jpg" alt="doublelinegray.jpg" width="480px" height="4px" />
</td></tr>
    @foreach (var item in Model.Groups)
    {
        <tr>
            <td>
                @Html.ActionLink("Join", "Join", new { id = item.GroupID }, new { @class = "Join" })
                @Html.Hidden("groupid", item.GroupID, new { @class = "groupid" })
            </td>
            <td align="left">
                @item.GroupName
            </td>
            <td>
                @item.DateAdded
            </td>
        </tr>
    }
<tr><td colspan="3" align="left">
    <img src="../../Content/Images/doublelinegrayreverse.jpg" alt="doublelinegrayreverse.jpg" width="480px" height="4px" />
</td></tr>
</table>

---

<script type="text/javascript">
$(function () {
    $(".Join").live("click", function () {
        var html = "<tr><td colspan='3'>Enter Password: &nbsp;&nbsp;<input type='password' class='pwd' />";
        html += "&nbsp;&nbsp;<input type='button' class='Save' value='Save' /></td></tr>";

        $(this).closest("tr").after(html);

        $(".Save").live("click", function () {
            alert($(this).siblings(".pwd").val());
            var json = { Password: $(this).siblings(".pwd").val(), GroupID: $(this).prev("tr").find(".groupid").val() };
            alert($(this).parent("tr").prev("tr").children(".groupid").val());
            return false;
            $.ajax({
                url: "/Group/ConfirmPassword",
                type: "POST",
                dataType: 'json',
                data: JSON.stringify(json),
                contentType: "application/json; charset=utf-8",
                success: function (result) {
                    if (result.Success == true)
                        window.location.href = result.Url;
                    else
                        alert(result.ErrorMessage);
                    return false;
                }
            });
        });
        return false;
    });
});
</script>

Answer 1

Ok, I found the problem. Using .parent("tr") only goes up one level in the DOM, the way it’s written is if the parent isn’t a “tr” (which is it actually a “td” in this case), ignore the rest. Also .children() only goes down one level, you’ll need to use .find() instead.

So your alert should look like this:

alert( $(this).closest("tr").prev("tr").find(".groupid").val() );

Here is a basic demo.