ASP.NET setting textbox value using javascript without document.getElementById()

Question

I have the following Web Form in my ASP.NET Website

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" ValidateRequest="false" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
        <script type="text/javascript">
            function SetTextBoxValues() {
                TextBox1.value = "Textbox can be set without calling document.getElementById()";
                TextBox2.value = "Textbox can be set without calling document.getElementById()";
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:TextBox ID="TextBox1" runat="server" Height="210px" TextMode="MultiLine" Width="725px"></asp:TextBox>
    <br/>
    <textarea rows="4" cols="50" id="TextBox2" runat="server" />
    <br/>
    <button onclick="SetTextBoxValues()">Set Text Box Value</button>
    </form>
</body>
</html>

The page works as I can click the button and set values in both TextBox1 and Textbox2. What I don't understand is the way the Textbox value is set in the javascript function.

<script type="text/javascript">
    function SetTextBoxValues() {
        TextBox1.value = "Textbox can be set without calling document.getElementById()";
        TextBox2.value = "Textbox can be set without calling document.getElementById()";
}

Normally we need to use the following JS code:

document.getElementById('<%=txtTextBox.ClientID %>').value = "Some values";

But it looks like we can set the value without the use of document.getElementById(). May I know why it is working this way? Is this a valid way of setting textbox value using javascript?

I created an empty ASP.NET website and added this page. I have tested it and was able to add text to the textboxes when clicking on the button. — ccyen, Jun 03 '16 at 09:51
It does work, indeed. I think the explanation is given here: http://stackoverflow.com/questions/3434278/do-dom-tree-elements-with-ids-become-global-variables. — ConnorsFan, Jun 03 '16 at 12:29

score 0 · Answer 1 · edited May 23 '17 at 11:58

0

You use component "runat server" so you should use code behing:

TextBox2.Text = yourvalue;

And create a method server side to manage your inputs.

I think it's like this post: textarea control, asp.net c#

edited May 23 '17 at 11:58

Community

1
1

answered Jun 03 '16 at 09:26

G. Frx

2,350
3
19
31

I know I should use code behind since it has the "runat server", but I want to know why javascript seems to be able to use code behind syntax in its function. – ccyen Jun 03 '16 at 09:40
Two cases are possible : 1) ASP.NET create some global js variable you can access. 2) Your script is "runat server", why ? I don't know if I cannot see the whole code. – G. Frx Jun 03 '16 at 09:48
Thank you again for the response. I am not quite sure about what you mean my script is "runat sever". This is the whole code I have and there is no code behind for this web page. I created it by simplifying a web page from an old project of my company. There is no code behind in this page. All I did was add this web page to an empty ASP.NET website and it seems to be working. – ccyen Jun 03 '16 at 10:05

score 0 · Accepted Answer · answered Sep 01 '17 at 06:45

0

quoting answer provided as comment from ConnorsFan.

It does work, indeed. I think the explanation is given here: stackoverflow.com/questions/3434278/…. – ConnorsFan Jun 3 '16 at 12:29

answered Sep 01 '17 at 06:45

ccyen

33
6

ASP.NET setting textbox value using javascript without document.getElementById()

2 Answers2