How to change the value of an asp:textbox from javascript

Question

I have an asp:textbox

<asp:textbox ID="NewName" runat="server" />

and when a user clicks the "Cancel" button, I want to erase whatever is in that text box by making the value just be "". If it were a an input field of type text, I could just do this in javascript:

document.getElementById('NewName').value= "";

But I can't just do this because it is an asp:textbox.

Answer 1

When your asp:textbox is rendered to the UI, then yes, it is just an input field of type text. The only part that may be an issue is the ID, but that can be set using ClientIDMode:

<asp:textbox ID="NewName" runat="server" ClientIDMode="Static" />

renders to:

<input type="text" id="NewName" />

and thus the JavaScript you use should work perfectly.

Answer 2

<asp:TextBox> renders to an <input type="text"> which you can use as you would, the only complication is the id="" attribute is rewritten, but you can do this:

document.getElementById("<%= NewName.ClientID %>").value = "";

Assuming that this script is in the same page as the textbox. If this is in a referenced <script src=""> then you'll need to use a global script variable of the element's ID.

Answer 3

Try setting the textbox's ClientIDMode to Static

That way the javascript should be able to find them with the same ID as in ASPX.

Here a whole test page

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script type="text/javascript">
    function ClearTB1() {
        document.getElementById("TextBox1").value="";
    }
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

    <p>
        <asp:TextBox ID="TextBox1" runat="server" Text="test" ClientIDMode="Static"></asp:TextBox><br />
        <asp:TextBox ID="TextBox2" runat="server" Text="test" ClientIDMode="Static"></asp:TextBox><br>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="ClearTB1()"
            CausesValidation="False" UseSubmitBehavior="False" /><br />
    </p>
</asp:Content>

Answer 4

I had the same problem. I solved it once I remembered there is a mangling going on with asp.net on the Ids.

within my aspx, i had:

<input type="text" id="sessSubs"/>

further down, within a gridview (hence the use of "class" instead of "id"), i had a column which had an asp:TextBox:

<asp:TextBox runat="server" class="paid" />

once i recalled the id mangling issue, it was just a case of changing the way i referenced the textbox:

<script type="text/javascript">
$(document).ready(function() {
  function updateSubs()
  {
    var sub = parseFloat($('[id$=sessSubs]').val());
    $('.paid').val(sub);
  }
$(document).on('change, keyup', '[id$=sessSubs]', updateSubs);
});
</script>