-2

estou com um problema para selecionar o value de um input de um foreach durante o envio de um ajax. meu codigo do laço de repetiçao em php:

<?php 
                        foreach( $resultado_carrinho as $row ) { 
                            echo'
                                            <form method="post" action="">
                                                <input type="number" for="id_quantidade" name="id_quantidade" id="id_quantidade" class="form-control  input-number text-center" value="'.$row[4].'" min="1" max="100"> 
                                                <input style="visibility: hidden; width:2%;height:2%;" type="number" name="idproduto" id="idp" value="'.$row[3].'"> <br>
                                            
                                            </form>';
                                            
                        
                    ?>

meu ajax:

<script>
                        $('#id_quantidade').keyup(function (){
                            let quanti = document.getElementById("id_quantidade").value;
                                            let produto = document.getElementById("idp").value;
                                            
            var dados = {
                id_quantidade: quanti,
        idproduto: produto
            }
            $.post('../App/Controller/updateQtd', dados, function(){
               
                 alert(document.getElementById("id_quatidade").value);
                  alert(document.getElementById("idp").value);
                  
            
            });
        
                                        });
                </script>
                ```
ele funciona porem sempre pega o primeiro irem do array, existe alguma forma de pegar os values dos inputs do form especifico?
2
  • O que ocorre é que ao criar os formulários, você está criando o ID do input com o mesmo nome. Os IDs devem ser únicos por página. Neste caso, você deveria fazer a programação do "keyup" vinculada a uma classe. Aqui tem um outro post que mostra como resolver isso stackoverflow.com/questions/69317091/…
    – Bins
    Commented 11/02/2022 às 13:05
  • @Bins tem rezão, você precisa adicionar a key do registro no id ou em um atributo de sua escolha, eu costumo usar muito data atributos, crio um atributo data-id onde passo a key, uso a mesma class em todos os elementos e pego o data-id do elemento que sofreu o evento.
    – Covii
    Commented 12/02/2022 às 0:27

1 Resposta 1

0

Vou tentar responder.

É comum em JS você precisar acionar uma ação parecida em vários elementos alterando apenas a chave, que geralmente podem ter sido criados por um backend usando loop.

Acontece que você não pode usar o mesmo atributo id em mais de um elemento, isso pode confundir o a query do JS.

Estou assumindo aqui que você está utilizando o jQuery pelo que pude ver do seu código.

Então existe N maneiras de resolver este problema.

A que eu acho mais simples é usar class em todos os elementos e indicar a key/id em um atributo auxiliar do input, veja;

<?php
foreach ($produtos as $key => $row) {
  echo "<input  type='number' class='prod_quantidade' data-id='{$row[3]}' />";
}
?>

<script>
  $(document).ready(function() {
    $(".prod_quantidade").keyup(function() {
      let quantidade = $(this).val();
      let id = $(this).data('id')
      let dados = {quantidade, id};
      //pronto já temos a quantidade e o id do produto
      $.post('...', dados, function(response) {
        alert("Quantidade:"+quantidade);
        alert("Produto id:"+id);
        alert("Response:"+response);
      });
    });
  });
</script>

Alguns detalhes;

Se você usa um evento baseado na ação de um campo e fará a postagem destes dados de forma assíncrona, talvez não precise do <form> que funciona de maneira síncrona.

O <form> em conjunto com o ajax geralmente é utilizado no evento de .submit, ou seja quando o usuário solicitou o envio do formulário, em grande parte dos casos este é o momento de validar os dados antes que o envio aconteça, uma função interessante bastante utilizada neste momento é a .searialize() e suas variantes, que de forma automática realizam o encode dos dados ou até os transformam em array ou json.

No trecho onde está $row[3], não sei seus motivadores para utilizar fetch_array, mas lhe aconselho a utilizar o fetch_assoc, pois o código fica mais legível e fácil de realizar a manutenção.

Quanto ao trecho do echo', isso é mais gosto pessoal, mas no meu ponto de vista ao escapar html via PHP me parece mais prático usar "" aspas duplas, assim você poderá escapar as variáveis sem ter que concatenar, exceto no caso de funções;

<?php
echo '<p class="'.$class'" type="'.$type.'" value="'.$row['id'].'" />';
echo "<p class='$class' type='$type' value='{$row['id']}'" />";

Neste exemplo a diferença é pouca, mas em códigos mais dinâmicos isso pode ficar bem pior.

Espero ter ajudado.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .