How to hide an ASP.net panel with JavaScript

I am working on a radioButtonList that contains two items: one with a value of "Yes" and the other with a value of "No."

Below the radioButtonList, I have a panel that I would like to show when the "Yes" radiobutton is selected, and hide when the "No" radiobutton is selected. Originally, I used the AutoPostBack attribute for this functionality, but now I want to achieve it using Javascript to avoid any postbacks. Below is the code snippet. Any assistance on this matter would be highly appreciated.

<asp:RadioButtonList ID="rbl1" runat="server" onClick="changed(this);" >
<asp:ListItem Value="Yes">Yes</asp:ListItem>
<asp:ListItem Value="No">No</asp:ListItem>

<asp:Panel ID="panel1" runat="server">
<--other controls here -->
</asp:Panel>

function changed(rbl) {
        //not sure what to put in here
    }

Thank you in advance,

Zaps

asp.netjavascriptpanelradiobuttonlist

Answer №1

Just whipped up a quick example for you:

<!-- Opted for grouped radio buttons over the RadioButtonList for easier handling -->
<asp:RadioButton ID="rbYes" runat="server" Text="Yes" GroupName="YourGroupName" Checked="true" />
<asp:RadioButton ID="rbNo" runat="server" Text="No" GroupName="YourGroupName" />        
<br /><br />    
<!-- Swapped out panel for a div. Panels are basically fancy divs anyway. -->
<div id="divTest">
    This is just a test
</div>

<script type="text/javascript">
    $(document).ready(function()
    {
        $('#<%= rbYes.ClientID %>').click(function() { $('#divTest').show(); });
        $('#<%= rbNo.ClientID %>').click(function() { $('#divTest').hide(); });

    });
</script>

Answer №2

    function UpdatePanelVisibility() {
        if (this.value == "No") {
            document.getElementByID('<%=panel1.ClientID%>').style.display = "none";
        }
        else {
            document.getElementByID('<%=panel1.ClientID%>').style.display = "block";
        }
    }


</script>

Raja, there seems to be a bug in your code I have fixed it for you.

Answer №3

If you want to hide "panel1" by adding a class or finding its actual id, here are two ways to do it:

$('idOfPanel').hide();

Alternatively, without using jQuery, you can hide the panel like this:

idOfPanel.style.display = "none";

To show the panel again:

$('idOfPanel').show();

Or:

idOfPanel.style.display = "block";

Answer №4

Give this a shot:

if (this.value == "No")
{
document.getElementByID('<%=panel1.ClientId%').style.display = "none";
}
else
{
document.getElementByID('<%=panel1.ClientId%').style.display = "block";
}

Hopefully, this solution proves useful.

Answer №5

One approach to avoid full postback is by incorporating your code into an UpdatePanel. This can help prevent the entire page from having to go through a complete page life-cycle.

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

Populating an array during an event and then utilizing it outside of the event function handler

I have a challenge where I need to populate an array with values from various buttons whenever they are clicked. The goal is to then access this array outside of the event handler function. Although I have attempted a solution, I am struggling to access th ...

javascriptarraysdomeventsdom-events

Selection list with limited comment choices

I am facing a challenge and would greatly appreciate any hints. I am working with a PHP loop to populate comments for a thread, like this: <tr><td>'.comment_date'.</td><td>'.comment_author.'</td><td> ...

javascriptjqueryhtmlajax

Obtaining data from an external ng-repeat element

My list contains items that are being repeated using ng-repeat details. I want to be able to hover over one of the li elements and have the background of a div called background (which is outside of the ng-repeat) change to the url of the corresponding d ...

javascriptjqueryhtmlcssangularjs

transferring images from JavaScript to PHP

I am attempting to use ajax to transfer an image from JavaScript to PHP. I have the following HTML input: <input type="file" class="input-field" id="photo" name="photo"> Here is the corresponding JavaScript code: var photo = document.getElementByI ...

javascriptphpajax

Where should data processing be conducted: in the service or controller layer?

Here's a question regarding the best practices for organizing code. I'm fetching data from an API using $resource and I need to manipulate it before displaying it on the view. My dilemma is at which stage should I process the data? My current b ...

javascriptangularjsajax

"Implementing a Download function on a PDF file using

I am facing an issue with my React application. I have a feature that displays a PDF along with a download button, but when I click the button, it redirects me to another page for downloading instead of staying within the app. Is there a specific plugin o ...

