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