Unable to clear textbox value

Question

gahhon 13 Junior Poster

11 Years Ago

HTML Markup

        <table>
            <tr>
                <td><asp:Label runat="server" Text="Subject: " /></td>
                <td><asp:TextBox ID="txtSubject" runat="server" />
                    <asp:RequiredFieldValidator runat="server" ErrorMessage=" *" ControlToValidate="txtSubject" Font-Size="10pt" ForeColor="Red" />
                </td>
            </tr>
            <tr></tr><tr></tr><tr></tr>
            <tr>
                <td><asp:Label runat="server" Text="Messages: " /></td>
                <td><asp:TextBox ID="txtMessage" runat="server" TextMode="MultiLine" Height="100px" Width="18em" />
                    <asp:RequiredFieldValidator runat="server" ErrorMessage=" *" ControlToValidate="txtMessage" Font-Size="10pt" ForeColor="Red" />
                </td>
            </tr>
            <tr></tr><tr></tr><tr></tr>
            <tr>
                <td><asp:Button ID="btnSubmit" runat="server" Text="Submit" CssClass="Button" OnClick="SubmitFeedback" /></td>
                <td><asp:Button ID="btnReset" runat="server" Text="Reset" CssClass="Button" CausesValidation="false" ClientIDMode="Static" /></td>
            </tr>
        </table>

.JS

$(document).ready(function() {
    $('#btnReset').click(function (e) {
        clearTextBox(e);
    });
});

function clearTextBox(e) {
    e.preventDefault();
    $('#txtSubject').val("");
    $('#txtMessage').val("");
}

Both of the textbox value if unable to reset.
What i done wrongly in my code?

javascript

3 Contributors
3 Replies
300 Views
4 Hours Discussion Span
Latest Post 11 Years Ago Latest Post by gahhon

stbuchok

11 Years Ago

Set ClientIDMode on your textboxes to static, otherwise the id that gets rendered looks like ctl_blahblahblah...

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

JorgeM 958 Problem Solver Team Colleague Featured Poster · Answer 1 · 2013-10-18T17:14:47+00:00

I tested your code. It worked as expected. I do agree that you may consider adding the ClientIDMode Attribute so that asp.net renders the HTML element with that ID.

I did not add it in my example and when I looked at the HTML source code, ASP.NET used the same IDs without having to use ClientIDMode. However, as a rule of thumb, whenever I integrate javascript/jQuery, I always set this attribute.

Here is my complete example... maybe you forgot to include the reference to the jQuery library in your <head> section. In the example below, i did not include the onclick event for your submit button...

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Demo</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
<table>
            <tr>
                <td><asp:Label ID="Label1" runat="server" Text="Subject: " /></td>
                <td><asp:TextBox ID="txtSubject" runat="server" />
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage=" *" ControlToValidate="txtSubject" Font-Size="10pt" ForeColor="Red" />
                </td>
            </tr>
            <tr></tr><tr></tr><tr></tr>
            <tr>
                <td><asp:Label ID="Label2" runat="server" Text="Messages: " /></td>
                <td><asp:TextBox ID="txtMessage" runat="server" TextMode="MultiLine" Height="100px" Width="18em" />
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage=" *" ControlToValidate="txtMessage" Font-Size="10pt" ForeColor="Red" />
                </td>
            </tr>
            <tr></tr><tr></tr><tr></tr>
            <tr>
                <td><asp:Button ID="btnSubmit" runat="server" Text="Submit" CssClass="Button"  /></td>
                <td><asp:Button ID="btnReset" runat="server" Text="Reset" CssClass="Button" CausesValidation="false" ClientIDMode="Static" /></td>
            </tr>
        </table>
    </form>
    <script>
        $(document).ready(function () {
            $('#btnReset').click(function (e) {
                clearTextBox(e);
            });
        });
        function clearTextBox(e) {
            e.preventDefault();
            $('#txtSubject').val("");
            $('#txtMessage').val("");
        }
    </script>
</body>
</html>

gahhon 13 Junior Poster · Answer 2 · 2013-10-18T19:43:09+00:00

Problem solved by adding both textbox ClientIDMode="Static" Thanks for in advance