I want to create a form field with select, that shows additional fields when a certain field is selected.
<div class="col-md-12">
<label for="event" class="form-label"
>Habt ihr schon nähere Infos zu eurem Event</label
>
<select id="event" class="form-select">
<option
value="choose"
selected
aria-label="Disabled select example"
disabled
>
Bitte auswählen
</option>
<option value="no">Nein</option>
<option value="yes">Ja</option>
</select>
</div>
<div class="col col-md-4 extended">
<label for="eventtype" class="form-label"
>Art der Veranstaltung</label
>
<input type="text" class="form-control" id="eventtype" />
</div>
<div class="col col-md-4 extended">
<label for="guests" class="form-label"
>Anzahl Gäste</label
>
<select id="guests" class="form-select">
<option
selected
aria-label="Disabled select example"
disabled
>
Bitte auswählen
</option>
<option>30 - 100</option>
<option>100 - 200</option>
<option>mehr als 200</option>
</select>
</div>
<div class="col col-md-4 extended">
<label for="duration" class="form-label"
>Auftrittsdauer</label
>
<input type="text" class="form-control" id="duration" />
</div>
<div class="col col-md-6 extended">
<label for="place" class="form-label">Ort</label>
<input type="text" class="form-control" id="place" />
</div>
<div class="col col-md-6 extended">
<label for="date" class="form-label">Datum</label>
<input type="date" class="form-control" id="date" />
</div>
All the divs with the class “.extended” should hide, when “Nein” is selected.
I wrote that JavaScript but somehow, the selValue always only gives back the value of “choose”
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 read certain posts, how to get values from select and this is what I found, but somehow it doesn’t work.
I would appreciate any help, that shows me, where my mistake is.