here's the situation
I have a select element in my html code, with many option. One of these options is "Other". What I want is, when I select "Other", without refreshing the page, display an input element right under the select one with JS. The problem is that I have to refresh the page to see the change. Can you help me? :)
There's my code :
<label for="select-tribunal" class="form-label">Cadre Légal</label>
<select id="select-tribunal" required class="form-select" aria-label="Default select example">
<?php
foreach ($tribunaux as $tribunal){
echo '<option value="'.$tribunal['id'].'">'.$tribunal['nom'].'</option>';
}
?>
<option value="0">Autre Tribunal</option>
</select>
<input type="text" class="form-control" id="tribunal" style="visibility: hidden" placeholder="Entrez le nom du tribunal">
<script>
var tribunal = document.getElementById("select-tribunal");
if (tribunal.options[tribunal.selectedIndex].value === '0') {
document.getElementById('tribunal').style.visibility = 'visible';
} else {
document.getElementById('tribunal').style.visibility = 'hidden';
}
</script>
Thanks in advance :)
You have to add an eventlistener.
let tribunal = document.getElementById("select-tribunal");
tribunal.addEventListener('change', showInput);
showInput({
target: tribunal
});
function showInput(event) {
if (event.target.value === '0') {
document.getElementById('tribunal').style.visibility = 'visible';
} else {
document.getElementById('tribunal').style.visibility = 'hidden';
}
}<label for="select-tribunal" class="form-label">Cadre Légal</label>
<select id="select-tribunal" required class="form-select" aria-label="Default select example">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="0" selected>Autre Tribunal</option>
</select>
<input type="text" class="form-control" id="tribunal" style="visibility: hidden" placeholder="Entrez le nom du tribunal">Since php is running on server the page have to reload in order to see the changes you need to use JavaScript for for this task since you want to see the changes without reload
var select = document.querySelector("#mySelect");
var input = document.querySelector("#myInput");
select.addEventListener("change", function(event){
if(event.target.value === "other"){
input.style.display="block"
}else{
input.style.display="none"
}
})<select id="mySelect">
<option value="a">A</option>
<option value="a">B</option>
<option value="c">C</option>
<option value="other">Other</option>
</select>
<input style="display: none" type="text" id="myInput">