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...
here you go:
function yesnoCheck(that) { if (that.value == "other") { alert("check"); document.getElementById("ifYes").style.display = "block"; } else { document.getElementById("ifYes").style.display = "none"; } }
<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 /> </div>
Check out: Display div if a specific select option value is selected
Also don't use ID use data attributes or value to check comparison.
function yesnoCheck(that) {
if (that.value == "other") {
document.getElementById("ifYes").style.display = "block";
}elseif (that.value == "lada") {
} else {
document.getElementById("ifYes").style.display = "none";
}
}
<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 />
</div>
function yesnoCheck(that) { if (that.value == "aadhar") { document.getElementById("adc").style.display = "block"; } else { document.getElementById("adc").style.display = "none"; } if (that.value == "pan") { document.getElementById("pc").style.display = "block"; } else { document.getElementById("pc").style.display = "none"; } if (that.value == "pass") { document.getElementById("ps").style.display = "block"; } else { document.getElementById("ps").style.display = "none"; } }
<div> <select id="selector" onchange="yesnoCheck(this);"> <option value="select">__Select__</option> <option value="aadhar">Aadhaar Card</option> <option value="pan">Pan Card</option> <option value="pass">Passport</option> </select> <label for="selector">Select ID Proof</label> </div> <div id="adc" style="display: none;"> <label for="aadhar">Enter Aadhar Card No.</label> <input type="text" id="aadhar" name="aadhar" /><br /> </div> <div id="pc" style="display: none;"> <label for="pan">Enter Pan Card No.</label> <input type="text" id="pan" name="pan" /><br /> </div> <div id="ps" style="display: none;"> <label for="pass">Enter Passport No.</label> <input type="text" id="pass" name="pass" /><br /> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.