Toggle display of fields based on radio button selection in ASP.NET

I am new to C# asp.net and I am working on creating an online registration form. I am facing a challenge with the following issue. Could someone assist me, please?

There are 5 fields in this problem:
1) Category: radio button with options for Student or Staff
2) Course: Dropdown menu
3) Semester: Dropdown menu
4) Department : Free text field
5) Designation : Free text field

If a user selects the Student radio button, the Course and Semester fields should be visible while the Department and Designation fields should not be visible.

If a user selects the Staff radio button, the Department and Designation fields should be visible while the Course and Semester fields should not be visible.

I need help in implementing this. Here is the code snippet: 

<div class="col-lg-10">
        <div class="radio">
            <label>
                <asp:RadioButtonList ID="category" runat="server">
                    <asp:ListItem Text="Student" Value="student"></asp:ListItem>
                    <asp:ListItem Text="Staff" Value="staff"></asp:ListItem>
                </asp:RadioButtonList>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator21" runat="server" ControlToValidate="category" ErrorMessage="Category is Requried" Style="color: #58CB00"></asp:RequiredFieldValidator>
            </label>
        </div>
    </div>

    <div class="Department">
        <asp:Label ID="Label3" runat="server" Text="Department*" CssClass="col-lg-2 control-label" Font-Size="Larger"></asp:Label><br />
        <div class="col-lg-10">
            <asp:DropDownList ID="DropDownList1" runat="server" CssClass="form-control ddl">
                <asp:ListItem>Select your department</asp:ListItem>
                <asp:ListItem>Administration</asp:ListItem>
                <asp:ListItem>IT Solutions</asp:ListItem>
                <asp:ListItem>B.Tech(CSE)</asp:ListItem>

            </asp:DropDownList>
        </div>
    </div>
    <br />

    <div class="Designation">
        <asp:Label ID="Label4" runat="server" Text="Designation*" CssClass="col-lg-2 control-label" Font-Size="Larger"></asp:Label>
        <div class="col-lg-10">
            <asp:TextBox ID="TextBox2" runat="server" CssClass="form-control"></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="TextBox2" ErrorMessage="Designation is Requried" Style="color: #58CB00"> </asp:RequiredFieldValidator>

        </div>
    </div>

    <div class="Course">
        <asp:Label ID="Label5" runat="server" Text="Course*" CssClass="col-lg-2 control-label" Font-Size="Larger"></asp:Label>
        <div class="col-lg-10">
            <asp:DropDownList ID="DropDownList2" runat="server" CssClass="form-control ddl">
                <asp:ListItem>B.Tech(CSE)</asp:ListItem>
                <asp:ListItem>MCA</asp:ListItem>
                <asp:ListItem>iMBA</asp:ListItem>

            </asp:DropDownList>
        </div>
    </div>
    <br />
    <div class="Semester">
        <asp:Label ID="Label6" runat="server" Text="Semester*" CssClass="col-lg-2 control-label" Font-Size="Larger"></asp:Label>
        <div class="col-lg-10">
            <asp:DropDownList ID="DropDownList3" runat="server" CssClass="form-control ddl">
                <asp:ListItem>I</asp:ListItem>
                <asp:ListItem>II</asp:ListItem>
                <asp:ListItem>III</asp:ListItem>

            </asp:DropDownList>
        </div>
    </div>
javascriptc#asp.net

Answer №1

One way to achieve this functionality is by using jQuery:

$(document).ready(function () {
     $('input[name="category"]').change(function () {
         if ($.trim($(this).val()) == "student") {
               $('.Department,.Designation').hide();
               $('.Designation,.Course').show();
          }
          else {
               $('.Department,.Designation').show();
               $('.Designation,.Course').hide();
          }
      });
});

Make sure to include the jQuery library in your project.

Answer №2

By implementing the category_SelectedIndexChanged method, we can accomplish this task successfully.

.Aspx Code

<div class="col-lg-10">
        <div class="radio">
            <label>
                <asp:RadioButtonList ID="category" runat="server" AutoPostBack="true" OnSelectedIndexChanged="category_SelectedIndexChanged">
                    <asp:ListItem Text="Student" Value="student"></asp:ListItem>
                    <asp:ListItem Text="Staff" Value="staff"></asp:ListItem>
                </asp:RadioButtonList>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator21" runat="server" ControlToValidate="category" ErrorMessage="Category is Requried" Style="color: #58CB00"></asp:RequiredFieldValidator>
            </label>
        </div>
    </div>


