How to display values in asp:textbox using javascript

Question

Wanted to display data in asp:textbox using JavaScript. When I am using HTML textbox the value is displayed on the text box. But data is not displayed when using asp:Textbox.

function SearchDealer()
{
    $.ajax(
    {
        async: false,
        type: "POST",
        url: "DealerDetails.aspx/GetDealerDetails",
        data: "{DlrId:'" + dealerID + "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data)
        {  
            //This is a html text box so value is dsplayed.
            document.getElementById('txt_sapcode').value = data.d.sapcode;

            //No values displayed in this asp:textBox
            document.getElementById('tex_dealername').value = data.d.DealerName;
            document.getElementById('txt_addr1').value = data.d.Add1;
        },
        error: function ()
        {
            alert("Failed to update details.");
        }
    });
    srchflg = true;
}

CodingIntrigue · Accepted Answer · 2014-01-14 11:30:05Z

2

asp:Textbox controls generate unique IDs, so this:

<asp:Textbox ID="myTextBox" runat="server" Text="Hello, World" />

Could generate something like this:

<input type="text" id="MyControl_myTextBox" value="Hello, World" />

In order to get the ID produced by ASP.NET, you can use the ClientID property inside your javascript:

document.getElementById('<%=myTextBox.ClientID%>').value;

So from your example:

document.getElementById('<%=tex_dealername.ClientID%>').value;

If your SearchDealer function is in an external javascript file, you will not have access to the ClientID property, so you will need to pass it from your ASP.NET page:

<!-- This file contains your SearchDealer function -->
<script src="externalFile.js"></script>
<!-- Call SearchDealer with a parameter from your .NET page -->
<script>
    SearchDealer(document.getElementById('<%=tex_dealername.ClientID%>').value);
</script>

Your function definition would then need to be declared as:

function SearchDealer(dealerName) {
    // Do something with dealerName
}

edited Jan 14, 2014 at 11:30

answered Jan 14, 2014 at 11:16

CodingIntrigue

79k32 gold badges176 silver badges178 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nunners Over a year ago

Small note : This will not work for Javascript that is not included inside the .ASPX page at compile time. (i.e. In an External JS File)

Satinder singh · Accepted Answer · 2014-01-14 11:59:28Z

1

Using ASP.NET controls, gives you a unique ID generated on the serverside , your id look like this ctl00_contentPlaceHolder_tex_dealername

Client side code :

$("input[id$='tex_dealername']").val(data.d.DealerName);  //option 1
$('<%= tex_dealername.ClientID %>').val(data.d.DealerName); //option 2

or if you assigned any unique class so call by class name

$('.yourClassName').val(data.d.DealerName);

edited Jan 14, 2014 at 11:59

answered Jan 14, 2014 at 11:26

Satinder singh

10.2k18 gold badges64 silver badges102 bronze badges

1 Comment

Satinder singh Over a year ago

@RGraham: downvote accepted, but as OP used $.ajax this clearly indicate jquery lib are there so whats harm in writing with jquery syntax

Rahul · Accepted Answer · 2014-01-15 06:39:31Z

1

For Html control use : $("#TextboxId").val("Value");

For Asp.net textbox control use : $("[id$=TextboxId]").val("Value");

answered Jan 15, 2014 at 6:39

Rahul

212 bronze badges

Comments

Anh Tú · Accepted Answer · 2014-01-15 07:21:16Z

0

Have some ways for your case:

1.Using ClientID:

document.getElementById('<%=tex_dealername.ClientID%>')

2.Add a CssClass to your TextBox control:

<asp:Textbox ID="myTextBox" runat="server" Text="Hello, World" CssClass="TestClass" />

then use class selector.

3.Just change ClientIDMode in web.config:

<pages clientIDMode="Static" /> inside <system.web></system.web>

answered Jan 15, 2014 at 7:21

Anh Tú

6467 silver badges21 bronze badges

Comments

dave · Accepted Answer · 2014-01-14 11:15:27Z

0

Add a CssClass property to asp:Textbox and get it using jquery ($(".class"))

answered Jan 14, 2014 at 11:15

dave

2,3713 gold badges21 silver badges25 bronze badges

Collectives™ on Stack Overflow

How to display values in asp:textbox using javascript

5 Answers 5

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related