user1589375 user1589375 - 7 months ago 10
HTML Question

Show input field only if a specific option is selected

I'm trying to make a form which checks if a certain option is selected from a "select" tag. Here is my current HTML:

<select onchange="yesnoCheck()">
<option id="noCheck" value="">Valitse automerkkisi</option>
<option id="noCheck" value="lada">Lada</option>
<option id="noCheck" value="mosse">Mosse</option>
<option id="noCheck" value="volga">Volga</option>
<option id="noCheck" value="vartburg">Vartburg</option>
<option id="yesCheck" value="other">Muu</option>
</select>


This is the div element which should become visible after "Muu" is selected:

<div id="ifYes" style="display: none;">
<label for="car">Muu, mikä?</label> <input type="text" id="car" name="car" /><br />
</div>


And here is the JavaScript I'm trying to use:

<script type="text/javascript">
function yesnoCheck() {
if (document.getElementById("yesCheck").checked) {
document.getElementById("ifYes").style.display = "block";
} else {
document.getElementById("ifYes").style.display = "none";
}
}
</script>


But it's not working...

Answer

here you go:

<select onchange="yesnoCheck(this);">
    <option value="">Valitse automerkkisi</option>
    <option value="lada">Lada</option>
    <option value="mosse">Mosse</option>
    <option value="volga">Volga</option>
    <option value="vartburg">Vartburg</option>
    <option value="other">Muu</option>
    </select>

    <div id="ifYes" style="display: none;">
    <label for="car">Muu, mikä?</label> <input type="text" id="car" name="car" /><br />

    <script>
    function yesnoCheck(that) {
        if (that.value == "other") {
            alert("check");
            document.getElementById("ifYes").style.display = "block";
        } else {
            document.getElementById("ifYes").style.display = "none";
        }
    }
</script>
Comments