Enabled Button on TextBox change without PostBack in ASP.Net

mbrodie7...

SOLVED CLOSED ACTIVE ANSWERED
User: mbrodie78
Posted: on Aug 09, 2022 11:41 PM
Forum: ASP.Net Web Forms
Answer: 1
Views: 3332
Sample Code: Download

Hi,

Using vs 2019. asp.net (vb)

I'm trying to do multiple things without posting the page like when a user starts typing in a textbox.

currently using

Protected Sub txtShip_TextChanged(sender As Object, e As EventArgs) Handles txtShip.TextChanged
    btnAddShip.Enabled = True
End Sub

I understand I can use autopostback but I want it to be client side.

Thanks.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('#txtShip').on('change', function () {
            $('#btnAddShip').prop('disabled', false);
        });
    });
</script>

<table style="border-width:1px;border-style:solid;width:100%;">
    <tr>
        <th colspan="2">
                    <center>Profile</center>
                </th>
    </tr><tr>
        <td style="width:50%;"><table style="border-width:1px;border-style:solid;width:100%;">
            <tr>
                <td rowspan="6" style="width:50%;"><select size="5" name="ctl00$MainContent$lstShips" id="MainContent_lstShips" style="width:100%;">
 
                </select></td>
            </tr><tr>
                <td style="width:50%;"><input name="ctl00$MainContent$txtShip" type="text" value="New Ship Name" id="MainContent_txtShip" style="width:100%;" /></td>
            </tr><tr>
                <td><input type="submit" name="ctl00$MainContent$btnAddShip" value="Add new ship" id="MainContent_btnAddShip" disabled="disabled" class="aspNetDisabled" style="width:100%;" /></td>
            </tr><tr>
                <td><input type="submit" name="ctl00$MainContent$btnName" value="Change ship name" id="MainContent_btnName" disabled="disabled" class="aspNetDisabled" style="width:100%;" /></td>
            </tr><tr>
                <td><input type="submit" name="ctl00$MainContent$btnDefault" value="Make default ship" id="MainContent_btnDefault" disabled="disabled" class="aspNetDisabled" style="width:100%;" /></td>
            </tr><tr>
                <td><input type="submit" name="ctl00$MainContent$btnStart" value="START" id="MainContent_btnStart" disabled="disabled" class="aspNetDisabled" style="color:Green;font-weight:bold;width:100%;" /></td>
            </tr>
        </table></td><td style="width:50%;"><table style="border-width:1px;border-style:solid;width:100%;">
            <tr>
                <td><span>Name</span><input name="ctl00$MainContent$ctl04" type="text" readonly="readonly" /></td>
            </tr><tr>
                <td><span>Name</span><input name="ctl00$MainContent$ctl06" type="text" readonly="readonly" /></td>
            </tr><tr>
                <td><span>Name</span><input name="ctl00$MainContent$ctl08" type="text" readonly="readonly" /></td>
            </tr>
        </table></td>
    </tr>
</table>

PrinceG

0 6

Reply
ANSWER
User: PrinceG
Replied: on Aug 11, 2022 04:28 AM
Report

Hi mbrodie78

Please refer below sample.

HTML

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('[id*=txtShip]').on('change', function () {
                $('[id*=btnAddShip]').prop('disabled', false);
            });
        });
    </script>
    <div>
    <center>
        <br />
        <asp:Table ID="Table1" runat="server" Width="100%" BorderWidth="1">
            <asp:TableHeaderRow>
                <asp:TableHeaderCell ColumnSpan="2">
                    <center>Profile</center>
                </asp:TableHeaderCell>
            </asp:TableHeaderRow>
            <asp:TableRow>
                <asp:TableCell Width="50%">
                    <asp:Table ID="Table2" runat="server" Width="100%" BorderWidth="1">
                        <asp:TableRow>
                            <asp:TableCell Width="50%" RowSpan="6">
                                <asp:ListBox runat="server" Rows="9" Width="100%" ID="lstShips" />
                            </asp:TableCell>
                        </asp:TableRow>
                        <asp:TableRow>
                            <asp:TableCell Width="50%">
                                <asp:TextBox runat="server" Width="100%" ID="txtShip" Text="New Ship Name" />
                            </asp:TableCell>
                        </asp:TableRow>
                        <asp:TableRow>
                            <asp:TableCell>
                                <asp:Button runat="server" Enabled="false" Width="100%" Text="Add new ship" ID="btnAddShip" />
                            </asp:TableCell>
                        </asp:TableRow>
                        <asp:TableRow>
                            <asp:TableCell>
                                <asp:Button runat="server" Enabled="false" Width="100%" Text="Change ship name" ID="btnName" />
                            </asp:TableCell>
                        </asp:TableRow>
                        <asp:TableRow>
                            <asp:TableCell>
                                <asp:Button runat="server" Enabled="false" Width="100%" Text="Make default ship"
                                    ID="btnDefault" />
                            </asp:TableCell>
                        </asp:TableRow>
                        <asp:TableRow>
                            <asp:TableCell>
                                <asp:Button runat="server" Enabled="false" Width="100%" Font-Bold="true" ForeColor="Green"
                                    Text="START" ID="btnStart" />
                            </asp:TableCell>
                        </asp:TableRow>
                    </asp:Table>
                </asp:TableCell>
                <asp:TableCell Width="50%">
                    <asp:Table ID="Table3" runat="server" Width="100%" BorderWidth="1">
                        <asp:TableRow>
                            <asp:TableCell>
                                <asp:Label ID="Label1" runat="server" Text="Name" /><asp:TextBox ID="TextBox1" runat="server"
                                    ReadOnly="true" />
                            </asp:TableCell>
                        </asp:TableRow>
                        <asp:TableRow>
                            <asp:TableCell>
                                <asp:Label ID="Label2" runat="server" Text="Name" /><asp:TextBox ID="TextBox2" runat="server"
                                    ReadOnly="true" />
                            </asp:TableCell>
                        </asp:TableRow>
                        <asp:TableRow>
                            <asp:TableCell>
                                <asp:Label ID="Label3" runat="server" Text="Name" /><asp:TextBox ID="TextBox3" runat="server"
                                    ReadOnly="true" />
                            </asp:TableCell>
                        </asp:TableRow>
                    </asp:Table>
                </asp:TableCell>
            </asp:TableRow>
        </asp:Table>
    </center>
    </div>
</asp:Content>

Screenshot

Enabled Button on TextBox change without PostBack in ASP.Net

Company

Explore

Follow us

Contact Us