0

I have the following script in a Web Forms project:

function myScriptInAspxFile() {
         var obj = document.getElementById("<%= TextBox1.ClientID %>");
         if (obj) {                 
             obj.value = "My Text";                 
         }
     }

this works fine when I put the script inside the Web forms aspx file, but when I change the script to a Js (JavaScript) file the line:

var obj = document.getElementById("<%= TextBox1.ClientID %>");

The assignment returns me a null value for the obj variable. How could I find a control from a script in a Js (JavaScript) file? Greetings and thank you in advance.

8
  • ("<%= TextBox1.ClientID %>") this is an invalid way to find an element in JS, getElementById should have a string with no spaces in between. also js will not understand what does TextBox1.ClientID is, unless it's in a aspx page. Commented Mar 18, 2024 at 1:22
  • @MHDAlaaAlhaj - the clue is asp.net Commented Mar 18, 2024 at 1:25
  • does this answer your question? stackoverflow.com/questions/10540217/… Commented Mar 18, 2024 at 1:29
  • What is the ID of TextBox1 - you could use something like document.querySelector("[id$=whateverTheIDis]") Commented Mar 18, 2024 at 1:31
  • try declaring a variable in your js like this const id = "<%= TextBox1.ClientID %>"; then console.log(id), if you get your value correctly, then you can use document.getElementById(id); Commented Mar 18, 2024 at 1:33

1 Answer 1

1

The issue of course is that you wishing to have a hard coded text box name, and then use a external .js file. External files don't get nor enjoy server side expression processing.

There are two approaches here:

Use clientidMode="static" for the text box.

Hence this:

        <asp:TextBox ID="TextBox1" runat="server" ClientIDMode="Static" >
        </asp:TextBox>

And now your js code becomes this:

var obj = document.getElementById("TextBox1");

Another approach?

Place BOTH the control and JavaScript inside of a user control.

So, say this:

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<script>
    function mytest() {
        var tBox = document.getElementById('<%=TextBox1.ClientID%>')
        alert(tBox.value)
    }

</script>

Now, our markup becomes this:

        <asp:Button ID="Button1" runat="server" Text="Show text box value"
            OnClientClick="mytest();return false"
            />
             <br />

        <uc1:MyScriptControl runat="server" id="MyScriptControl" />

And the result is this:

enter image description here

You can also of course place some small js code stubs in the current page that calls/uses/enjoys the external .js library of code, but you thus have to "pass" the control value with smaller code stubs in the current page.

So, say this:

   <script>

        function mytestlocal() {
            var obj = document.getElementById("<%= TextBox1.ClientID %>");
            mytest(obj)
        }
   </script>

And thus in the external file we have this:

  function mytest(tBox) {
    alert(tBox.value)
}

So, the "very" idea of a external .js file means that external file can't have hard code controls, nor can it use or have <%=%> (server side) expressions.

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.