javascripthtmlreactjspdf

Hide the div in PHP if the active variable is null

It looks like I'll need to implement Jquery for this task. I have a print button that should only appear if my array contains data. This is a simplified version of what I'm aiming to achieve: HTML <?include 'anotherpage.php'?> ...

javascriptphpjqueryhtml

Issue: Unable to utilize import statement outside a module as per the guidelines of the vue-test-utils official tutorial

I'm struggling to get Vue testing set up with vue-test-utils and jest. I followed the installation guide at https://vue-test-utils.vuejs.org/installation/#semantic-versioning, but can't seem to figure out what's wrong. Here's what I&apo ...

javascriptvue.jsjestjsmocha.jsvue-test-utils

I'm struggling to make my DeleteCommand function properly in ASP.net 4.0 using VB

My website features a ListView that displays various product features. I tried adding an image button to delete a specific feature, but unfortunately, my DeleteCommand doesn't seem to be working. Even after checking my database, the record is still pr ...

asp.netsqlvb.netlistview

Unable to get jQuery plugin to function properly within a .vue component

I am currently working on a Vue component for my Laravel 5.3 application. I am trying to integrate the Laravel File Manager into a standalone button, but it seems like it's not functioning properly. When I click on the button to choose an image, nothi ...

javascriptjquerylaravel-5vue.jsvue-component

Interactive tooltips that utilize both the onmouseover and onclick events

I have 5 links with tooltip hovers on each one except the last link. The reason for this difference is because I am utilizing the tooltip to inform the user that their data has been copied after clicking the link. However, I still want a hover effect on th ...

javascripthtmljquerybootstrap-4

Converting an HTML page into a JSON object by scraping it

Is there a way to convert an HTML page into a JSON object using web scraping? Here is the content of the page: <html><head><title>Index</title><meta charset="UTF-8"></head><body><div><p>[ <a href ...

javascripthtmljsonnode.js

Maintain fullcalendar event filtering across multiple renderings

I currently have a fullcalendar that initially displays all events. I am using a select dropdown to filter the events, which works well. However, when the calendar re-renders after moving to the next month, it shows all events again. Here is my calendar in ...

javascriptjqueryfullcalendar

Prevent scrolling on body while mobile navigation is activated in Next.js

Normally, disabling scrolling on the body element can be achieved by toggling a class or overflow property when a mobile menu or modal is open. However, due to Next.js being rendered server-side, accessing the document object is not possible. How can I pre ...

javascriptdomnext.js

Binding an event to an Angular 2 component directly within its selector code

Looking at my Angular 2 component: import { Component, ElementRef, Renderer } from '@angular/core';; @Component({ selector: 'my-button', templateUrl: 'button.html' }) export class ButtonComponent { private text: string ...

javascriptangular

Unable to retrieve elements from the eBay website using JavaScript within a Chrome extension

I recently developed a Chrome extension that scrapes all orders from an eBay orders page. It was working flawlessly last month, but suddenly I am facing issues accessing some elements. Here is the snippet of code causing trouble: let elGridComp = document ...

javascriptgoogle-chrome-extension

Deliver the item to the prototype function

Currently utilizing the Nivo Slider plugin for jQuery, I am exploring the functionality of providing callbacks within an object inside the plugin's parameters. Below is an example: $('.slider').nivoSlider({ afterLoad: control_responses( ...

javascriptjquery

Retrieving the final item from an ng-repeat loop that has been sorted using the orderBy function

I need assistance in creating a list of terms and their definitions, each categorized under a header based on the first letter of the term. A Apple B Banana Currently, I am using the following code: <div ng-repeat="definition in definitions"& ...

javascripthtmlangularjsangularjs-ng-repeatangularjs-orderby

Troubleshooting Sequelize's hasMany and belongsTo relationships

Looking to create 2 tables in Mysql using the power of node.js & sequelize.js. The two models we're working with are User and Company Here's what the fields for User look like: - id - username - password And for Company, here are its fields: - ...

javascriptmysqlnode.jsormsequelize.js

An exclusive execution of the JavaScript function is ensured

I have a JavaScript function that I want to execute 12 times in a row. Here's my approach: Below, you'll find a list of 12 images: <img id="img1" src=""> </img> <img id="img2" src=""> </img> <img id="img3" src=""> ...

javascriptjqueryhtml