Vários forms na mesma página.
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!
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
Curtidas 0
Respostas
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:
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:
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
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