I am trying to create a mock smoothie ordering form with javascript and html checkboxes. When I submit the form all options are selected and I am not sure why.
<form name="smoothieForm" onsubmit="return false" action="#" method="get">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
<p>Liquid/Dairy Ingredients (Check all that you would like)</p>
<input type='checkbox' id="yogurt">Yogurt
<input type='checkbox' id="milk">Milk
<input type='checkbox' id="oatmilk">Oat Milk
<input type='checkbox' id="soymilk">Soy Milk
<input type='checkbox' id="ice">Ice
<p>Fruit/Vegetable Ingredients (Check all that you would like)</p>
<input type='checkbox' id="spinach">Spinach
<input type='checkbox' id="strawberries">Strawberries
<input type='checkbox' id="avocado">Avocado
<input type='checkbox' id="blueberries">Blueberries
<input type='checkbox' id="mango">Mango
<input type='checkbox' id="bananas">Bananas
<p>Miscellaneous Ingredients (Check all that you would like)</p>
<input type='checkbox' id="chocolate">Chocolate
<input type='checkbox' id="proteinpowder">Protein Powder
<input type='checkbox' id="matcha">Matcha
<input type="submit" value="Submit" onclick="validateForm()">
</form>
<img/>
<p id="orderResults"></p>
function validateForm() {
let x = document.forms["smoothieForm"]["fname"].value;
let y = document.forms["smoothieForm"]["lname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
if (y == ""){
alert("Name must be filled out");
return false;
}
let name = x + y;
let ld = '';
if(document.getElementById("yogurt").checked = true){
ld += " yogurt ";
}
if(document.getElementById("milk").checked = true){
ld += " milk ";
}
if(document.getElementById("oatmilk").checked = true){
ld += " oatmilk ";
}
if(document.getElementById("soymilk").checked = true){
ld += " soymilk ";
}
if(document.getElementById("ice").checked = true){
ld += " ice ";
}
let fv = '';
if(document.getElementById("spinach").checked = true){
fv += " spinach ";
}
if(document.getElementById("strawberries").checked = true){
fv += " strawberries ";
}
if(document.getElementById("avocado").checked = true){
fv += " avocado ";
}
if(document.getElementById("bananas").checked = true){
fv += " bananas ";
}
if(document.getElementById("blueberries").checked = true){
fv += " blueberries ";
}
if(document.getElementById("mango").checked = true){
fv += " mango ";
}
let m = '';
if(document.getElementById("matcha").checked = true){
m += " matcha ";
}
if(document.getElementById("chocolate").checked = true){
m += " chocolate ";
}
if(document.getElementById("proteinpowder").checked = true){
m += " proteinpowder ";
}
s = 'Congrats ' + name + ', your order is submitted! You chose: ' + ld + 'for liquid/dairy ingredients, and ' + fv +
'for your fruits and vegetables as well as ' + m + 'for your miscellaneous ingredients, enjoy!';
printOrder(s);
}
function printOrder(s){
document.getElementById("orderResults").innerHTML= s;
const img = document.querySelector("img");
img.src = "img/smoothie.svg";
}
I know this code is pretty ugly but I would just like to be able to create that concatenated string and output to my p element, without it doing this
What it does when I submit