Bucle for dentro de un select

miriambc · 24 Noviembre de 2022, 11:25

Hola.

Necesito meter un for que tengo hecho dentro de un 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;

Ahora los ingredientes me salen como en la captura.

Pero necesito mostrar los ingredientes en un select en lugar de que aparezcan checkbox y al lado un input de texto libre para la cantidad. Además también necesito poner un botón añadir para ir añadiendo más ingredientes.

Si le doy al botón me mostrará otro select con otro input al lado para la cantidad.

La idea es que salga algo como el adjunto posible vista.

He intentado mil formas pero me da error, ¿alguien me puede ayuda?

Había pensado algo así pero no consigo montarlo según mi código:

<?php
!empty($_POST) && var_dump($_POST);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>Crear/Editar receta</h1>
<form method="post">
    Nombre: <input name="nombre_receta"><br />
    (Otros campos de la receta)
    <h2>Añadir ingredientes:</h2>
    <button id="add_ingrediente">Añadir</button>
    <div id="form_ingredientes">
    </div>
    <div><input type="submit" value="Enviar"></div>
</form>
<script>
    let cont = 0;
    document.querySelector('#add_ingrediente').addEventListener('click', function (event) {
        event.preventDefault();
        text = '<div>\
                    <div style="display: inline">\
                    <select name="ingredientes['+cont+'][\'id_ingrediente\']" id="">\
                        <option value="">Selecciona ingrediente</option>\
                        <option value="1">Leche</option>\
                        <option value="2">Huevo</option>\
                        <option value="3">Arroz</option>\
                    </select>\
                    </div>\
                    <div style="display: inline">\
                        <input name="ingredientes['+cont+'][\'cantidad\']" type="text">\
                    </div>\
                </div>';
        document.querySelector('#form_ingredientes').insertAdjacentHTML("beforeend", text);
        cont++;
    });
</script>
</body>
</html>

Rock Lee · 24 Noviembre de 2022, 23:14

Bueno primero el tema de identacion puede ser el mismo error en si, aunque hacerlo todo junto puede ser tu problema ¿probaste hacerlo funcion y llamarlo pasando un unico valor? para ir descartanto errores por las reglas del tipo de lenguaje usado...

Saludos Familia!

Bomber Code

Publicidad

Bucle for dentro de un select

miriambc

Rock Lee

Temas Similares (5)