<div class="Department" id="department" runat="server" >
    <asp:Label ID="Label3" runat="server" Text="Department*" CssClass="col-lg-2 control-label" Font-Size="Larger"></asp:Label><br />
    <div class="col-lg-10">
        <asp:DropDownList ID="DropDownList1" runat="server" CssClass="form-control ddl">
            <asp:ListItem>Select your department</asp:ListItem>
            <asp:ListItem>Administration</asp:ListItem>
            <asp:ListItem>IT Solutions</asp:ListItem>
            <asp:ListItem>B.Tech(CSE)</asp:ListItem>
            <asp:ListItem>MCA</asp:ListItem>
            <asp:ListItem>iMBA</asp:ListItem>
            <asp:ListItem>English</asp:ListItem>
            <asp:ListItem>Library</asp:ListItem>
            <asp:ListItem>Others</asp:ListItem>

        </asp:DropDownList>
    </div>
</div>
<br />

<div class="Designation" id="desig" runat="server">
    <asp:Label ID="Label4" runat="server" Text="Designation*" CssClass="col-lg-2 control-label" Font-Size="Larger"></asp:Label>
    <div class="col-lg-10">
        <asp:TextBox ID="TextBox2" runat="server" CssClass="form-control"></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="TextBox2" ErrorMessage="Designation is Requried" Style="color: #58CB00"> </asp:RequiredFieldValidator>

    </div>
</div>

<div class="Course" id="cour" runat="server">
    <asp:Label ID="Label5" runat="server" Text="Course*" CssClass="col-lg-2 control-label" Font-Size="Larger"></asp:Label>
    <div class="col-lg-10">
        <asp:DropDownList ID="DropDownList2" runat="server" CssClass="form-control ddl">
            <asp:ListItem>B.Tech(CSE)</asp:ListItem>
            <asp:ListItem>MCA</asp:ListItem>
            <asp:ListItem>iMBA</asp:ListItem>
            <asp:ListItem>English</asp:ListItem>
        </asp:DropDownList>
    </div>
</div>
<br />
<div class="Semester" id="sem" runat="server">
    <asp:Label ID="Label6" runat="server" Text="Semester*" CssClass="col-lg-2 control-label" Font-Size="Larger"></asp:Label>
    <div class="col-lg-10">
        <asp:DropDownList ID="DropDownList3" runat="server" CssClass="form-control ddl">
            <asp:ListItem>I</asp:ListItem>
            <asp:ListItem>II</asp:ListItem>
            <asp:ListItem>III</asp:ListItem>
            <asp:ListItem>IV</asp:ListItem>
            <asp:ListItem>V</asp:ListItem>
            <asp:ListItem>VI</asp:ListItem>
            <asp:ListItem>VII</asp:ListItem>
            <asp:ListItem>VIII</asp:ListItem>
            <asp:ListItem>IX</asp:ListItem>
            <asp:ListItem>X</asp:ListItem>
        </asp:DropDownList>
    </div>
</div>

.CS code

protected void category_SelectedIndexChanged(object sender, EventArgs e)
    {
        if(category.SelectedValue =="student")
        {
            cour.Visible = true;
            sem.Visible = true;
            department.Visible = false;
            desig.Visible = false;
        }
        else
        {
            cour.Visible = false;
            sem.Visible = false;
            department.Visible = true;
            desig.Visible = true;
        }
    }

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

What is the best way to use pattern matching to specifically match IDs while ensuring that the variable number aligns without needing to manually code every potential option?

I have recently acquainted myself with Jquery selectors and they are proving to be very useful. The issue I am facing currently is that all of my variable names follow similar patterns of starting and ending. The IDs are generated from elsewhere, and I am ...

javascriptjqueryarraysdjangodjango-forms

Ways to convert asynchronous operations of Node.js into synchronous operations in Node.js

Using node js, I am making multiple AWS API calls within a for loop. var prodAdvOptions = { host : "webservices.amazon.in", region : "IN", version : "2013-08-01", path : "/onca/xml" }; prodAdv = aws.createProdAdvCli ...

javascriptnode.jsasynchronoussynchronousaws-lib

Experiencing issues with applying bootstrap style to pagination when using react-js-pagination

I am currently utilizing the react-js-pagination library to showcase page numbers within my application. Bootstrap has been included in the public/index.html file and can be accessed using className in other components. When it comes to the Pagination com ...

javascriptreactjspaginationbootstrap-4

Add an HTML template tag in Vuetify using scripting

This is my current template tag: <template> <h1>Explore in VR</h1> </template> Within my script tag, I've included the following code: var viewer = new AFrame.WebVRViewer(); viewer.setSize(window.innerWidth, window.innerHeig ...

javascriptvue.jsvuetify.js

Ways to avoid overflow of dynamically added div element?

Currently, I am facing an issue while dynamically appending div elements with the .magnet class to my page. These elements end up overflowing the container boundaries and I am struggling to find a solution for this problem. If anyone could check out my j ...

