After hiding an element's visibility, getElementById is unable to locate the element

Developing an asp.net page with a master page that utilizes a content page (web control). The web control consists of 4 elements: PickListType dropdown, UserPickList (not important), Organization label, Body label, and Address dropdown.

Upon changing the picklisttype dropdown, I aim to hide the Body and Address, and vice versa. Initially, the functionality works, but on subsequent attempts, it fails to locate the ids of Body and Address (visibility set to hidden) during the second change. Upon inspecting the source code, it appears that either the Ids have changed or the elements have disappeared entirely during postback.

Struggling to resolve this issue. Any suggestions?

function DropDownChange() {

            var picklist = document.getElementById("PickListTypeList");
            var usercontainer = document.getElementById("ctl00_ctl00_ctl00_PageContentPlaceHolder_PageContentPlaceHolder_paneDetails_ApplicerPickListContainer");
            var orgcontainer = document.getElementById("ctl00_ctl00_ctl00_PageContentPlaceHolder__C_OrganizationPickListContainer");
            var addresslabel = document.getElementById("LegalBodyAddressLabel");
            var addressbox = document.getElementById("ctl00_ctl00_ctl00_PageContentPlaceHolder_PageContentPlaceHolder_paneDetails_ApplicantsRadDock_C_ApplicantsControl_AddEditApplicantDock_C_AddApplicantDock_C_LegalBodyAddressComboBox");


            if(picklist.value.toLowerCase() === "sometext"){
                usercontainer.style.display = "none";
                orgcontainer.style.display = "inline";
                addresslabel.visibility = "visible";
                addressbox.style.display = "inline";
            }
            else{
                usercontainer.style.display = "inline";
                orgcontainer.style.display = "none";
                addresslabel.visibility = "hidden";
                addressbox.style.visiblity = "none";

            }


            }

Currently using .ClientId for dynamic id retrieval, considering switching to static ids without success in targeting Address and Label. Attempting to access these elements from the parent (master) page by traversing into the control (controlname.nameofelementID.ClientID).

javascriptasp.net

Answer №1

Two possible solutions

  • To access the controls you need, simply add a specific class to them and then retrieve them using document.getElementsByClassName. Remember that classes on HTML tags will remain unchanged by .NET after a postback.

OR

  • Alternatively, enclose the controls in a div or span with an ID, then use document.getElementById on that wrapping tag and access its firstChild. It is advisable not to include runat="server" for this wrapper element.

Answer №2

