Vários forms na mesma página.

jQuery

JavaScript

PHP

Ajax

02/09/2020

Bom dia,

Tenho uma página onde carrego vários itens, cada item gera um form dinamicamente, com os inputs e um submit em cada form exemplo:
...
while ($dados = mysqli_fetch_array($query)) {
$idItem = $dados['idItem'];
$descProduto = $dados['descItem'];
$unidadeProduto = $dados['unidadeSigla'];
$precoProduto = $dados['valorItem'];
$imagemProduto = $dados['imagemItem'];
?>
<li>
<form id="formItem">
<img src="<?= '../'.$imagemProduto; ?>"><br>
<input type="text" id="idProduto" name="idProd" readonly="readonly" value="<?= $idItem; ?>">
<input type="text" id="descProduto" name="descProd" value="<?= $descProduto; ?>">
<input type="text" id="undProduto" name="undProd" value="<?= $unidadeProduto; ?>"><br>
<input type="text" id="precoProduto" name="precoProd" value="<?= $precoProduto; ?>"><br>
<input type="number" id="qtdeCompra" name="qtdeProd" min="1" value="1">
<input type="submit" value="Comprar">
<hr>
</form>
...

Não coloquei o action porque estou usando AJAX, para não recarregar a página:
...
$('#formItem').submit(function(e){
e.preventDefault();

var idProduto = $('#idProduto').val();
var precoProduto = $('#precoProduto').val();
var qtdeCompra = $('#qtdeCompra').val();

$.ajax({
url: 'http://localhost/fcgeti_bairrojuventude/produto/inserir.php',
method: 'POST',
data: {idProd: idProduto, precoProd: precoProduto, qtdeProd: qtdeCompra},
dataType: 'json'
});
...

Qual minha dificuldade?
O submit só funciona no primeiro form. Sei que todos os forms tem o mesmo id, mas tentei passar pelo método literals (`#formItem-{$idItem}`), mas não deu certo.

Alguém tem uma dica que possa me ajudar?

Obrigado!
Fernando Generoso

Fernando Generoso

Curtidas 0

Respostas

Alex William

Alex William

02/09/2020

Olá amigo, tudo bem?

Ids HTML devem ser unicos na pagina, sempre. Se houver mais de um id igual ele pega a primeira ocorrencia.

Deixe seu form desta forma:
~
<form id="formItem<?=idItem;  ?>" onSubmit="fExecutaSubmit(<?=idItem;  ?>)">
<img src="<?= '../'.$imagemProduto; ?>"><br>
<input type="text" id="idProduto<?=idItem;  ?>" name="idProd<?=idItem;  ?>" readonly="readonly" value="<?= $idItem; ?>">
<input type="text" id="descProduto<?=idItem;  ?>" name="descProd<?=idItem;  ?>" value="<?= $descProduto; ?>">
<input type="text" id="undProduto<?=idItem;  ?>" name="undProd<?=idItem;  ?>" value="<?= $unidadeProduto; ?>"><br>
<input type="text" id="precoProduto<?=idItem;  ?>" name="precoProd<?=idItem;  ?>" value="<?= $precoProduto; ?>"><br>
<input type="number" id="qtdeCompra<?=idItem;  ?>" name="qtdeProd<?=idItem;  ?>" min="1" value="1">
<input type="submit" value="Comprar">
<hr>
</form>

Desta forma os ids sempre serão diferentes para cada form.
Depois disso, crie a funcao que vai pegar o codigo do item, e procurar o submit correto:
<script>
function fExecutaSubmit(idForm){
var idProduto = $('#idProduto'+idForm).val();
var precoProduto = $('#precoProduto'+idForm).val();
var qtdeCompra = $('#qtdeCompra'+idForm).val();

$.ajax({
url: 'http://localhost/fcgeti_bairrojuventude/produto/inserir.php',
method: 'POST',
data: {idProd: idProduto, precoProd: precoProduto, qtdeProd: qtdeCompra},
dataType: 'json'
});
}
</script>


Desta forma, toda a vez que ele executar um submit, os campos que ele vai pegar vao ser os que tiverem o nome do campo + id do produto. Como cada item tem seu id unico, o item que tiver o codigo 3240 vai ter o ID do campo igual a "precoProduto3240" e o seu ajax vai pegar sempre os campos corretos.

Lembrando que voce pode precisar adaptar o codigo, esse é um esboço inicial da ideia.

Espero ter ajudado. :D
GOSTEI 0
POSTAR