I have a website where I list the store products and want start a make orders. However, for begins, I need change the numbers of the each one.
My code is:
$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>
";
}
And the button code is:
<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>
The button works! The problem is that his changes the numbber only in the first product. I guess that I need indexed this products, but when I try, the website shows only one product.
Please, what I do make?
Change the duplicate id='number' so they're unique by including $id in it.
Also add a hidden input that contains $id. The form-processing code can use $id = $_POST['id']; to get this value.
$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>
";
}
Then change the JS so it uses the id argument.
<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>
You could also <input type='number'> instead. Most browsers will generate +/- controls in the input, so you don't need to do it yourself.