Jquery Hidden Field in Table

Question

I was wondering if anyone knew of a way to access a hidden field (by client id) within a table row using jquery.

$("#tblOne").find("tr").click(function() {
            var worker = $(this).find(":input").val();
        });

I find that the above works for a row that has only one input, but I need some help figuring out a way to get the value by the inputs name.

Here's the example of a table row. How would I access the two fields by their id's?

<table id="tblOne">
<tr>
<td>
    <asp:HiddenField id="hdnfld_Id" Text='<% Eval("ID") %>'></asp:HiddenField>
</td>
<td>
    <asp:HiddenField id="hdnfld_Id2" Text='<% Eval("ID2") %>'></asp:HiddenField>
</td>
</tr> 
</table>

Answer 1

With the way you have it setup right now, you could do this:

$('tr td', '#tblOne').eq(0).find(':input').val(); // find input in 1st TD
$('tr td', '#tblOne').eq(1).find(':input').val(); // find input in 2nd TD

Using this you don't have to worry about the input's ClientID.

Answer 2

I normally use a positive lookup to match the id, this method avoids requiring the client id

(id contains foo) $(this).find("input[id*='foo']").val();

Answer 3

You could do it like this:

    $("#tblOne").find("tr").click(function() {
        var election = $(this).find("td").eq(0).html();
        var worker = $(this).find('input[name=theName]').val();
    });

Read through this excellent article 'How to get what you want using jQuery' by Benjamin Sterling.

Answer 4

Why don't you simply use this:

jQuery("#<%=hdnfld_Id.ClientID%>")

Answer 5

<asp:HiddenField id="foo"> generates an <input type="hidden" id="foo"/> does it not? Why don't you just do

$("#foo").val()

?

I think you need to explain what you're trying to do a bit better. If you find that

$(this).find(":input").val();

... only works when you have one input, maybe what you're looking for is this:

$(this).find(":input").each(function() {
  // Prints the value of each input.
  alert($(this).val());
}

But as it stands, your question is not very clear. Try editing your question and take your time to explain exactly what you want.

Answer 6

Not an answer, but I was having incredible difficulty in pulling a hidden field value from within a table cell (using tablesorter on that table of course), so I am so happy to have found this line of code:

$(this).find(":input").val();

and it works wonderfully.

I also use the ".live" function, so it works even on huge tables.

THANK YOU!!!

HLR

Answer 7

I have three tabs each with a Submit button causing post backs. After the click event for the submit button, I want the current tab to persist.

Step 1.

Added an asp:HiddenField inside the tabs div ('tabs' div holds all the three divs that have the content for my tabs).

<asp:HiddenField ID="sel_tab" Value="" runat="server" />

Step 2.

Updated the value of sel_tab with the click event of each button that causes a post back.

protected void cmdSaveDailyMeasure_Click(object sender, EventArgs e)
{
    sel_tab.Value = "0";
}
protected void cmdSaveWeeklyMeasure_Click(object sender, EventArgs e)
{
    sel_tab.Value = "1";
}
protected void cmdSaveMonthlyMeasure_Click(object sender, EventArgs e)
{
    sel_tab.Value = "2";
}

Step 3. In my .js file I have the following code

// Tabs
$(document).ready(function() {
    var iSelectedTab = $(this).find("input[id*='sel_tab']").val();
    if (iSelectedTab == null)
        iSelectedTab = 0;    
    $('[id$=tabs]').tabs({ selected: iSelectedTab });
});

This works even if you are using Master Pages (i am). Don't need the <%=foo.ClientID%> part.