Tengo un sitio web donde enumero los productos de la tienda y quiero comenzar a hacer pedidos. Sin embargo, para empezar, necesito cambiar los números de cada uno.
mi código es:
$run_produtos = mysqli_query($con,$get_produtos); while($row_produtos=mysqli_fetch_array($run_produtos)){ $id = $row_produtos['id']; $categoria = $row_produtos['categoria']; $foto = $row_produtos['foto']; $nome = $row_produtos['nome']; $descricao = $row_produtos['descricao']; $preco = $row_produtos['preco']; echo " <div style='text-align: left;''> <center> <img src='produtos/$foto' style='width: 200px; height: auto; border: 2px solid grey'> <h3>$nome</h3> <h4>$descricao</h4> <h3>Valor: R$ $preco</h3> <form> <input style='font-size: 20px;' type='button' onclick='decreaseValue()' value='-' /> <input style='font-size: 20px; width: 70px; text-align: center;' type='text' id='number' value='$number'/> <input style='font-size: 20px;' type='button' onclick='incrementValue()' value='+' /> </form> </center> <hr> </div> <br> "; }Y el código del botón es:
<script> function incrementValue() { var value = parseInt(document.getElementById('number').value, 10); value = isNaN(value) ? 0 : value; value++; document.getElementById('number').value = value; } function decreaseValue() { var value = parseInt(document.getElementById('number').value, 10); value = isNaN(value) ? 0 : value; value--; document.getElementById('number').value = value; } </script>¡El botón funciona! El problema es que cambia el número solo en el primer producto. Supongo que necesito indexar estos productos, pero cuando lo intento, el sitio web muestra solo un producto.
Por favor, ¿qué hago?
Cambie el id='number' duplicado para que sean únicos al incluir $id en él.
También agregue una entrada oculta que contenga $id . El código de procesamiento de formularios puede usar $id = $_POST['id']; para obtener este valor.
$run_produtos = mysqli_query($con,$get_produtos); while($row_produtos=mysqli_fetch_array($run_produtos)){ $id = $row_produtos['id']; $categoria = $row_produtos['categoria']; $foto = $row_produtos['foto']; $nome = $row_produtos['nome']; $descricao = $row_produtos['descricao']; $preco = $row_produtos['preco']; echo " <div style='text-align: left;''> <center> <img src='produtos/$foto' style='width: 200px; height: auto; border: 2px solid grey'> <h3>$nome</h3> <h4>$descricao</h4> <h3>Valor: R$ $preco</h3> <form> <input type="hidden" name="id" value="$id"> <input style='font-size: 20px;' type='button' onclick='decreaseValue($id)' value='-' /> <input style='font-size: 20px; width: 70px; text-align: center;' type='text' id='number$id' value='$number'/> <input style='font-size: 20px;' type='button' onclick='incrementValue($id)' value='+' /> </form> </center> <hr> </div> <br> "; } Luego cambie el JS para que use el argumento id .
<script> function incrementValue(id) { var el = document.getElementById('number'+id) var value = parseInt(el.value, 10); value = isNaN(value) ? 0 : value; value++; el.value = value; } function decreaseValue() { var el = document.getElementById('number'+id) var value = parseInt(el.value, 10); value = isNaN(value) ? 0 : value; value--; el.value = value; } </script> También podría <input type='number'> en su lugar. La mayoría de los navegadores generarán controles +/- en la entrada, por lo que no necesita hacerlo usted mismo.