文本框值未使用JavaScript更改

Question

These are different tabs on my page, clicking one of the tabs takes to that section of the page.

<nav>
    <ul>
        <li class="tab-current"><a style="color:red" href="#section-1" class="icon-shop"><span>Home</span></a></li>
        <li><a href="#section-2" class="icon-cup" id="events"><span>Events</span></a></li>
        <li><a href="#section-3" class="icon-food" id="finance"><span>Finance</span></a></li>
        <li><a href="#section-4" class="icon-lab" id="merchandise"><span>Merchandise</span></a></li>
        <li><a href="#section-5" class="icon-truck" id="tasks"><span>Tasks</span></a></li>
        <li><a href="#section-6" class="icon-truck" id="profile"><span>Profile</span></a></li>
    </ul>
</nav>

<section id="section-2" onclick="setTabIndex(2)">
    <!-- content here -->
</section>

<asp:TextBox ID="tabu" runat="server"></asp:TextBox>

function setTabIndex(tab) {
    //store the tab number in a hidden field so you can access it in code behind
    document.getElementById("<% = HiddenField1.ClientID %>").value = tab;
    document.getElementById('tabu').value = tab;
}

Textbox to check if value is being set to the textbox on changing the tab. So document.getElementById('tabu').value = tab; should change the textbox value each time a tab is clicked, right? But its not shown in textbox.

What am I doing wrong? Kindly help out. Thanks

Answer 1

As you're using a runat="server" Web Forms control, ASP.Net will (annoyingly) change the client-side id at runtime. This is why the previous line of your JS code uses the ClientID property of the server control - which is the same technique you need. Try this:

function setTabIndex(tab) {
    document.getElementById("<%= HiddenField1.ClientID %>").value = tab;
    document.getElementById("<%= tabu.ClientID %>").value = tab;
}

Answer 2

I think the client ID from your server controls are also different.

You can see the exact ID of your textbox using developer tool in browser.

Try using,

document.getElementById('tabu').value = tab; in Javascript and

in ASP.NET

<asp:TextBox ID="tabu" runat="server" ClientIDMode="Static"></asp:TextBox> 

same for your hidden field as it's a server side control.