Avatar of Stacey Fontenot
Stacey Fontenot
 asked on

Hide & Unhide Div Based on Drop Down Selection

I have an MVC C# Web Application and have a text area input field that needs to be hidden when the page loads. I also have a drop down input field that a user picks a value from the drop down list. What I'm trying to do is if the user selects "Free Text" option with a value of "55" from (add_Time_Description_ID) input, the div area (divTimeNotes) becomes visible. So...this div area will toggle hidden/unhide based on the drop down selection. If page loads and the drop down does not = 55, div is hidden. I'd like to do this with Javascript but am having issues accomplishing. Can someone assist. See input names below:

                <div class="row mg-t-20">
                    <label class="col-sm-5 form-control-label">Time Description:</label>
                    <div class="col-sm-6 mg-t-10 mg-sm-t-0">
                        <select name="Time_Description_ID" id="add_Time_Description_ID" class="form-control" required>
                            <option value="">Select a Time Description</option>
                            @{
                                foreach (TimeDescription timeDescription in Model.TimeDescriptions)
                                {
                                    <option value="@timeDescription.Time_Description_ID">@timeDescription.Time_Name</option>
                                }
                            }
                        </select>
                    </div>
                    <label class="col-sm-1 form-control-label"><span class="tx-danger">*</span></label>
                </div>

                <div class="row mg-t-20" id="divTimeNotes" style="display:none;">
                    <label class="col-sm-5 form-control-label">Time Notes:</label>
                    <div class="col-sm-6 mg-t-10 mg-sm-t-0">
                        <textarea name="Time_Notes" id="add_Time_Notes" class="form-control" style="min-height:200px;" placeholder="Description"></textarea>
                    </div>
                    <label class="col-sm-1 form-control-label"></label>
                </div>
.NET MVCCSSC#JavaScript

Avatar of undefined
Last Comment
Stacey Fontenot

8/22/2022 - Mon
Zakaria Acharki

Since you're using bootstrap, I suppose you've already jQuery library included so I think what you need is attaching a change event listener to the first select then check if "Free Text" is selected show the div else hide it like :

$(function(){
  $('body').on('change', '#add_Time_Description_ID', function(){
    if( $(this).val() === '55'){
      $('#divTimeNotes').show();
    }else{
      $('#divTimeNotes').hide();
    }
  });
})

Open in new window

Working fiddle
ASKER CERTIFIED SOLUTION
Zakaria Acharki

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Stacey Fontenot

ASKER
Excellent.
Your help has saved me hundreds of hours of internet surfing.
fblack61