I am looking to design a form field with options that display additional fields when a specific option is chosen.
<div class="col-md-12">
<label for="event" class="form-label"
>Do you have more details about your event</label
>
<select id="event" class="form-select">
<option
value="choose"
selected
aria-label="Disabled select example"
disabled
>
Please choose
</option>
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
</div>
<div class="col col-md-4 extended">
<label for="eventtype" class="form-label"
>Type of Event</label
>
<input type="text" class="form-control" id="eventtype" />
</div>
<div class="col col-md-4 extended">
<label for="guests" class="form-label"
>Number of Guests</label
>
<select id="guests" class="form-select">
<option
selected
aria-label="Disabled select example"
disabled
>
Please choose
</option>
<option>30 - 100</option>
<option>100 - 200</optioin>
<option>more than 200</option>
</select>
</div>
<div class="col col-md-4 extended">
<label for="duration" class="form-label"
>Duration of Performance</label
>
<input type="text" class="form-control" id="duration" />
</div>
<div class="col col-md-6 extended">
<label for="place" class="form-label">Location</label>
<input type="text" class="form-control" id="place" />
</div>
<div class="col col-md-6 extended">
<label for="date" class="form-label">Date</label>
<input type="date" class="form-control" id="date" />
</div>
All the elements within divs having the class name of ".extended" should be hidden when "No" is selected.
I tried writing JavaScript code to achieve this functionality, but I'm only getting the value of "choose" all the time.
var Extended = document.querySelectorAll(".extended")
var selObj = document.getElementById("event");
var selValue = selObj.options[selObj.selectedIndex].value;
console.log(selValue)
if (selValue === "no") {
Extended.forEach(el=>el.classList.add("visually-hidden"));
}
I have gone through some articles on extracting values from a select element, but my current implementation seems not working. I would greatly appreciate any guidance on identifying the mistake in my code.