jquery dentro de um while php

M

mmvs

Membro
Bom dia,

Estou a ter um problema ao fazer uma listagem de produtos vindos de uma base de dados, cuja resultado da listagem é um dos campos ser um input para adicionar determinadas quantidades daquele produto ao carrinho de compras. A ideia é no input com class="quantidade_requisitada", antes de submeter testar com jquery se o campo está vazio, e se o valor introduzido é superior ao valor em stock - input cuja class="quantidade_stock". A seguir o código da listagem e do jquery.

Lista produtos:

[CODE\]
$lista_produtos = listar_produtos();

$num_rows_prod = mysql_query($lista_produtos);
while($row = mysql_fetch_row($num_rows_prod)){
$id_produto = $row[0];
$taxa_iva = $row[1];
$nome = $row[2];
$descricao = $row[3];
$quantidade = $row[4];
$preco = $row[5];
$imagem = $row[6];
?>
<div class="produto">
<div class="imagem_produto">
<a href="cliente.php?comentarios_produto=true&p=<?php echo $id_produto; ?>"><img src="../imagens/imagens_produtos/<?php echo $imagem; ?>" style="border-style:none" width="210" height="160" border="10" /></a>
</div>
<?php echo "Nome:" . $nome; ?></br>
<?php echo "Preço:" . $preco . "€"; ?></br>
<font color="blue"><?php echo "Taxa iva:" . $taxa_iva . "%"; ?></br></font>
<?php echo "Stock:" . $quantidade . " Un"; ?>
</br>
<hr>
</br>
<div align="center">
<form action="produtos_carrinho_wishlist.php?apc=true&id_utilizador=<?php echo $_SESSION['id_utilizador']; ?>&id_produto=<?php echo $id_produto; ?>" method="POST">
<?php
echo "<sup>+</sup>" . '<a href="produtos_carrinho_wishlist.php?apw=true&id_utilizador=' . $_SESSION['id_utilizador'] . '&id_produto=' . $id_produto . '"><img src="../imagens/wishlist.png" width="25px" height="20px"/></a>';
if($quantidade == 0){
?>
<sup><input type="text" readonly="true" name="quantidade" id="valor_quantidade" />+</sup>
<?php
}else{
?>
<input type="hidden" class="quantidade_stock" value="<?php echo $quantidade; ?>"/>
<sup><input type="text" class="quantidade_requisitada" value="" name="quantidade" id="valor_quantidade" />+</sup>
<?php
}
?>
<input type="image" class="adiciona_carrinho" src="../imagens/carrinho.png" width="25px" height="20px" alt="Submit" >
</form>
</div>
</div>
<?php
}
?>
</div>
[/CODE\]

jquery:

[CODE\]
$(".adiciona_carrinho").click(function(){
var quantidade_stock = $('.quantidade_stock').val();
var quantidade_requisitada = $('.quantidade_requisitada').val();
if(quantidade_requisitada === ""){
if(!alert ("Campo vazio!!")){
return false;
}
}
var qtd_stock = parseInt(quantidade_stock);
var qtd_requisitada = parseInt(quantidade_requisitada);
if(qtd_requisitada > qtd_stock){
if(!alert("Quantidade requisitada maior que quantidade em stock!")){
return false;
}
}
});
[/CODE\]

Para o primeiro produto, funciona tudo direito. Mas para os restantes produtos não, e aparentemente o input do tipo image, com class="adicionar_carrinho", dos restantes produtos apenas lê o campo de input text com class="quantidade_requisitida", do primeiro produto.

Para os restantes produtos, o input class="quantidade_requisitada", seja vazio, maior ou menor que a quantidade em stock, class="quantidade_stock", dá sempre origem a um dos alert(). Excepto se também preencher o input class="quantidade_requsitada" do primeiro produto.

Desde já obrigado pela ajuda.
 
Última edição:
mmvs disse:
Bom dia,

Estou a ter um problema ao fazer uma listagem de produtos vindos de uma base de dados, cuja resultado da listagem é um dos campos ser um input para adicionar determinadas quantidades daquele produto ao carrinho de compras. A ideia é no input com class="quantidade_requisitada", antes de submeter testar com javascript se o campo está vazio, e se o valor introduzido é superior ao valor em stock - input cuja class="quantidade_stock". A seguir o código da listagem e do javascript.

Lista produtos:
$lista_produtos = listar_produtos();

