Creating Dynamic Visibility in ASP.NET Server Controls: Displaying or hiding a textbox based on a dropdown selection

Is there a way to dynamically show/hide a textbox or an entire div section based on a user's selection from a dropdown menu? Can this be achieved using client-side HTML controls instead of server controls? Would utilizing jQuery provide the best solution for this task? Also, is there a method to hide the Div by default and then display it when the user chooses an option from the drop down?

<div id="divLimitPrice">Limit Price<br />
        <asp:TextBox ID="txtLimitPrice" runat="server" ValidationGroup="ValidationGroupOrder"></asp:TextBox>
        &nbsp;<asp:RequiredFieldValidator ID="rfvLimitPrice" runat="server" ControlToValidate="txtLimitPrice" ErrorMessage="This is a required field."></asp:RequiredFieldValidator>
        </div>

<script type="text/javascript">
    $(function () {
        $('[id*="ddPriceType"]').on('change', function () {
            var val = this.value,
                $divLimitPrice = $('[id*="divLimitPrice"]');

            if (val === 1 || val === 2) {
                // Hide div group
                $divLimitPrice.hide();
            } else {
                // Show div group
                $divLimitPrice.show();
            }
        });
    });
</script>

 Price Type<br />
        <asp:DropDownList ID="ddPriceType" runat="server" ValidationGroup="ValidationGroupOrder">
            <asp:ListItem Value="" Text ="Select a Price Type" />
            <asp:ListItem Value="2" text="Type 2" />
            <asp:ListItem Value="3" text="Type 3" />
            <asp:ListItem Value="4" text="Type 4" />
        </asp:DropDownList>
        &nbsp;<asp:RequiredFieldValidator ID="rfvPriceType" runat="server" ControlToValidate="ddPriceType" ErrorMessage="This is a required field."></asp:RequiredFieldValidator>
        <div id="divLimitPrice">Limit Price<br />
        <asp:TextBox ID="txtLimitPrice" runat="server" ValidationGroup="ValidationGroupOrder"></asp:TextBox>
        &nbsp;<asp:RequiredFieldValidator ID="rfvLimitPrice" runat="server" ControlToValidate="txtLimitPrice" ErrorMessage="This is a required field."></asp:RequiredFieldValidator>
        </div>`

I've tried implementing the code but seem to have missed something. Any suggestions on what might be missing? Your assistance is greatly appreciated!

Answer №1

There are no limits to what you can achieve. You have the power to accomplish anything that is asked of you. You don't even need to rely on traditional HTML controls. Whether you want to hide a textbox or a div element, it's all possible. I will demonstrate a simple example without using aspx controls. Just follow these instructions and you will see the expected results.

For further reference, please visit:

Visit JSFiddle Here

Feel free to use any aspx control within the div tags:

<div>
<asp:textbox id="TxtSample" runat="server" />
</div>

Alternatively, you can utilize Panels instead

<asp:Panel ID="PnlLogin" runat="server">
 -- --  Your Controls Here
</asp:panel>

Answer №2

If you're looking to achieve this, you can utilize .jquery.

$(function () {
    $('[id*="dropdown"]').on('change', function () {
        var value = this.value,
            $textBox = $('[id*="txtLimitPrice"]');

        if (value === 1 || value === 2) {
            // Conceal the text box
            $textBox.hide();
        } else {
            // Reveal the text box
            $textBox.show();
        }
    });
});

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

Displaying the number of tasks completed compared to the total number of tasks within a JavaScript ToDo list

Currently, I'm in the process of creating a basic ToDo list using HTML, JS, and CSS. The last task on my list is to display to the user the total number of tasks and how many have been completed. For instance, if there are 3 completed tasks out of 7 i ...

div cannot be placed next to each other

My code snippet is located at http://jsfiddle.net/kXesZ/. I am trying to align the two social media icons to the bottom edge of a background image but I am having trouble getting them to display inline. I've attempted various methods such as using dis ...

Receiving an inaccurate value from the input with type='number' attribute

There is an input field where users can enter a string, and I need to capture the value entered into it. $("#test").on("change", function(){ console.log($(this).val()); }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery ...

A method for transforming each word in a string to begin with a capital letter

I'm not sure if my approach to solving this problem is correct: function capitalizeFirstLetter (string) { let stringArray = string.split(' '); for (let i = 0; i < stringArray.length; i++) { let firstLetter = stringArray[i ...

Is it possible to target the last child element in CSS without relying on nesting

Is there a way to select the very last child of an element and apply a specific class without using nesting? For instance, how can I target only the final div in the structure below, nothing more and nothing less. <body> <div class="very-last- ...

Using AngularJS to send a post request with cherrypy

I am facing an issue with posting events into a CherryPy small application that responds to GET/POST requests. When attempting to do so using AngularJS, nothing gets posted. I'm unsure if the problem lies with AngularJS or CherryPy (CP). Cross-domain ...

Setting a false condition on jQuery's .on('canplaythrough') event

Struggling to implement a custom audio control with jQuery, but encountering some issues. I'm in the process of converting native JavaScript to jQuery for consistency in my code, however, I can't seem to get it working. The original code that is ...

Disabling the Enter key to submit an AJAX form is causing the focus to not move to the next input field

I've encountered a small issue that I can't seem to find a solution for (maybe my keyword search wasn't effective): The scenario: I have successfully prevented a form from being submitted when hitting the Enter key (13). It's importan ...

Tips on modifying webpage content based on page size (zoom) in responsive web design using CSS

I have a good understanding of responsive design and how to set elements with relative width. My specific question is regarding the transition of the page from thisto that. Any insight on this would be greatly appreciated. Thank you in advance. ...

Injecting dynamic data into a function parameter with Angular 1 Interpolation

In my code, I have a feature that alters the text displayed on a button depending on certain conditions. $scope.text = 'Wait'; if(Number($scope.x) == Number($scope.y)) $scope.text = 'Go' else if(Number($scope.x) < Number($scope ...

What is causing the border-bottom in these inline divs to not display when using a fractional height? (Specifically in Chrome)

Here is a jsfiddle I'd like to share with you: https://jsfiddle.net/ionescho/4d07k799/4/ The HTML code: <div class='container'> <div class="row"></div><div class="row"></div><div class="row"></div> ...

Table pagination in Mat is experiencing overflow, and the button styles have also been customized for a unique look

I implemented a mat paginator feature, however, I am facing an issue where the alignment of items per page options is not correct. Below is the snippet from component.html file: <div class="table-responsive" *ngIf="resultssummaries"> &l ...

Expansive Bootstrap division

I am seeking assistance in achieving a Bootstrap layout similar to the image provided below. My difficulty lies in ensuring that the yellow bar spans the full width of the Bootstrap container without disrupting the stacking order of columns on mobile view. ...

Styling an image with dual attributes using CSS

I'm looking to customize two img classes with different properties. For instance, in my CSS, I want to define: img { padding-left: 15pt; float: right; } and then: img1 { padding-left: 15pt; float: left; } where img1 would serve as a tag fo ...

Issues with WordPress's multiple menu functionality not functioning as expected

I've been working on setting up multiple menus in WordPress, and I've run into a little issue. I managed to create the menus, assign them to their respective locations, and save them successfully. However, when I try to call the footer menu, it e ...

What impact does utilizing CSS 3D Transforms have on search engine optimization (SEO)?

Google emphasizes the importance of not hiding content, as it may not be counted by search engines. However, Google Cache has shown some discrepancies in understanding certain elements correctly. It's possible that what Google perceives as hidden migh ...

Development of client and server using socket.io in node.js

I am trying to set up a basic demo using socket.io from http://socket.io The server (app.js) is functioning properly. However, I am encountering issues with the client side: <script src="/socket.io/socket.io.js"></script> <script ...

Enhance your website with a dynamic div zoom feature using the Jquery Zoom

I've been scouring the internet for a jQuery plugin that allows me to zoom in on an image. There are many options out there, but I prefer ones that display the zoomed-in image in a separate area rather than directly on the original image. For example ...

Why is the lower sub-component positioned above the rest of the page?

I have set up a sandbox environment to demonstrate an issue that I am facing. The main problem is that when I click on "Option 1" in the main menu, a new component appears where a bottom sub-component (named BottomControls.js) is displayed at the top of t ...

How to continuously submit a single form field with Jquery using setInterval?

After reviewing this jquery timer on jsfiddle, I must say it works quite effectively. However, my specific requirement is to submit a single form field at regular intervals. Consider the following HTML form structure: <form id="form"> <input ...