[ad_1]
Hello.
I need to put a for that I have done inside a select:
//Consulta a la API para obtener los tipos de recetas
//Forma de atacar al servicio REST
let xmlHttp = new XMLHttpRequest();
xmlHttp.open(
“GET”,
“http://localhost/recetarioappweb/sistema/API/ingredientes.php”,
false
); // false for synchronous request
xmlHttp.send(null);
//console.log(xmlHttp.responseText);
//Convertimos en objeto
let resultadoIngredientes = JSON.parse(xmlHttp.responseText);
let html = “<label>Seleccione uno o varios ingredientes: </label> <br><br>”;
for (let i = 0; i < resultadoIngredientes.length; i++) {
html += `<div class=”form-check form-check-inline”>
<input class=”form-check-input” type=”checkbox” value=”${resultadoIngredientes[i].id}” id=’inlineCheckbox1′ name=”ingredientes[]”>
<label class=”form-check-label” for=”inlineCheckbox1″>
${resultadoIngredientes[i].nombre}
</label>
</div>`;
}
document.getElementById(“ingredientes”).innerHTML += html;
Now the ingredients are with checkbox but I want to pass it to the select and inside the for.
But I need to display the ingredients in a select instead of a checkbox and a free text input for the quantity next to it. In addition, I also need to put an add button to add more ingredients.
If I press the button it will show me another select with another input next to it for the quantity.
The idea is to output something like this:
I have tried a thousand ways but it gives me an error, can someone help me?
Thank!!
Before considering the JS, I would start with your HTML and figure out what you need to populate.
For example
<section id=’create-recipe’>
<form id=’add-ingredients’>
<h1>Create Recipe</h1>
<label for=”recipe-name”>Recipe Name</label>
<input type=”text” name=”recipe-name” id=’recipe-name’>
<h2>Add Ingredients</h2>
<ul class=”added-ingredients”>
<li class=”ingredient”>
…..
[ad_2]
