I need to hide a div within my (calculating) order form until a selection is made in a select menu. I've scaled back this 'Ice Cream Order Form' example to see if anyone has any guidance.
In this example, I would want to hide the 'toppings' div until a selection is made from the 'scoopsSelector' select menu.
.plus {
display: none;
}<h1>Ice Cream Order Form</h1>
<form action="icecream_formHandler.php" method="post" enctype="multipart/form-data">
<select id="flavor" name="flavor">
<option selected="true" disabled="disabled">Select Your Flavor</option>
<option value="Vanilla">Vanilla</option>
<option value="Chocolate">Chocolate</option>
<option value="Strawberry">Mixed</option>
</select><br><br>
<select id="scoopsSelector" name="scoopsSelector" onchange="calcuMath()">
<option value='0' selected="true" disabled="disabled">How Many Scoops?</option>
<option value="3">One Scoop - $3.00</option>
<option value="5">Two Scoops - $5.00</option>
<option value="7">Three Scoops - $7.00</option>
</select><br><br>
<!-- This hidden input uses it's population to pass the <select> text instead of the <select>
value to the php form handler -->
<input type="hidden" id="scoops" class="scoops" name="scoops">
<script>
const scoopsSelector = document.getElementById('scoopsSelector')
scoopsSelector.addEventListener('input', function() {
let selectedOptText = scoopsSelector.options[scoopsSelector.selectedIndex].text
document.querySelector('.scoops').value = selectedOptText;
})
</script>
<div name="toppings" id="toppings">
<p>Toppings: (Optional)</p>
<select id="plus" class="plus">
<option value="add" id="add">+</option>
</select>
<input type="hidden" id="nuts" name="nuts" value="0" ><input type="checkbox"
name="nutsCheckbox" onchange="this.previousSibling.value=3-this.previousSibling.value;
calcuMath();"> Nuts $3.00<br><br>
<select id="plus" class="plus">
<option value="add" id="add">+</option>
</select>
<input type="hidden" id="sprinkles" name="sprinkles" value="0"><input type="checkbox"
name="sprinklesCheckbox" onchange="this.previousSibling.value=3-this.previousSibling.value;
calcuMath();"> Sprinkles $3.00<br><br>
<select id="plus" class="plus">
<option value="add" id="add">+</option>
</select>
<input type="hidden" id="syrup" name="syrup" value="0"><input type="checkbox"
name="syrupCheckbox" onchange="this.previousSibling.value=4-this.previousSibling.value;
calcuMath();"> Syrup $4.00<br><br><br>
<select id="plus" class="plus">
<option value="add" id="add">+</option>
</select>
</div>
<select id="dishSelector" name="dishSelector" onchange="calcuMath()">
<option value='0' selected="true" disabled="disabled">Cup or Cone</option>
<option value="3">Cup - $3.00</option>
<option value="4">Cone - $4.00</option>
</select><br><br><br>
<input type="hidden" id="dish" class="dish" name="dish">
<script>
const dishSelector = document.getElementById('dishSelector')
dishSelector.addEventListener('input', function() {
let selectedOptText = dishSelector.options[dishSelector.selectedIndex].text
document.querySelector('.dish').value = selectedOptText;
})
</script>
TOTAL: $<a id="result"></a><br><br>
<script>
function calcuMath() {
var z;
var a = document.getElementById("scoopsSelector").value;
var b = document.getElementById("nuts").value;
var c = document.getElementById("sprinkles").value;
var d = document.getElementById("syrup").value;
var e = document.getElementById("dishSelector").value;
var sel = document.getElementById("plus");
var selection = sel.options[sel.selectedIndex].value;
var more = document.getElementById("add");
if (selection == "add") {
z = parseFloat(a) + parseFloat(b) + parseFloat(c) + parseFloat(d) + parseFloat(e);
}
document.getElementById("result").innerHTML = "" + z + "";
}
</script>
<input type="submit" id="submitButton" name="submitButton" value="Place Order">
</form>You can add a second function here in your HTML onChange event listener on that particular select element that will show your div if any change is made
function showSelect(){
document.getElementById('toppings').style.opacity = '1'
}.plus {
display: none;
}
#toppings{
opacity:0;
transition: opacity 350ms ease;
}<h1>Ice Cream Order Form</h1>
<form action="icecream_formHandler.php" method="post" enctype="multipart/form-data">
<select id="flavor" name="flavor">
<option selected="true" disabled="disabled">Select Your Flavor</option>
<option value="Vanilla">Vanilla</option>
<option value="Chocolate">Chocolate</option>
<option value="Strawberry">Mixed</option>
</select><br><br>
<select id="scoopsSelector" name="scoopsSelector" onchange="showSelect(); calcuMath()">
<option value='0' selected="true" disabled="disabled">How Many Scoops?</option>
<option value="3">One Scoop - $3.00</option>
<option value="5">Two Scoops - $5.00</option>
<option value="7">Three Scoops - $7.00</option>
</select><br><br>
<!-- This hidden input uses it's population to pass the <select> text instead of the <select>
value to the php form handler -->
<input type="hidden" id="scoops" class="scoops" name="scoops">
<script>
const scoopsSelector = document.getElementById('scoopsSelector')
scoopsSelector.addEventListener('input', function() {
let selectedOptText = scoopsSelector.options[scoopsSelector.selectedIndex].text
document.querySelector('.scoops').value = selectedOptText;
})
</script>
<div name="toppings" id="toppings">
<p>Toppings: (Optional)</p>
<select id="plus" class="plus">
<option value="add" id="add">+</option>
</select>
<input type="hidden" id="nuts" name="nuts" value="0" ><input type="checkbox"
name="nutsCheckbox" onchange="this.previousSibling.value=3-this.previousSibling.value;
calcuMath();"> Nuts $3.00<br><br>
<select id="plus" class="plus">
<option value="add" id="add">+</option>
</select>
<input type="hidden" id="sprinkles" name="sprinkles" value="0"><input type="checkbox"
name="sprinklesCheckbox" onchange="this.previousSibling.value=3-this.previousSibling.value;
calcuMath();"> Sprinkles $3.00<br><br>
<select id="plus" class="plus">
<option value="add" id="add">+</option>
</select>
<input type="hidden" id="syrup" name="syrup" value="0"><input type="checkbox"
name="syrupCheckbox" onchange="this.previousSibling.value=4-this.previousSibling.value;
calcuMath();"> Syrup $4.00<br><br><br>
<select id="plus" class="plus">
<option value="add" id="add">+</option>
</select>
</div>
<select id="dishSelector" name="dishSelector" onchange="calcuMath()">
<option value='0' selected="true" disabled="disabled">Cup or Cone</option>
<option value="3">Cup - $3.00</option>
<option value="4">Cone - $4.00</option>
</select><br><br><br>
<input type="hidden" id="dish" class="dish" name="dish">
<script>
const dishSelector = document.getElementById('dishSelector')
dishSelector.addEventListener('input', function() {
let selectedOptText = dishSelector.options[dishSelector.selectedIndex].text
document.querySelector('.dish').value = selectedOptText;
})
</script>
TOTAL: $<a id="result"></a><br><br>
<script>
function calcuMath() {
var z;
var a = document.getElementById("scoopsSelector").value;
var b = document.getElementById("nuts").value;
var c = document.getElementById("sprinkles").value;
var d = document.getElementById("syrup").value;
var e = document.getElementById("dishSelector").value;
var sel = document.getElementById("plus");
var selection = sel.options[sel.selectedIndex].value;
var more = document.getElementById("add");
if (selection == "add") {
z = parseFloat(a) + parseFloat(b) + parseFloat(c) + parseFloat(d) + parseFloat(e);
}
document.getElementById("result").innerHTML = "" + z + "";
}
</script>
<input type="submit" id="submitButton" name="submitButton" value="Place Order">
</form>