Having trouble getting hidden field value with jquery on asp.net aspx page

Question

I have a hidden field on my aspx page that I want to use to store the href value of the currently selected tab (using bootstrap tabs). One of the tabs has some search functionality and when the postback happens from the search, the page loads the default active tab. I've tried finding many solutions for this, but none seem to work. This solution looked promising, but the hidden field wasn't in the Request.Form.

So, I started messing around with my own solution, where when a tab is clicked, set the value of the hidden field to the href attribute of the clicked tab, and when the button is clicked, store the value in the session. My problem is this: I can't for the life of me find a way to get/set the value of the hiddenfield. After reading many similar issues people had here on stack, I'm starting to wonder if I'm trying to get/set the value when it isn't in the DOM.

I know I'm good at first using $(document).ready() but I'm not sure what happens when within that I have a click event like $(myTab a).click(). Within this event, is it possible I'm trying to get elements that are no longer in the DOM? I have tried many many many different ways, and I keep getting null or undefined when trying to do this. To end this rant/question, I'll post my code with all the different ways I've been trying to do this.

<div id="maintabs" runat="server">
    <ul class="nav nav-tabs" id="myTab">
        <li class="active"><a href="#home" data-toggle="tab">Main</a></li>
        <li><a href="#Activity" data-toggle="tab">System Notes</a></li>
        <li><a href="#Guidelines" data-toggle="tab"><%= SBL.GetConsiderations(CompanyID) %></a></li>
        <li><a href="#Steps" data-toggle="tab">System Steps</a></li>
        <li><a href="#Accepted" data-toggle="tab">Employees Accepted</a></li>
        <li><a href="#Files" data-toggle="tab">Locate A File</a></li>
    </ul>
<div class="tab-content">
.
.
.
<div class="hidWrapper">
    <asp:HiddenField ID="hidLastTab" Value="0" runat="server" />
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $("#myTab a").click(function() {
            // This is basically what I'm trying to accomplish
            $("#hidLastTab").val($(this).attr("href").replace("#", ""));

            // So first test... 
            console.log($(this).attr("href").replace("#", ""))  // Console logged Files as expected, so this is good

            // My next test was then this
            console.log($("#hidLastTab").val());  // Console logged undefined

            // Next attempts
            console.log($("#hidLastTab").value);  // still undefined

            var myHidden = document.getElementById('<%= hidLastTab.ClientID %>');
            console.log(myHidden.value);  // Cannot read property 'value' of null

            var myHidden = document.getElementById('<%= hidLastTab.ClientID %>')
            console.log(document.getElementById(myHidden));  // null
            console.log(document.getElementById(myHidden).value);  // Cannot read property 'value' of null

            var myHidden = '<%= hidLastTab.ClientID %>';  // ctl00_ContentPlaceHolder1_hidLastTab
            console.log(myHidden);  // null
            console.log(document.getElementById(myHidden));  // Cannot read property 'value' of null
            console.log(document.getElementById(myHidden).value); // Cannot read property 'val' of null

            // per one recommendation, a div wrapper
            console.log($(".hidWrapper input[type=hidden]").val());  // undefined

            // Another recommendation
            console.log($("[id$=_hidLastTab").attr['value']); // undefined
        })
    })
<script>