There are two ways you can get it to work:

  1. Utilize class names (the .NET framework won't interfere with this approach)
  2. Create JavaScript ids dynamically at runtime, especially since there will be a postback. An example would be: 
    document.getElementById("<%=LegalBodyAddressLabel.ClientId%>");

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

Opening a remote PDF file using PDF.JS causes Safari to crash on the iPad

I am currently working on integrating PDF.JS to display a remote PDF on my ASP.NET website. I have created a web form named "ShowPDF.aspx" that downloads the remote PDF and uses response.binarywrite to send the file bytes. To display the PDF, I have includ ...

iosasp.netipadsafaripdf.js

Guide on pushing a nested array of objects into another object as a nested array of objects using MongoDB and NodeJS

I am working with a "cart" object and an "order" object. The "cart" object has the following structure: { "_id" : ObjectId("cart123"), "userId" : "user123", "email" : "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" ...

javascriptnode.jsarraysmongodbmongoose

Conceal a column within a table by double-clicking

I'm working on a project with a table, and I'd like to implement a feature where a column hides when double-clicked. I've seen various solutions for hiding columns on Stack Overflow, but I could use some guidance on where to add the ondblcli ...

javascriptcsshtml-tabledom-events

Event handling in Node.js can sometimes result in throwing exceptions

I need advice on how to handle errors or return values from an event in my code. Here is what it looks like: _initConnection(){ try{ const errorValidation = this.errorValidation const HOST = "192.168.2.32" ...

javascriptnode.jsexpress

Guide on linking an id with a trigger function in HTML and JavaScript

In the snippet below, I aim to create a responsive feature based on user input of 'mute' and 'muteon'. Whenever one of these is entered into the textbox, it will change the color of linked elements with the IDs "text" and "text1" to red ...

javascripthtmlcsstelnet

The magic of data binding in AngularJS's ng-repeat

Is it possible to dynamically call an attribute of a data-binded object based on the ng-repeat object? I have set up a simple example, but I'm not sure if it can be solved this way. Can anyone help with this? The goal is for the input to receive the ...

javascriptangularjsobjectdata-bindingangularjs-ng-repeat

Tips for executing flushall just once across various clusters with Node.js and Redis

Whenever my server starts up, I find myself needing to clear out the Redis memory. However, each time a new cluster is formed, it triggers a flushall command that wipes out everything in memory. Is there a way to only run flushall once on the very first se ...

javascriptnode.jsrediscluster-computing

Can you explain the concept of a TransientTransactionError within Mongoose (or MongoDB)?

Two important files in my project are server.js and db.js. The db.js file is responsible for interacting with the database using Mongoose, while server.js calls functions from db.js: var mongoose = require('mongoose'); mongoose.connect('&ap ...

javascriptnode.jsmongodbmongoose

Exploring the compatibility of Next.js with jest for utilizing third-party ESM npm packages

Caught between the proverbial rock and a hard place. My app was built using: t3-stack: v6.2.1 - T3 stack Next.js: v12.3.1 jest: v29.3.1 Followed Next.js documentation for setting up jest with Rust Compiler at https://nextjs.org/docs/testing#setting-up-j ...

javascripttypescriptnext.jsjestjs

Modifying an object's label based on a particular value using JavaScript

In my current project involving React.js charts, I am looking to organize data by month. In Django, I have set up a view to display JSON containing the total events per month in the following format: [ { "month": "2022-06-01T00:00:0 ...

javascriptreactjsdjangocharts

PHP code isn't properly redirecting to AJAX calls

I have the following JavaScript code that validates a form by calling a PHP script on the backend: $(function() { // Setting up form validation for the #register-form element $("#register_form").validate({ // Specifying the validation ru ...

javascriptphpjqueryajax

What's causing Angular to not display my CSS properly?

I am encountering an issue with the angular2-seed application. It seems unable to render my css when I place it in the index.html. index.html <!DOCTYPE html> <html lang="en"> <head> <base href="<%= APP_BASE %>"> < ...

javascripthtmlcssangulartypescript

The AJAX callback is unable to access the method of the jQuery plugin

I have a scenario where I am fetching data from an AJAX response and attempting to update a jQuery plugin with that value within the success callback: $.ajax({ url: '/some/url', type: 'GET', dataType: 'json', succ ...

javascriptjquerynode.jsajax

Guide to automatically clicking a hyperlink using XPath

I am attempting to automatically click a button or a link as soon as the page loads. Currently, I am considering using the Xpath method for this purpose. Here's what I have experimented with so far: document.evaluate('/html/body/div/div[4]/div[2 ...

javascriptjquerybuttonxpathclick

Is there a way to automatically transfer the store's order value to my payment gateway's checkout process during the checkout process?

I am facing an issue with integrating the Razorpay payment gateway into my online store built on ecwid. The process involves decrypting order details from the store, sending them to the payment gateway for processing, and redirecting the customer back to t ...

javascriptnode.jspayment-gatewayrazorpay

Creating a Visual Presentation with Background Image Transition in HTML, CSS, and JavaScript

Seeking assistance in setting up a basic background image slideshow on my website. I have been unable to locate a suitable tutorial online, so I'm reaching out here for guidance. HTML: <body> <h3>Welcome!</h1> <p>Lorem i ...

javascripthtmlcssbackground-imageslideshow

Arranging data in a JSON array while handling null values in JavaScript

Here is my JSON array: var jData = [ {id: 1, parent: null}, {id: 2, parent: null}, {id: 3, parent: 1}, {id: 4, parent: 2}, {id: 5, parent: 2}, {id: 6, parent: 1}]; I would like to sort it in the following order (first by id then by parent): [ {id: 1 ...

javascriptarraysjsonsortingknockout.js

Changing dimensions of cube on stable base

I'm currently working on a project involving a dynamic cube that can be scaled in real time by adjusting its mesh. However, I'm facing a challenge in keeping the cube fixed to the floor while changing its height. Here's a snippet of the code ...

javascriptthree.js

The issue with adding rows to a dynamic HTML Table in Angular is that it is causing the previous rows to disappear

I have created a neat HTML table with three columns: <table > <thead> <tr> <td class="tdBorderEmail"><label>Action</label></td> <td class="tdBorderEmai ...

javascripthtmlangulartypescriptdatatables

A guide for finding a specific string within a subset of an array

I have an array containing various substrings, and I want to pass if at least one of those substrings contains the specific value I am searching for. Value1 = [ "Grape | 100 |Food Catering Service", "Apple | 100,000m |Food Catering Servi ...

javascriptarraystypescript