My form contains multiple fields. One of the fields is a selection. If in the select box yes is selected, two extra fields should appear. But for some reason, it isn't working. I am using jquery to let the fields appear. Bellow, you can find my code. Thanks for the help.
<script type="text/javascript">
function displayFields() {
if (document.getElementById("isYes").selected) {
document.getElementById("ifyes").style.display = "block";
document.getElementById("ifno").style.display = "none";
} else {
document.getElementById("ifno").style.display = "none";
document.getElementById("ifyes").style.display = "none";
}
}
...
<div class="d-flex">
<div class="flex-fill p-2">
<select name="condition" class="form-control" onchange="displayFields()" required>
<option></option>
<option id="isYes">Yes</option>
<option id="isNo">No</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-2">
<div class="d-flex">
<div class="p-1">
<label class="p-2" for="type" id="ifyes" style="display: none;">Type</label>
</div>
</div>
</div>
<div class="col-4">
<div class="d-flex">
<div class="flex-fill p-2">
<input id="ifyes" style="display: none;"
type="text"
class="form-control input-text"
placeholder="Type"
name="type"
value=""
>
</div>
</div>
</div>
<div class="col-2">
<div class="d-flex">
<div class="p-1">
<label class="p-2" for="function" id="ifyes" style="display: none;">function</label>
</div>
</div>
</div>
<div class="col-4">
<div class="d-flex">
<div class="flex-fill p-2">
<input id="ifyes" style="display: none;"
type="text"
class="form-control input-text"
placeholder="function"
name="function"
value=""
>
</div>
</div>
Aucun commentaire:
Enregistrer un commentaire