$num_rows_prod = mysql_query($lista_produtos);
while($row = mysql_fetch_row($num_rows_prod)){
$id_produto = $row[0];
$taxa_iva = $row[1];
$nome = $row[2];
$descricao = $row[3];
$quantidade = $row[4];
$preco = $row[5];
$imagem = $row[6];
?>
<div class="produto">
<div class="imagem_produto">
<a href="cliente.php?comentarios_produto=true&p=<?php echo $id_produto; ?>"><img src="../imagens/imagens_produtos/<?php echo $imagem; ?>" style="border-style:none" width="210" height="160" border="10" /></a>
</div>
<?php echo "Nome:" . $nome; ?></br>
<?php echo "Preço:" . $preco . "€"; ?></br>
<font color="blue"><?php echo "Taxa iva:" . $taxa_iva . "%"; ?></br></font>
<?php echo "Stock:" . $quantidade . " Un"; ?>
</br>
<hr>
</br>
<div align="center">
<form action="produtos_carrinho_wishlist.php?apc=true&id_utilizador=<?php echo $_SESSION['id_utilizador']; ?>&id_produto=<?php echo $id_produto; ?>" method="POST">
<?php
echo "<sup>+</sup>" . '<a href="produtos_carrinho_wishlist.php?apw=true&id_utilizador=' . $_SESSION['id_utilizador'] . '&id_produto=' . $id_produto . '"><img src="../imagens/wishlist.png" width="25px" height="20px"/></a>';
if($quantidade == 0){
?>
<sup><input type="text" readonly="true" name="quantidade" id="valor_quantidade" />+</sup>
<?php
}else{
?>
<input type="hidden" class="quantidade_stock" value="<?php echo $quantidade; ?>"/>
<sup><input type="text" class="quantidade_requisitada" value="" name="quantidade" id="valor_quantidade" />+</sup>
<?php
}
?>
<input type="image" class="adiciona_carrinho" src="../imagens/carrinho.png" width="25px" height="20px" alt="Submit" >
</form>
</div>
</div>
<?php
}
?>
</div>

javascript:

$(".adiciona_carrinho").click(function(){
var quantidade_stock = $('.quantidade_stock').val();
var quantidade_requisitada = $('.quantidade_requisitada').val();
if(quantidade_requisitada === ""){
if(!alert ("Campo vazio!!")){
return false;
}
}
var qtd_stock = parseInt(quantidade_stock);
var qtd_requisitada = parseInt(quantidade_requisitada);
if(qtd_requisitada > qtd_stock){
if(!alert("Quantidade requisitada maior que quantidade em stock!")){
return false;
}
}
});


Para o primeiro produto, funciona tudo direito. Mas para os restantes produtos não, e aparentemente o input do tipo image, com class="adicionar_carrinho", dos restantes produtos apenas lê o campo de input text com class="quantidade_requisitida", do primeiro produto.

Para os restantes produtos, o input class="quantidade_requisitada", seja vazio, maior ou menor que a quantidade em stock, class="quantidade_stock", dá sempre origem a um dos alert(). Excepto se também preencher o input class="quantidade_requsitada" do primeiro produto.

Desde já obrigado pela ajuda.
Clicar para expandir...

Se faz favor coloca isso dentro da tag \[CODE\] \[/CODE\]
 
A ajuda que te posso dar é que as tuas tags de [CODE] não estão a funcionar. Não ponhas as barras (\) antes dos parênteses retos.

(e podem-se usar as tags [PLAIN] para escrever tags sem serem interpretadas.)
 
O problema é que estas a criar esses dois input types mas não o estas a associar a nenhum produto, logo não tem como distinguir se são os valores em stock do produto "a" ou "b".

porque depois quando fazes "$('.quantidade_stock').val()" no javascript, queres obter o valor do produto "a" ou "b"? é que tens N elementos com essa classe...e ele não adivinha...
 
Ok. Obrigado Warlord pela ajuda. Sim estou a entender o que queres dizer. Julguei apenas, que ao usar class ao invés de id, resolveria esse problema... mas a ideia é, quando clico no input submit:

[CODE\]
<input type="image" class="adiciona_carrinho" src="../imagens/carrinho.png" width="25px" height="20px" alt="Submit" >
[/CODE\]

do produto a, quero ler os input do produto a e quando clico no link submit do produto b, quero ler os input do produto b.
Quando digo ler os input refiro me aos 2, hidden(relativo à quantidade em stock) e text(relativo à quantidade requisitada).

Existe alguma forma para dar a volta à situação?

Obrigado pela ajuda.
 
Última edição:
Por exemplo
Código: 
<input type="image" id=12 src="../imagens/carrinho.png" width="25px" height="20px" alt="Submit" stock="32">

JS:
alert($("#12").attr("stock"))

o 12 é o id do produto na BD.
 
Eu não controlo os ids... os produtos são listados dentro do while, não terei forma de saber quantos serão listados.

Mas obrigado pela ajuda.
 
mmvs disse:
Eu não controlo os ids... os produtos são listados dentro do while, não terei forma de saber quantos serão listados.
Clicar para expandir...

Podes controlar os ids da mesma maneira que os controlas em todos os outros elementos lá para cima, dentro do while, em que usas a variável $id_produto. Faz o mesmo nos inputs, como o Warlord sugeriu, usando a variável e não um número estático.

Depois tens de identificar qual é o carrinho que foi clicado, para poderes ir buscar os inputs de texto corretos (que também estarão identificados pelo id do produto, e não com uma classe). Suponho que podes usar esta técnica:

