How to use jQuery to clear TextBox on drop down list change

Question

I'm trying to clear an ASP.NET Textbox, set to MultiLine (textarea in other words) when the user changes a project, here is the drop down list:

<label id="Label1" class="lbl">Project</label>

<asp:DropDownList ID="ddlProjectList" DataTextField="ClientProjectTitle" 
DataValueField="ProjectID" AppendDataBoundItems="true" CssClass="ddl"
AutoPostBack="true" ValidationGroup="Projects" runat="server">
    <asp:ListItem Text="-- select --" Value="0"></asp:ListItem>
</asp:DropDownList>

<asp:RequiredFieldValidator ID="rfvProjectList" ControlToValidate="ddlProjectList" 
InitialValue="0" Text="(required)" ErrorMessage="Select a project" 
Display="Dynamic" ValidationGroup="Projects"
CssClass="error" runat="server"></asp:RequiredFieldValidator>

Here is the jQuery:

<script type="text/javascript">
    $(document).ready(function() {
        $('select[name*="ddlProjectList"]').change(function() {
            $('textarea[name*="txtDescription"]').attr('value', '');
        });
    });
</script>

Before people respond, I have tried it with just .val(''); - and here is the textbox I'm trying to clear:

<label class="lbl">Description</label>

<asp:TextBox ID="txtDescription" TextMode="MultiLine" Rows="5" 
CssClass="long-textbox-ml"  runat="server"></asp:TextBox>

<asp:RequiredFieldValidator ID="rfvDescription" ControlToValidate="txtDescription"
Text="(required)" ErrorMessage="Enter a description" Display="Dynamic"
ValidationGroup="Projects"
CssClass="error" runat="server"></asp:RequiredFieldValidator>

Any ideas why it is not working? I have stepped through it in Chrome and the event is firing.

Answer 1

You have 'AutoPostBack="true"' on the dropdown list. This will fire a form post back to the same page, causing the page to reload. Your JQuery event is trying to fire before the reload happens, but once that reload is triggered, you'll lose all the work that the JQuery function did.

Update: Either remove the 'AutoPostBack=true' or set the textfield's "Text" attribute to an empty string in the code behind when that event is fired (not sure from your question if there's a named function getting fired when that dropdown changes)

tbNumAcres.Text = "";

Answer 2

Try this:

$("#<%=ddlProjectList.ClientID%>").change(function(e){
    $("#<%=txtDescription.ClientID%>").text(""); //or val("")
});

Also, I don't know what you're doing with AutoPostBack="true", but if you're not using it for anything I would remove it.

Answer 3

Assuming you have your selector correct and the event actual fires, try this instead...

$(document).ready(function() {
    $('select[name*="ddlProjectList"]').change(function() {
        $('#txtDescription').val('');
    });
});

I think your selector for txtDescription is failing.

EDIT: Based on Tariqulazam's comment...

$(document).ready(function() {
    $('select[name*="ddlProjectList"]').change(function() {
        $('#<%=txtDescription.ClientID%>').val('');
    });
});

Answer 4

We would need to see more of the page, or maybe even its rendered version, but if I had to guess, your selector is not finding the element like you think it is.

Your best bet in my opinion is to use the console in Chrome, or the Firebug console and paste in your selector:

$('textarea[name*="txtDescription"]')

The console(s) should highlight or return a listing of the elements which match that selector. If none, that is your problem...

Here is a random SO post that has a screen grab of the console if it helps:

testing jQuery statements in Chrome JavaScript console

Answer 5

Is there a reason why you're using $('textarea[name*="txtDescription"]') instead of just using $('#txtDescription') ?

.val("") should work, as well as attr('value', '') or .empty(), so the problem here is probably that your selector doesn't work properly.

Answer 6

Try:

$(document).ready(function() {   
    $('[id$=ddlProjectList]').change(function() {  
        $('[id$=txtDescription]').val('');  
    });  
});  

EDIT
As Graham says, set the ddl AutoPostBack to false. Otherwise the jQuery handler will not work as you expected.

Also, you could use console.log to see if your handler is being fired (press F12 in Chrome to access the developer tools, and click the console button)

$(document).ready(function() {   
    $('[id$=ddlProjectList]').change(function() {  
        console.log("I'm in!");
        $('[id$=txtDescription]').val('');  
    });  
});

Answer 7

Did it in C# instead:

if (!IsPostBack)
    {
        GetLiveProjects();
        GetClients();
        GetWeekRows();

        //if (Request.QueryString["SelectedDate"] != null)
        //{
        //    GetItineryForDay(Convert.ToDateTime(Request.QueryString["SelectedDate"]));
        //}
        //else
        //{
        //    DateTime dt = DateTime.Now;
        //    GetItineryForDay(dt);
        //}
    }
    else
    {
        txtDescription.Text = string.Empty;
    }

Utilising the postback of the drop down list - thanks for your help everyone!