I am trying to create a sign-up page for my app. All the code works, but when I try to hide input box based on dropdown select, it doesn’t work. I tried this:
<script>
var select = document.getElementById("card");
select.onchange = function() {
if (select.value == "Yes") {
document.getElementById("cards").style.display = "inline";
} else {
document.getElementById("cards").style.display = "none";
}
}
</script>
<select id="card" name="user_id">
<option value="No">No</option>
<option value="Yes">Yes</option>
</select><br><br>
<input id="cards" type="text"><br><br>
But it didn’t work.
And this is my code for the signup page:
<!DOCTORTYPE html>
<html>
<head>
<title>Signup</title>
</head>
<body>
<style type="text/css">
#text {
height: 25px;
border-radius: 5px;
padding: 4px;
border: solid thin #aaa;
width: 75%;
}
#button {
padding: 10px;
width: 100px;
color: white;
background-color: lightblue;
border: none;
}
#box {
background-color: grey;
margin: auto;
width: 500px;
padding: 20px;
}
</style>
<div id="box">
<form method="post">
<div style="font-size: 20px;margin: 10px;color: white;">Signup</div>
<PRE><font size="+2">Name</font></PRE><br>
<input id="text" type="text" name="user_name"><br><br>
<PRE><font size="+2">Surname</font></PRE><br>
<input id="text" type="text" name="user_surname"><br><br>
<PRE><font size="+2">Username</font></PRE><br>
<input id="text" type="text" name="username"><br><br>
<PRE><font size="+2">Password</font></PRE><br>
<input id="text" type="password" name="password"><br><br>
<PRE><font size="+2">Select position:</font></PRE><br>
<select name="job">
<option value="student">Student</option>
<option value="teacher">Teacher</option>
<option value="staff">Staff</option>
<option value="principal">Principal</option>
</select><br>
<PRE><font size="+2">Select gender:</font></PRE><br>
<select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select><br><br>
<PRE><font size="+2">Card ID:</font></PRE><br>
<script>
var select = document.getElementById("card");
select.onchange = function() {
if (select.value == "Yes") {
document.getElementById("cards").style.display = "inline";
} else {
document.getElementById("cards").style.display = "none";
}
}
</script>
<select id="card" name="user_id">
<option value="No">No</option>
<option value="Yes">Yes</option>
</select><br><br>
<input id="cards" type="text"><br><br>
<input id="button" type="submit" value="Signup"><br><br>
<a href="index.php">Back to main page</a><br><br>
</form>
</div>
</body>
</html>
Advertisement
Answer
It does work, you only need to place the script underneath the form tags. It can’t execute the script on elements that it can’t find, because they are underneath it. Keep in mind that scripts get executed from top to bottom. I also added selected to the Yes value so when you click No the script starts working.
<html>
<head>
<title>Signup</title>
</head>
<body>
<style type="text/css">
#text {
height: 25px;
border-radius: 5px;
padding: 4px;
border: solid thin #aaa;
width: 75%;
}
#button {
padding: 10px;
width: 100px;
color: white;
background-color: lightblue;
border: none;
}
#box {
background-color: grey;
margin: auto;
width: 500px;
padding: 20px;
}
</style>
<div id="box">
<form method="post">
<div style="font-size: 20px;margin: 10px;color: white;">Signup</div>
<PRE><font size="+2">Name</font></PRE><br>
<input id="text" type="text" name="user_name"><br><br>
<PRE><font size="+2">Surname</font></PRE><br>
<input id="text" type="text" name="user_surname"><br><br>
<PRE><font size="+2">Username</font></PRE><br>
<input id="text" type="text" name="username"><br><br>
<PRE><font size="+2">Password</font></PRE><br>
<input id="text" type="password" name="password"><br><br>
<PRE><font size="+2">Select position:</font></PRE><br>
<select name="job">
<option value="student">Student</option>
<option value="teacher">Teacher</option>
<option value="staff">Staff</option>
<option value="principal">Principal</option>
</select><br>
<PRE><font size="+2">Select gender:</font></PRE><br>
<select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select><br><br>
<PRE><font size="+2">Card ID:</font></PRE><br>
<select id="card" name="user_id">
<option value="No">No</option>
<option value="Yes" selected>Yes</option>
</select><br><br>
<input id="cards" type="text"><br><br>
<input id="button" type="submit" value="Signup"><br><br>
<a href="index.php">Back to main page</a><br><br>
</form>
<script>
var select = document.getElementById("card");
select.onchange = function() {
if (select.value == "Yes") {
document.getElementById("cards").style.display = "inline";
} else {
document.getElementById("cards").style.display = "none";
}
}
</script>
</div>
</body>
</html>