http://stackoverflow.com/questions/48239/getting-the-id-of-the-element-that-fired-an-event
 
Boas,

Continuo sem perceber como vou buscar com java ou jquery, o id do input se este está desta forma:

[\CODE]
<?php echo $id_produto; ?>
[/CODE\]
 
Última edição:
O javascript verá o ID numérico, não vê o código PHP. Tens de ter identificadores que permitam selecionar certos elementos, e que incluam também o ID, para poderes distingui-los. Por exemplo, podia ser:

Código: 
<input type="text" id="stock-<?php echo $id_produto; ?>">
<input type="image" id="adiciona_carrinho-<?php echo $id_produto; ?>">

Depois no javascript terias de pegar no ID (sabendo o elemento que foi clicado) e extrair o ID do produto com operações de strings. Com esse ID constróis os identificadores jquery que precisas para ir buscar as caixas de texto correspondentes, e fazes a conta.

Também podias fazer de maneira mais simples e ter apenas um botão para adicionar ao carrinho, e na função associada ias buscar cada par pedido/stock , que teriam ids como pedido-1/stock-1.
 
mmvs disse:
Podes só exmplificar como pegas no id dessa forma? o resto acho que consigo fazer...
Clicar para expandir...

Com o link do meu comentário anterior, do Stack Overflow. Nunca usei, mas aparentemente pode-se fazer assim:

Código: 
$(document).ready(function(){
    $("a").click(function(event){
        alert(event.target.id);
    });
});
 
nfk, repara que eu não tenho 3 inputs do tipo submit. Apenas tenho 1, que supostamente terá que ler os input hidden(com o stock) e text(valor introduzido pelo utilizador), para cada produto listado.
De facto quando atribuo o id do produto ao elemento id no input submit, e passo o valor através de alert(this.id) ele mostra o id respectivo de cada produto...claro. O meu problema é como obter os valores de stock do input hidden e da quantidade requisitada introduzida pelo utilizador no input text, para cada produto...

Uma coisa que deve ser tão simples ou simplesmente não dá desta forma, está a dar me uma dor de cabeça... :)

(Alterei alguns dados do tópico dada a sintaxe que usei, o que não deixa de ser javascript)
 
Última edição:
mmvs disse:
nfk, repara que eu não tenho 3 inputs do tipo submit. Apenas tenho 1, que supostamente terá que ler os input hidden(com o stock) e text(valor introduzido pelo utilizador), para cada produto listado.
Clicar para expandir...

mmvs disse:
O meu problema é como obter os valores de stock do input hidden e da quantidade requisitada introduzida pelo utilizador no input text, para cada produto...
Clicar para expandir...

Ok, pensava que tinhas um elemento clickable para cada item. Assim é a segunda sugestão que dei no início, quando disse que podia ser mais simples se tivesses só um botão. Em cada par de inputs (stock ,quantidade pedida) pões uma classe x e um id que identifique o produto (stock-1, pedido-1), e na função de javascript nem precisas de saber o que foi clicado, fazes um loop em todos os inputs da classe x, extrais o id para identificar o ID do produto e fazes as contas com os stocks e pedidos correspondentes.
 
No progress. Podes exemplificar como extraio dos input hidden e text a quantidade stock e requisitada respectivamente? tendo nas tags o seguinte:

[\CODE]
<input type="hidden" class="quantidade_stock" id="<?php echo $id_produto; ?>" value="<?php echo $quantidade; ?>"/>

<input type="text" class="quantidade_requisitada" id="<?php echo $id_produto ?>" name="quantidade" value="" size="1" />

<input type="image" class="adiciona_carrinho" id="<?php echo $id_produto; ?>" src="../imagens/carrinho.png" width="25px" height="20px" alt="Submit" />
[/CODE\]
 
Última edição:
Eu não utilizaria como id dos inputs simplesmente o ID do produto, porque é suposto o id ser único. Usa algo como "stock-$id_produto". Depois no javascript tens de fazer split pelo "-" e o ID é o que está à direita.
 
porra que complicação...

gera apenas um input por produto, o name tem de ser o id do produto caso contrario depois no servidor não sabes a quantidade que foi submetida para cada produto.
no proprio input colocas um atributo com o stock do mesmo
onkeyup do input validas se stock é inferior ao valor atual, dá erro se não for (podes adicionalmente fazer disable do submit button até que o erro seja ultrapassado).


Código: 
<input type="text" class="quantidade_requisitada" name="<?php echo $id_produto ?>" value="" size="1" stock="<?php echo $quantidade?>" onkeyup="verifica_stock(this);"/>

<script>
function verifica_stock(param) {
stock=parseInt(param.getAttribute('stock'));
pedido=parseInt(param.value);

if(stock < pedido){
alert("Quantidade inválida");
}
}
</script>

exemplo com stock = 23 (i.e. introduzindo algo superior a 24 dá erro)

https://jsfiddle.net/xbx90gab/1/
 
Inicie sessão ou registe-se para poder participar.
Back
Topo