I’m trying to build a form similar to the one below (I changed the content for privacy), and I cannot figure out how to build this without the separate dropdown boxes canceling each other out.
I’m sorry to say that I don’t know much of anything about JavaScript. I found this code and modified the values that I needed, and built a second dropdown, which is when I learned that “OnChange” seems to cancel out anything that’s currently selected. In the real form that I’ll be using, I’ll have up to 5 different drop-down options.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script>
function showPara(val) {
// check if the value is not empty or undefined
if (val !== undefined && val !== "") {
// then selelct all the p element which have a common class and add the coass which hide the element
document.querySelectorAll(".pClass").forEach(function(item) {
item.classList.add("hidePara");
// remove the class hide element where the id of p matches with the selected value
document.getElementById(val).classList.remove('hidePara')
})
}
}
</script>
<style>
.hidePara {
display: none;
}
.pClass {
color: blue;
}
</style>
<form>
Favorite Breakfast
<br>
<select onchange="showPara(this.value)">
<option>Select</option>
<option value ='6A'>Pancakes</option>
<option value ='6B'>Waffles</option>
</select>
<br>
<br>
Favorite Juice
<br>
<select onchange="showPara(this.value)">
<option>Select</option>
<option value ='6C'>Orange</option>
<option value ='6D'>Grape</option>
</select>
</form>
<div>
Alert - Garmin Terms Violation
<br><br>
Dear Breakfast Club Member,
<br><br>
We want to take a quick survey for the upcoming breakfast event. Please select an option for both questions.
<br><br>
Favorite Breakfast:
<!-- ------------------------------------------------------------------------------------------------- -->
<span id="6A" class="pClass hidePara">Pancakes</span>
<span id="6B" class="pClass hidePara">Waffles</span>
<!-- ------------------------------------------------------------------------------------------------- -->
<br>
Favorite Juice:
<!-- ------------------------------------------------------------------------------------------------- -->
<span id="6C" class="pClass hidePara">Orange</span>
<span id="6D" class="pClass hidePara">Grape</span>
<!-- ------------------------------------------------------------------------------------------------- -->
<br><br>
Thank you so much for participating.
<br><br>
Regards,
<br>
Breakfast Club President
</div>
</body>
</html>
I tried to change “OnChange” to “OnSelect,” but that didn’t fix the issue.
I want to be able to have someone select their favorite breakfast dropdown box and when they select their favorite juice, not clear out the first value selected for the favorite breakfast.