javascriptjqueryhtmlcss

Cease the loading of a script in an HTML file

I have encountered a challenge in preventing a script from loading on my Wordpress website. The HTML file contains two scripts: <script type="0f1a6d7ca503db410c0d10c4-text/javascript" src='https://www.[-----------].se/wp-content/plugins/ ...

javascriptphpwordpress

Utilizing Selenium with Python to choose a specific option from a dropdown selection

I am currently experimenting with using Selenium in Python to choose the option "Custom date" from the dropdown menu displayed in the image below: https://i.sstatic.net/ASHU2.png The hierarchy of divs is structured as shown here: https://i.sstatic.net/xtA ...

javascriptpythonhtmlcssselenium

Having difficulty installing npm on Mac m1 with Monterey operating system

npm install npm ERR! code ENOENT npm ERR! syscall open npm ERR! path /Users/ahmed/package.json npm ERR! errno -2 npm ERR! enoent ENOENT: no such file or directory, open '/Users/ahmed/package.json' npm ERR! enoent This issue is likely due to npm n ...

javascriptnode.jsnpm

Remove information using Axios in ReactJS by interacting with an API

I have successfully pulled data from the jsonplaceholder API and stored it in my state. However, I am struggling with implementing the deleteContact() method to remove the data. Can anyone provide guidance on how to properly execute the deleteContact() met ...

javascriptreactjsaxios

Is it possible to retrieve the values of #select1 and #select2 before initiating the AJAX request?

I am presented with the following snippet of HTML code: <select id="choice1"> <option value="0">Option 0</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3 ...

javascriptjqueryajaxjquery-select2jquery-select2-4

Is it possible to maintain a fixed footer while utilizing async/ajax functions?

Looking for a reliable solution to have a fixed footer that adjusts based on the page content? I've tested multiple samples, but they all fall short when it comes to incorporating AJAX elements. Is there a fixed footer out there that truly works seaml ...

javascriptjqueryhtmlcss

Tips and tricks for seamlessly aligning a specific section of your webpage to ensure it scrolls smoothly into view

My codes are not being centered when I use smooth scrolling on a specific section of a Bootstrap carousel template. Is there an easier way to achieve this? The explanation in a post from six years ago didn't help much. Here are my codes and screenshot ...

javascripthtmlcssbootstrap-4

Triggering a jQuery event when the submit button in an input field

I am attempting to utilize JQuery code to fade in an element when a inputfield is clicked. However, I have encountered an issue where the code does not work as intended when the selector is placed inside a form. Strangely, the code executes properly when t ...

javascriptjquery

Guide on extracting XML data from C# and displaying it as a list on HTML using jQuery

Currently, I am retrieving XML data from a C# web API controller and struggling to display it as a list on an HTML view page. Despite trying several methods, none seem to be effective. Here is a snippet of the XML data obtained from the API. Any suggesti ...

c#jqueryajaxxmlasp.net-web-api

Once the Ionic platform is prepared, retrieve from the Angular factory

I have created a firebase Auth factory that looks like this: app.factory("Auth", ["$firebaseAuth", "FIREBASE_URL","$ionicPlatform", function($firebaseAuth, FIREBASE_URL, $ionicPlatform) { var auth = {}; $ionicPlatform.ready(function(){ ...

javascriptangularjsionic-frameworkfirebase

unable to send updates to groups in socket.io

When a user connects, the system will search for a room with fewer people than the maximum allowed. If such a room is found, the user joins it. If no suitable room is available, the system creates a new one. The room creation process is functioning correct ...

javascriptnode.jssocket.io

There was an issue encountered when trying to call a PHP file within an HTML table using Ajax and data.html

For a small project, I have various news items that need to be included from the "news_all.php" file into table data within the "dashboard.php" file. Due to the predefined root structure restrictions, using include('news.php') is not an option. I ...

javascriptphphtmlajaxjson

Guide to placing the cursor at a specified position within an editable content div

I am struggling with a div <div id="user_status" class="status expanddiv" onkeyup="username_Search('New','user_status');" contenteditable="true" data-text="What's on your mind?..."> Some Text will be inserted here. </div ...

javascriptjquery

What is the best way to align a series of divs vertically within columns?

Struggling to find the right words to ask this question has made it difficult for me to locate relevant search results. However, I believe a picture is worth a thousand words so...https://i.stack.imgur.com/LfPMO.png I am looking to create multiple columns ...

javascriptjqueryhtmlcss

Unshifting values in a JavaScript array only if they exist in another array

I have two arrays of objects - one containing selected data and the other containing general data that needs to be displayed General data for display const arr = [ { id: "1", name: "Skoda - Auto" }, { id: "2" ...

javascripttypescriptjavascript-objects