Hello I have some several issues with my code and I can't find any solution for days now.
Issue 1: Brand of vaccine still persists when selecting yes then selecting no.
Issue 2: No submit button in "No" option, and in are you vaccinated options the yes and no selection disappears.
Issue 3: Other dropdown didn't disappear.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
</head>
<body>
<script type="text/javascript">
function displayForm1(c) {
if (c.value == "1") {
document.getElementById("yesformContainer").style.visibility = 'visible';
document.getElementById("noformContainer").style.visibility = 'hidden';
} else if (c.value == "2") {
document.getElementById("yesformContainer").style.visibility = 'hidden';
document.getElementById("noformContainer").style.visibility = 'visible';
} else {}
}
</script>
<script type="text/javascript">
function displayForm2(c) {
if (c.value == "once") {
document.getElementById("onceboostContainer").style.visibility = 'visible';
document.getElementById("twiceboostContainer").style.visibility = 'hidden';
document.getElementById("noboostContainer").style.visibility = 'hidden';
} else if (c.value == "twice") {
document.getElementById("onceboostContainer").style.visibility = 'hidden';
document.getElementById("twiceboostContainer").style.visibility = 'visible';
document.getElementById("noboostContainer").style.visibility = 'hidden';
} else if (c.value == "none") {
document.getElementById("onceboostContainer").style.visibility = 'hidden';
document.getElementById("twiceboostContainer").style.visibility = 'hidden';
document.getElementById("noboostContainer").style.visibility = 'visible';
} else{}
}
</script>
<form id="Personal Information">
<h1>Personal Information</h1>
<label for="name">Name</label> <input type="text" id="name" name="name"><br>
<h3>Address</h3>
<label for="houseno">House No.</label> <input type="text" id="houseno" name="houseno">
<label for="street">Street</label> <input type="text" id="street" name="street">
<label for="brgysubd">Brgy. or Subd.</label> <input type="text" id="brgysubd" name="brgysubd">
<h3>City/Municipality</h3>
<select name="citymun" id="citymuns">
<option value="nonecity">Select City...</option>
<option value="Alfonso">Alfonso</option>
<option value="Amadeo">Amadeo</option>
<option value="Bacoor">Bacoor</option>
<option value="Carmona">Carmona</option>
<option value="Cavite City">Cavite City</option>
<option value="Dasmariñas">Dasmariñas</option>
<option value="General Emilio Aguinaldo">General Emilio Aguinaldo</option>
<option value="GMA">GMA</option>
<option value="General Trias">General Trias</option>
<option value="Imus">Imus</option>
<option value="Indang">Indang</option>
<option value="Kawit">Kawit</option>
<option value="Magallanes">Magallanes</option>
<option value="Maragondon">Maragondon</option>
<option value="Mendez">Mendez</option>
<option value="Naic">Naic</option>
<option value="Noveleta">Noveleta</option>
<option value="Rosario">Rosario</option>
<option value="Silang">Silang</option>
<option value="Tagaytay">Tagaytay</option>
<option value="Tanza">Tanza</option>
<option value="Ternate">Ternate</option>
<option value="Trece Martires">Trece Martires</option>
</select><br>
<br>
<label for="bday">Birthday</label> <input type="date" id="bday" name="bday" min="1900-01-01" max="2022-12-31"><br>
<h3>Contact Number</h3>
<label for="numbercel">Mobile Number</label> <input type="tel" id="contactcel" name="contactcel" pattern="[0]{1}-[1-9]{3}-[0-9]{7}">
<label for="numbertel">Telephone Number</label> <input type="tel" id="contacttel" name="contacttel" pattern="[0]{1}-[0-9]{2}-[0-9]{7}">
<h3>Vaccination Status</h3>
<p>Are you fully vaccinated?</p>
<label for="yes">Yes</label> <input value="1" type="radio" id="vaccyes" name="question" value="yes" onclick="displayForm1(this)"><br>
<label for="no">No</label> <input value="2" type="radio" id="vaccno" name="question" value="no" onclick="displayForm1(this)"><br>
<div style="visibility:hidden; position:relative" id="yesformContainer">
<form id="yesform">
<p>Brand of Vaccine (1st)</p>
<select name="vaccbrand" id="vaccinebrand">
<option value="nullvac">Select Brand...</option>
<option value="COVONAX">COVOVAX (Novavax formulation)</option>
<option value="Comirnaty">Pfizer/BioNTech Comirnaty</option>
<option value="Spikevax">Moderna Spikevax</option>
<option value="SputnikLight">Gamaleya Sputnik Light</option>
<option value="SputnikV">Gamaleya Sputnik V</option>
<option value="Jcovden">Janssen (Johnson & Johnson) Jcovden</option>
<option value="Vaxzevria">Oxford/AstraZeneca Vaxzevria</option>
<option value="Covaxin">Bharat Biotech Covaxin</option>
<option value="Covilo">Sinopharm (Beijing) Covilo</option>
<option value="Inactivated">Sinopharm (Wuhan) Inactivated (Vero Cells)</option>
<option value="CoronaVac">Sinovac CoronaVac</option>
<option value="nonevac">None</option>
</select>
<p>Brand of Vaccine (2nd)</p>
<select name="vaccbrand" id="vaccinebrand">
<option value="nullvac">Select Brand...</option>
<option value="COVONAX">COVOVAX (Novavax formulation)</option>
<option value="Comirnaty">Pfizer/BioNTech Comirnaty</option>
<option value="Spikevax">Moderna Spikevax</option>
<option value="SputnikLight">Gamaleya Sputnik Light</option>
<option value="SputnikV">Gamaleya Sputnik V</option>
<option value="Jcovden">Janssen (Johnson & Johnson) Jcovden</option>
<option value="Vaxzevria">Oxford/AstraZeneca Vaxzevria</option>
<option value="Covaxin">Bharat Biotech Covaxin</option>
<option value="Covilo">Sinopharm (Beijing) Covilo</option>
<option value="Inactivated">Sinopharm (Wuhan) Inactivated (Vero Cells)</option>
<option value="CoronaVac">Sinovac CoronaVac</option>
<option value="nonevac">None</option>
</select><br><br>
</form>
<p>Are you boostered?</p>
<label for="once">Once</label> <input value="once" type="radio" id="boostone" name="question" value="once" onclick="displayForm2(this)"><br>
<label for="twice">Twice</label> <input value="twice" type="radio" id="boosttwo" name="question" value="twice" onclick="displayForm2(this)"><br>
<label for="noboost">No</label> <input value="noboost" type="radio" id="boostno" name="question" value="noboost" onclick="displayForm2(this)"><br>
<div style="visibility:hidden; position:relative" id="onceboostContainer">
<form id="onceboost">
<p>Brand of Vaccine</p>
<select name="vaccbrand" id="vaccinebrand">
<option value="nullvac">Select Brand...</option>
<option value="COVONAX">COVOVAX (Novavax formulation)</option>
<option value="Comirnaty">Pfizer/BioNTech Comirnaty</option>
<option value="Spikevax">Moderna Spikevax</option>
<option value="SputnikLight">Gamaleya Sputnik Light</option>
<option value="SputnikV">Gamaleya Sputnik V</option>
<option value="Jcovden">Janssen (Johnson & Johnson) Jcovden</option>
<option value="Vaxzevria">Oxford/AstraZeneca Vaxzevria</option>
<option value="Covaxin">Bharat Biotech Covaxin</option>
<option value="Covilo">Sinopharm (Beijing) Covilo</option>
<option value="Inactivated">Sinopharm (Wuhan) Inactivated (Vero Cells)</option>
<option value="CoronaVac">Sinovac CoronaVac</option>
<option value="nonevac">None</option>
</select><br><br>
<input type="submit">
</form></div>
<div style="visibility:hidden; position:relative" id="twiceboostContainer">
<form id="twiceboost">
<p>Brand of Vaccine (1st)</p>
<select name="vaccbrand" id="vaccinebrand">
<option value="nullvac">Select Brand...</option>
<option value="COVONAX">COVOVAX (Novavax formulation)</option>
<option value="Comirnaty">Pfizer/BioNTech Comirnaty</option>
<option value="Spikevax">Moderna Spikevax</option>
<option value="SputnikLight">Gamaleya Sputnik Light</option>
<option value="SputnikV">Gamaleya Sputnik V</option>
<option value="Jcovden">Janssen (Johnson & Johnson) Jcovden</option>
<option value="Vaxzevria">Oxford/AstraZeneca Vaxzevria</option>
<option value="Covaxin">Bharat Biotech Covaxin</option>
<option value="Covilo">Sinopharm (Beijing) Covilo</option>
<option value="Inactivated">Sinopharm (Wuhan) Inactivated (Vero Cells)</option>
<option value="CoronaVac">Sinovac CoronaVac</option>
<option value="nonevac">None</option>
</select>
<p>Brand of Vaccine (2nd)</p>
<select name="vaccbrand" id="vaccinebrand">
<option value="nullvac">Select Brand...</option>
<option value="COVONAX">COVOVAX (Novavax formulation)</option>
<option value="Comirnaty">Pfizer/BioNTech Comirnaty</option>
<option value="Spikevax">Moderna Spikevax</option>
<option value="SputnikLight">Gamaleya Sputnik Light</option>
<option value="SputnikV">Gamaleya Sputnik V</option>
<option value="Jcovden">Janssen (Johnson & Johnson) Jcovden</option>
<option value="Vaxzevria">Oxford/AstraZeneca Vaxzevria</option>
<option value="Covaxin">Bharat Biotech Covaxin</option>
<option value="Covilo">Sinopharm (Beijing) Covilo</option>
<option value="Inactivated">Sinopharm (Wuhan) Inactivated (Vero Cells)</option>
<option value="CoronaVac">Sinovac CoronaVac</option>
<option value="nonevac">None</option>
</select><br><br>
<input type="submit">
</form></div>
<div style="visibility:hidden;position:relative;top:-110px;margin-top:-110px" id="noboostContainer">
<form id="noform">
<input type="submit">
</form></div>
</div>
<div style="visibility:hidden;position:relative;top:-110px;margin-top:-110px" id="noformContainer">
<form id="noform">
<input type="submit">
</form>
</div>
<br><br><br><br><br><br>
CodePudding user response：
Looks like you have a mismatch between your option value and your displayForm2 value.
Your 'no' option looks like this:
<label for="noboost">No</label>
<input value="noboost" type="radio" id="boostno" name="question" value="noboost" onclick="displayForm2(this)"><br>
And here is your displayForm2 function.
function displayForm2(c) {
if (c.value == "once") {
document.getElementById("onceboostContainer").style.visibility = 'visible';
document.getElementById("twiceboostContainer").style.visibility = 'hidden';
document.getElementById("noboostContainer").style.visibility = 'hidden';
} else if (c.value == "twice") {
document.getElementById("onceboostContainer").style.visibility = 'hidden';
document.getElementById("twiceboostContainer").style.visibility = 'visible';
document.getElementById("noboostContainer").style.visibility = 'hidden';
} else if (c.value == "none") {
document.getElementById("onceboostContainer").style.visibility = 'hidden';
document.getElementById("twiceboostContainer").style.visibility = 'hidden';
document.getElementById("noboostContainer").style.visibility = 'visible';
} else{}
}
As you can see your 'no' option value is noboost whereas the value in your displayForm2 is none. So, I changed the value inside your displayForm2 to noboost and it worked perfectly. I also changed the radio input names in booster section to separate it from the fully vaccinated section inputs.
You can check my code snippet here code-sandbox.