CODEWITHSUNDEEP
c#javascriptasp.net
user1758415
user1758415

Reputation: 371

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

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.

Upvotes: 2

Views: 38780

Answers (4)

holldollar
holldollar

Reputation: 11

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>

Upvotes: 1

Some_Yahoo
Some_Yahoo

Reputation: 509

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>

Upvotes: 3

Adrian Wragg
Adrian Wragg

Reputation: 7401

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.

Upvotes: 10

Dai
Dai

Reputation: 155145

<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.

Upvotes: 4

Related Questions