How can I extract control value from an external file in an ASP website?

I have a unique situation where I need to access the value of an asp:label control named "lblName" from one .aspx file in another. Specifically, I have a header file and a body file that are both used on the same web page. In the JavaScript code of the body file, I attempted to grab the value using document.getElementById("lblName").value, but encountered this error message:

Microsoft JScript runtime error: Object required

Since this site is coded in Visual Basic, I am also curious if there is a way to accomplish this task from the code behind.

Upon inspecting the hierarchy by pressing F12 in the browser (using IE), I observed the following structure:

<head>
<frameset rows="147,*" frameBorder="no" frameSpacing="0">
   <frame name="frHeader" id="frHeader" src="DistHeader.aspx?statProducer=0707090003" noResize="noresize" scrolling="auto">
   DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
   <html>
     <head>
     <body topMargin="1" rightMargin="0" bottomMargin="0">
       <div class="clsNoPrint">
          <div class="clsNoPrint">
          <table width="100%">
             <tbody>
                <tr class="clsNameBar" width="100%">
                  <td width="*" align="left"> 
                     <span class="clsNameBar" id="lblName" style="width: 100%;">
javascriptasp.netvb.net

Answer №1

If the label has runat="server" attribute, its ID in the browser will differ from the one seen on the server. You need to somehow pass its ClientID to JavaScript. One way to do this is with Page.RegisterStartupScript, or if your JS is part of an aspx file, you can use something like this: 

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

Another issue might be that lblName is actually a <asp:Label /> which gets converted to a span without a .value property. In this case, you can access the content using:

document.getElementById('<%=lblName.ClientID %>').innerHTML

If you are working with frames, depending on where your code is located, you may need to first access the frame:

//For Chrome and Firefox
document.getElementById("frHeader").contentDocument.getElementById("lblName") 

//For Internet Explorer (which does not support contentDocument)
document.getElementById("frHeader").document.getElementById("lblName")

If your code is within the outer document containing a frame, but it's in another frame, you should prepend window.parent. before document.getElementById.

Answer №2

Due to the age of the website, which was built nearly a decade ago, we had to navigate through multiple framesets in order to retrieve the desired value. The following code snippet illustrates the approach taken:

var el =  parent.parent.frames("frHeader").document.getElementById("lblName").innerText;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve the value stored in $cookies in AngularJS

A cookie has been stored $cookieStore.put('lastpage', $scope.page); I need to retrieve the value of the 'lastpage' cookie and show it in an HTML display <div>The last page visited was 'value'</div> ...

javascriptphpangularjsangularjs-directiveangularjs-scope

Table data is being displayed from form data in another file using only JavaScript

I am trying to figure out how to use local storage to store form data in one HTML file and display it in a table on another HTML file. The form data should be stored in the columns of the table but on a separate page. Can anyone provide assistance with thi ...

javascripthtml

Utilizing a 'for' loop to add a listener for a 'click' event

