I have:
- A number of checkboxes
- A button to submit
- A JSON string object.
- A function to check which checkboxes are checked, and return their values in an alert or console.log with an evenlistener on my submit-button.
- An output DIV
How can I compare the values I get from the function that checks which checkboxes are checked to the values in the JSON string object, and echo them into the output DIV? Say I check the "Cheese" and "Garlic" boxes, and expect to receive the following output:
- Recipe1: Cheese, Tomato, Garlic
- Recipe2: Cheese, Potato, Mayo, Beef, Garlic, Butter
The HTML:
<form action="" method="">
<input type="checkbox" value="Cheese">Cheese<br>
<input type="checkbox" value="Tomato">Tomato<br>
<input type="checkbox" value="Garlic">Garlic<br>
<input type="checkbox" value="Bacon">Bacon<br>
<input type="checkbox" value="Paprika">Paprika<br>
<input type="checkbox" value="Onion">Onion<br>
<input type="checkbox" value="Potato">Potato<br>
<input type="checkbox" value="Mayo">Mayo<br>
<input type="checkbox" value="Beef">Beef<br>
<input type="checkbox" value="Garlic">Garlic<br>
<input type="checkbox" value="Butter">Butter<br>
<input type="button" value="Get recipes" id="getRecipesButton">
</form>
<div id="output">The results end up here</div>
The JS:
//Recipes JSON-string:
var recipes = [
{
name:"recipe1",
ingredients:
[
{ingredient:"Cheese"},
{ingredient:"Tomato"},
{ingredient:"Garlic"}
]
},
{
name:"recipe2",
ingredients:
[
{ingredient:"Cheese"},
{ingredient:"Bacon"},
{ingredient:"Paprika"},
{ingredient:"Onion"}
]
},
{
name:"recipe3",
ingredients:
[
{ingredient:"Cheese"},
{ingredient:"Potato"},
{ingredient:"Mayo"},
{ingredient:"Beef"},
{ingredient:"Garlic"},
{ingredient:"Butter"}
]
}
];
//Test to retrieve single, specific entries:
// console.log(recipes[1].ingredients[0].ingredient);
//Test to get/return the checked values of the checkboxes:
function selectedBoxes(form) {
let selectedBoxesArr = [];
let inputFields = form.getElementsByTagName('input');
let inputFieldsNumber = inputFields.length;
for(let i=0; i<inputFieldsNumber; i++) {
if(
inputFields[i].type == 'checkbox' &&
inputFields[i].checked == true
) selectedBoxesArr.push(inputFields[i].value);
}
return selectedBoxesArr;
}
var getRecipesButton = document.getElementById('getRecipesButton');
getRecipesButton.addEventListener("click", function(){
let selectedCheckBoxes = selectedBoxes(this.form);
alert(selectedCheckBoxes);
});
Aucun commentaire:
Enregistrer un commentaire