asp:TextBox not cooperating with javascript

Question

I am trying to fill TextBox on event of two buttons.

<div class="numbers-row">
 <div onclick="var result = document.getElementById('qty'); var qty = result.value; if( !isNaN( qty ) &amp;&amp; qty > 0 ) result.value--;return false;" class="dec qtybutton"><i class="fa fa-minus">&nbsp;</i></div>

 <asp:TextBox ID="qty" runat="server" class="qty" title="qty" maxlength="12" name="qty"></asp:TextBox>

 <div onclick="var result = document.getElementById('qty'); var qty = result.value; if( !isNaN( qty )) result.value++;return false;" class="inc qtybutton"><i class="fa fa-plus">&nbsp;</i></div>
</div>

Image contains two buttons. On Onclick event minus button decremented the value and plus button increment the value, but the value is not reflecting on TextBox. But if i use html textbox like <input type="text" class="qty" title="Qty" value="1" maxlength="12" id="qty" name="qty"/> it works fine

You know it works OK with an input tag. What's the id attribute of the text box in production? Does it prepend any other info? — Sean
– Sean, Commented May 5, 2018 at 1:31

Gagan Deep · Accepted Answer · 2018-05-05 04:16:40Z

1

Asp.Net chnages the ID of the server controls to ensure unique IDs for elements on a webpage. if you are to use the same ID use ClientIDMode="Static" inside your asp:TextBox. or your may get the input reference in javascript by using

document.getElementById('<%=qty.ClientID%>')

answered May 5, 2018 at 4:16

Gagan Deep

1,51911 silver badges13 bronze badges

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

1 Comment

Gagan Deep Over a year ago

Welcome Mohit... you may accept the answer if it was helpful.

Sean · Accepted Answer · 2018-05-05 01:45:43Z

1

If I recall correctly, ASP.NET will add additional identifiers to ensure that the ID is unique. When it's rendered on the client the ID will look more like ctl00$ContentPlaceHolder1$CustomUserControl1$qty. You can read more about this naming convention in the ASP.NET Web Server Control Identification docs.

To solve your problem, you can:

use a CSS attribute selector if you know that the id ends with qty, like document.querySelector('[id$="$qty"]')
use the exact ID as it is rendered (flakier)
change the ASP.NET naming convention

answered May 5, 2018 at 1:45

Sean

1,2999 silver badges17 bronze badges

1 Comment

zgood Over a year ago

also look into ClientIDMode="Static" on your web form control

Collectives™ on Stack Overflow

asp:TextBox not cooperating with javascript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related