Using TextBox TextChanged event to enable or disable a button control in asp.net

Question

I am using an asp TextBox control with its TextChanged event and my goal is to capture text as a user enters it. If there are one or more characters entered, I would like a button control to be enabled without the user having to leave the TextBox control.

My source code for the TextBox on the aspx page is

<asp:TextBox ID="NewSpendingCategoryTextBox" MaxLength="12" runat="server" 
     AutoPostBack="True" 
     OnTextChanged="NewSpendingCategoryTextBox_TextChanged" 
     ViewStateMode="Enabled" >
</asp:TextBox>

and my source code on the code behind page is

Protected Sub NewSpendingCategoryTextBox_TextChanged(sender As Object, e As System.EventArgs) Handles NewSpendingCategoryTextBox.TextChanged
    Dim strSpendingCategoryTextBox As String = Nothing
    strSpendingCategoryTextBox = NewSpendingCategoryTextBox.Text
    If strSpendingCategoryTextBox.Length <= 0 Then
        Me.NewSpendingCategoryInsertButton.Enabled = False
    Else 'strSpendingCategoryTextBox.Length > 0
        Me.NewSpendingCategoryInsertButton.Enabled = True
    End If 'strSpendingCategoryTextBox.Length <= 0
End Sub

So it appears I have to use javascript to enable or disable the insert button. Can someone guide me on how to get an element within a table? The table sits in a Panel as well.

below is the aspx code...

<asp:Panel ID="AddSpendingCategoryPanel" Visible="false" runat="server">
    <table class="AddNewTable">
        <tbody>
            <tr>
                <td>
                    <asp:Label ID="lblSpend" runat="server"  
                        Text="Spending Category:">
                    </asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="txtSpend" MaxLength="12"  
                        runat="server" 
                        AutoPostBack="True"
                        OnTextChanged="txtSpend_TextChanged"
                        OnKeyDown="return CheckSpendTextBoxValue()"
                        ViewStateMode="Enabled" >
           </asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Button CssClass="frmbtn" ID="btnInsertSpend"  
                        runat="server" Text="Insert" />
                </td>
                <td>
                    <asp:Button CssClass="frmbtn" ID="btnCancelSpend"  
                        runat="server" Text="Cancel"
                        CausesValidation="False" />
                </td>
            </tr>
        </tbody>
    </table>
</asp:Panel>

OneFineDay · Answer 1 · 2015-04-07T18:39:57.653

0

Run this code in the OnKeyPress event or consider JavaScript. The textbox does not fire the Text_Changed event til Tab or Enter are used.

Simplify the boolean check.

Me.NewSpendingCategoryInsertButton.Enabled = (NewSpendingCategoryTextBox.Text.Length <> 0)

edited Apr 07 '15 at 18:39

answered Apr 07 '15 at 16:37

OneFineDay

9,004
3
26
37

Actually I should clarify that my goal is to get the TextChanged event to fire when text changes in the textbox. Right now it only fires when the control looses focus. – Ropeh Apr 07 '15 at 18:20

score 0 · Answer 2 · edited May 23 '17 at 10:24

0

I'm not sure exactly how you would do it. But the ASP.NET code is executed on the server that is hosting the web page.

I'd highly recommended doing it on JavaScript which can be run client side. Hopefully this article is of use to you.

How to check if a textbox is empty using javascript

edited May 23 '17 at 10:24

Community

1
1

answered Apr 07 '15 at 21:22

Ryan Thomas

1,724
2
14
27

Given that I may have to use Javascript to enable or disable the button, can someone guide me on how to retrieve an element that is within a Table and also withing a Panel? – Ropeh Apr 09 '15 at 19:12

Using TextBox TextChanged event to enable or disable a button control in asp.net

2 Answers2