HTML: <li>Facebook</li> <li>Twitter</li> <li>Souncloud</li> JS: var links = ['https://www.facebook.com/', 'https://twitter.com', 'https://soundcloud.com']; function openURL (url) { l ...

javascripthtml

What's the process for assigning a webpack ChunkName in a Vue project?

I have encountered an issue with webpack Chunk. I have already installed "@babel/plugin-syntax-dynamic-import". Below is my configuration and import() code. Despite this, only the entry index.js file is being generated in the output folder. What could I be ...

javascriptvue.jswebpack

Display a notification to the user prior to reloading the page

I have created a code for logging attendance at work using a barcode reader. The user simply needs to scan their card with a barcode to register their attendance. let $scannerInput = $(".scanner-input"); $(document).ready(function(){ $scannerInput.focu ...

javascripthtmljson

Angular 2 with MVC routing: encountering routing issues post fallback

I am in the process of creating an Angular 2 application. After starting the project in Visual Studio 2017, I managed to successfully route to the app within an Area (Home2017/Start/Index.cshtml): Route toHome2017 = null; toHome2017 = routes.MapR ...

javascriptasp.net-mvcangularasp.net-mvc-4typescript

Combining an ASP.NET website with an API integration: Exploring the tandem functionality

I am currently facing an issue with the structure of my project. The setup is as follows: Solution1 _Folder1 _Folder2 _CSProj1 _CSProj2 **_WebSite** Solution2 _Folder _APIProj I have created a simple API project that I want to integrate i ...

c#asp.netapiasp.net-core

Transform every individual word in the paragraphs of the website into a clickable button with corresponding text on it

I've been developing a Google Chrome extension that extracts all the words from paragraphs within a web page and organizes them into buttons. This feature is just one part of a larger project I'm working on. You can check out a demo of this funct ...

javascriptjqueryhtmldomgoogle-chrome-extension

Using Vue to pass data from a forEach loop to the href attribute

Currently, I am dealing with a situation in Vue where I have an array that I need to loop over and render anchor elements for each iteration. The array is passed in as one of my props. Despite trying various methods, I find that the solutions I come up wit ...

javascriptvue.jshref

send the value of a variable from a child component to its parent

I have created a typeahead component within a form component and I am trying to pass the value of the v-model from the child component to its parent. Specifically, I want to take the query model from the typeahead component and place it in the company mode ...

javascriptvue.jsvue-component

Need help with resetting a value in an array when a button is clicked?

Using Tabulator to create a table, where clicking on a cell pushes the cell values to an array with initial value of '0'. The goal is to add a reset button that sets the values back to '0' when clicked. component.ts names = [{name: f ...

javascriptangulartypescripttabulator

The parsing module encountered an error due to an unexpected } token, causing a failure in

Can anyone help me figure out why this error keeps occurring? ERROR in ./login/loginController.js Module parse failed: /Users/leon/Projects/admin/login/loginController.js Line 66: Unexpected token } You may need an appropriate loader to handle this file t ...

javascriptangularjsmodulewebpack

various types of font colors within the text box

If I have a text box with the content "eg. 'one'" Can I set the font color of "eg." to color:black and "'one'" to color:red? Below is the HTML code: <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="true" Text="eg.-one"> ...

c#htmlasp.netcss

Techniques for invoking a stored procedure in ASP.NET

I recently created a stored procedure in SQL Server that handles insert, update, delete, and select operations. Here is the procedure: ALTER PROCEDURE [dbo].[artdetails1] ( @artdetailId int, @artDescription varchar(50), @artShortdesc varchar(5 ...

asp.netsqlado.net

When a React Router link is activated, the React Bootstrap dropdown remains open instead of closing as expected

<NavDropdown className="userDropdownButton" title="dropdown" id="user-nav-dropdown" alignRight > <div className="userDropDown"> <Link to="/user" className="userDropDownheader"> user </Link> </div> < ...

javascriptreactjsbootstrap-4react-bootstrap

Looking to retrieve the dynamic "Publish Date" value from a webpage using HtmlUnit in Java?

As part of a coding exercise, I am currently working on a project that involves comparing the current system date with dates on various web pages to determine if there are any new updates. While most of the pages work as expected, there is one particular p ...

javascriptjavahtml

Using javascript to determine the vertical position of an element within a fixed container

I'm facing a challenge in determining the vertical position of an element using scrollTop when the parent container has a position: fixed. When I use scrollTop, it consistently returns a value of 0. This probably occurs because the element is no long ...

javascripthtmlcss

What is the method for using the spread operator to add a property to an inner object in Typescript?

I have the following Object: let car = { year: 2004, type: {name: "BMW"} } Now, I am trying to add a property to the inner object "type". My aim is to achieve this using the spread operator as I require a new object due to the existing one being an immut ...

javascripttypescriptspread

Manage InversifyJS setup based on the current environment

Recently, I've been utilizing InversifyJS to manage dependency injection within my TypeScript server. A current challenge I face is the need to inject varying implementations into my code based on the environment in which it is running. A common situ ...

javascripttypescriptdependency-injectioninversifyjs

Show images exclusively on screens with a smaller resolution

Looking for assistance in modifying the code below to only display the image in mobile view, instead of constantly appearing. <style type="text/javascript> .icon-xyz {float: left; width: 22px;cursor: pointer;background: none;} @me ...

javascripthtmlcssmedia-queries