Hide and show HTML Select Options - php

Question

I'm writing a registration page in with PHP:
<form action="" method="post">
<input type="text" id="lname" name="fname" placeholder="First Name" required>
<input style='margin:8px;'type="text" id="fname" name="lname" placeholder="Last Name" required>
<br>
<br>
<input type="emailtext" id="email" name="email" placeholder="Email Address" required>
<br>
<div class="selectdiv" required>
<p class="boldlabel">I am a</p>
<input type="radio" id="tutor" name="tutororstudent" value="tutor" required>
<label for="tutor">Tutor</label><br>
<input type="radio" id="student" name="tutororstudent" value="student">
<label for="student">Student</label><br>
<div class="innerdiv">
<p class="boldlabel">Grade level</p>
<select name="grade">
<option value="1">1st Grade</option>
<option value="2">2nd Grade</option>
<option value="3">3rd Grade</option>
<option value="4">4th grade</option>
<option value="5">5th Grade</option>
<option value="6">6th Grade</option>
<option value="7">7th Grade</option>
<option value="8">8th grade</option>
<option value="9">9th Grade</option>
<option value="10">10th Grade</option>
<option value="11">11th Grade</option>
<option value="12">12th grade</option>
<option value="13">Undergrad/grad</option>
<option value="14">Post College</option>
</select>
</div>
</div>
<input style='margin:16px;'type="password" id="pwd" name="pwd" placeholder="Password" required>
<input type="submit" value="Register">
</form>
I want the div "innerdiv" to only show up if the user selects the student radio button. How do I do this in PHP? How do I hide it until the user selects the student radio button?

Answer 1

You only can achieve that using javascript:
add id to your innerdiv.
<div class="innerdiv" id="innerdiv" style="display:none">
<p class="boldlabel">Grade level</p>
<select name="grade">
<option value="1">1st Grade</option>
<option value="2">2nd Grade</option>
<option value="3">3rd Grade</option>
<option value="4">4th grade</option>
<option value="5">5th Grade</option>
<option value="6">6th Grade</option>
<option value="7">7th Grade</option>
<option value="8">8th grade</option>
<option value="9">9th Grade</option>
<option value="10">10th Grade</option>
<option value="11">11th Grade</option>
<option value="12">12th grade</option>
<option value="13">Undergrad/grad</option>
<option value="14">Post College</option>
</select>
</div>
bottom of your page, put this:
<script>
let student = document.getElementById('student');
student.addEventListener('click', display);
let tutor = document.getElementById('tutor');
tutor.addEventListener('click', () => div.style.display = "none");
let div = document.getElementById('innerdiv');
function display(){
if(student.checked) {
div.style.display = "block";
}
}
</script>