Textbox value not changing using 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

try innerHTML also the nav tag is never closed.

Kevin Kloet
– Kevin Kloet

2016-11-03 08:07:16 +00:00
Commented Nov 3, 2016 at 8:07 — Kevin Kloet
– Kevin Kloet, Commented Nov 3, 2016 at 8:07

Rory McCrossan · Accepted Answer · 2016-11-03 08:07:14Z

2

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;
}

answered Nov 3, 2016 at 8:07

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sanish Joseph · Accepted Answer · 2016-11-03 08:13:04Z

0

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.

answered Nov 3, 2016 at 8:13

Sanish Joseph

2,2763 gold badges18 silver badges33 bronze badges

Collectives™ on Stack Overflow

Textbox value not changing using javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related