Please if anyone can help me out here that would be sooooo amazing, as this is driving me crazy! I even tried doing the same thing with a textbox since at least I know I should be able to getElementById for that (I don't really know how hidden fields work, and since I can't find it in the markup, I wasn't 100% sure getElementById would work like other elements), and even the textbox was returning null when doing getElementById("txtNotes") AND getElementById('<%= txtNotes.ClientID %>'). This is what lead me to believe that maybe it is a problem with the elements not existing with the DOM at that time.

Thanks so much in advance! Andy

Is all of your code inside of this tag on your page? `` I assume you're using master pages. — Rick S, Jun 24 '15 at 18:50
Yes I am using a master page, and the elements returning null from getElementById are all within the tags. — Andy Giebel, Jun 24 '15 at 18:55

score 1 · Answer 1 · answered Jun 24 '15 at 18:19

1

Should $(myTab a).click(function() be $("#myTab a").click(function() ? I tried your solution with Jquery 1.11.3, it works as expected. If you launch inspector in Google Chrome, you could see the click event never bind to those a element as JQuery can't find $(myTab a).

answered Jun 24 '15 at 18:19

Kane Wang

106
1
7

Yes, that was actually just a typo though, in my solution it is as you mentioned $("myTab a"), and I'm certain the event fires since I'm getting output in the console. I'm also using jquery 1.11.3, that's very odd that it's working for you. Would you mind posting whatever you have that's working, as opposed to all my trial and fails i listed above? Thanks – Andy Giebel Jun 24 '15 at 18:25
I'm sorry, I'm using 1.11.3 in a different project. This is using 1.9.1. Do you think this could be the problem? Thanks – Andy Giebel Jun 24 '15 at 18:43
using 1.9.1 is fine too, to isolate the issue, I would suggest you remove the bootstrap javascript and keep JQuery only and see if it makes difference, I think what you have done ($("#hidLastTab").val($(this).attr("href").replace("#", ""));) is correct. – Kane Wang Jun 24 '15 at 19:19

score 1 · Answer 2 · edited May 23 '17 at 12:29

1

I would try changing value = "0" to Value="". Your Jquery should look like

document.getElementById('<%=hidLastTab.ClientID%>').value = "";

Also take a look here https://stackoverflow.com/a/8965804/4581384

edited May 23 '17 at 12:29

Community

1
1

answered Jun 24 '15 at 18:21

Leonardo Wildt

2,529
5
27
56

Thanks, but this didn't do it. I don't think it has to do with the val(), value, Value though, since I'm getting null returned from the document.getElementById(); – Andy Giebel Jun 24 '15 at 18:27
Thanks again, but I still don't necessarily think this will help. My problem is with changing the value of the hidden value, where that is trying to trigger an event once the change happens. – Andy Giebel Jun 24 '15 at 18:54

score 1 · Answer 3 · answered Jun 24 '15 at 18:39

1

you could address it differently like this too

$('.hidWrapper input[type=hidden]').val()

answered Jun 24 '15 at 18:39

johnny 5

19,893
50
121
195

That was one of the ways I tried, console.log($(".hidWrapper input[type=hidden]").val()); gave me undefined – Andy Giebel Jun 24 '15 at 18:41
what does the html look like in there can you post it? – johnny 5 Jun 24 '15 at 18:56
$('.hidWrapper:first-child').val() – johnny 5 Jun 24 '15 at 18:58
I'll edit this with more of the content from the aspx page after trying your last suggestion. Thanks! – Andy Giebel Jun 24 '15 at 19:03

score 1 · Answer 4 · answered Jun 24 '15 at 19:21

Okay, so I got this to work, but I'm not 100% sure what the problem was. Thanks to everyone who answered, and especially thanks to johnny 5 for asking for my markup as that got me thinking a little bit.

Basically, I moved the hidden field so that it's in the same div as the tags that trigger the click. I'm not sure if it needs to be, but my thoughts were that depending on the tab that was clicked, maybe certain elements aren't accessible due to however bootstrap shows and hides the data. Moving the HiddenField into the same div seemed to work, though as I said I'm not certain it necessarily needs to be there.

After moving it, the following jquery allowed me to change the value, and the console.log confirmed that it worked. Thanks again to everyone who answered!

$(document).ready(function() {
    $("#myTab a").click(function () {
        document.getElementById('<%= hidLastTab.ClientID %>').value = $(this).attr("href").replace("#", "");
        console.log(document.getElementById('<%= hidLastTab.ClientID %>').value);
    })
})

Glad things worked out. Best way to thank is upvote and mark a response as an answer. ;) — Leonardo Wildt, Jun 24 '15 at 19:44
Will be glad to :D only mark one as an answer? If so, do I mark mine, or whoever whichever seemed the most helpful? — Andy Giebel, Jun 24 '15 at 20:54
If the answer you submitted is the one that worked i would mark that one. If not then you should mark the most helpful one. — Leonardo Wildt, Jun 25 '15 at 12:05

Having trouble getting hidden field value with jquery on asp.net aspx page

4 Answers4