ADICIONAR/REMOVER DINAMICAMENTE FAZENDO A ID TER +1 ACRESCENTADA

[lgbruno 0]

Queria uma ajuda com meu codigo sou fraco em javascript meu forte e mais pra php.

Tenho uma tabela e nesse tabela um Select que puxa dados do banco e ao ser listado os dados, eu escolho um item, e por onchange ele executa um script que vai ao banco e retorna o preco desse item. Na primeira linha funciona corretamente, porem eu tenho um botao de adicionar que clona a minha linha, fazendo com que o id de cada linha seja igual, no nome nao e pq esta como array.

 

Mas a parte que identifica o Item escolhido e retorna o preço daquele item faz isso pela id, tendo o mesmo id vai retornar o mesmo valor.

 

Alguma sugestao do que posso fazer para distinguir essas id ? nao da pra manipular manualmente pq eu posso tanto ter um campo como inumeros adicionados com o botao, teria que ser automatico.

 

Desde ja grato

<script type="text/javascript">
            $(function () {
              function removeCampo() {
                    $(".removerCampo").unbind("click");
                    $(".removerCampo").bind("click", function () {
                       if($("tr.linhas").length > 1){
                            $(this).parent().parent().remove();
                       }
                    });
              }

                $(".adicionarCampo").click(function () {
                    novoCampo = $("tr.linhas:first").clone();
                    novoCampo.find("input").val("");
                    novoCampo.insertAfter("tr.linhas:last");
                    removeCampo();
              });
            });
</script>


<script type="text/javascript">
        function listanome(){
            var nome;
            
            nome = document.getElementById("nome").value;
            
            if(nome != ''){
                        var dados = {
                            listanome : nome
                        }
                        $.post('../BUSCAR_BANCO/busca_preco.php', dados, function(retorna){
                            $(".resultado2").html(retorna);
                        });
            }else{
            alert("Sem Equipamento Selecionado");    
            }
        }
</script>


PARTE DA TR DA TABELA QUE E CLONADA


<tr class="linhas">
                    <td colspan="4">
                        <select style="width:355px;" name="descricao[]" id="nome" onchange="listanome(nome)">
                            <option value="">Selecione..</option>
                                        PARTE DA CONSULTA NO BANCO QUE RETORNA O NOME COM O VALUE SENDO UM ID
                        </select>
                    </td>
                    <td><input type="number" style="width:50px;" size="1" name="qtd[]"></td>
                    <td class="resultado2">RETORNA VALOR DO BANCO</td>
                    <td><input size="10" name="valortotal[]"></td>
                    <td><input size="10" name="royalties[]"></td>
                    <td><input size="6" name="imposto[]"></td>
                    <td><input size="16" name="transporte[]"></td>
                    <td><input size="11" name="desconto[]"></td>
                    <td><input size="16" name="valorfinal[]""></td>
                    <td><a href="#" class="removerCampo" title="Remover linha"><input type="button" name="Excluir" style="width:70px;background-color:red;"></a></td>
                </tr>
                </tbody>
                <tfoot>
                    <tr>
                           <td colspan="13">
                <center><a href="#" class="adicionarCampo" title="Adicionar item"><input type="button" name="adicionar" value="Adicionar"></a></center>
                           </td>
                    </tr>
                
                </tfoot>

 

[Eziquiel 96]

É isso então. O seu retorno é um elemento. Eu não sabia.

Uma dica seria criar o elemento <input> no seu código html, e então o seu php retornaria apenas um valor para este input.

Mas tente o código abaixo pra ver se funciona.

 

function listanome(elemento){
    var nome       = elemento.value;
    var cell_valor = elemento.parentElement.parentElement.querySelector('.resultado2');
    var cell_total = elemento.parentElement.parentElement.querySelector('td > input#total');
    var qnt = elemento.parentElement.parentElement.querySelector('td > input#qnt').value;
    qnt = (qnt != '')? parseInt(qnt): 0;
	
        if(nome != ''){
          var dados = {
            listanome : nome
          }
          $.post('../BUSCAR_BANCO/busca_preco.php', dados, function(retorna){
            cell_valor.innerHTML = retorna;
            var value = elemento.parentElement.parentElement.querySelector('td > input#valor_unitario').value; 
            var valor = parseFloat(value.replace("R$","").replace(",",".")); 
            var total = parseInt(qnt) * parseFloat(valor);
            cell_total.value  = "R$ " + total.toFixed(2);
          });
        }else{
          alert("Sem Equipamento Selecionado");    
        }
}

 

[Eziquiel 96]

Amigo, talvez eu não tenha entendido corretamente. Mas acho que você precisa disto:

 

Primeiro altere sua função para que ela receba uma parâmetro:

function listanome(nome){
          
            if(nome != ''){
                        var dados = {
                            listanome : nome
                        }
                        $.post('../BUSCAR_BANCO/busca_preco.php', dados, function(retorna){
                            $(".resultado2").html(retorna);
                        });
            }else{
            alert("Sem Equipamento Selecionado");    
            }
        }

Feito isso você vai colocar assim no evento "onchange" do seu select:

onchange="listanome(this.value)"

Veja se é isto que você está procurando.

[Eziquiel 96]

Veja aqui um exemplo, onde tenho dois selects com mesmo ID, operando de maneira isolada pelo uso do "this.value".

 

http://codepen.io/Eziquiel/pen/EWOZPM?editors=1010

[lgbruno 0]

com seu exemplo ele pega o value mais ao adicionar outra linha e selecionar outro item ele puxa o valor mais altera o da linha anterior pro mesmo valor.

 

no select digamos que eu tenha(sendo que podem ser 3 ou varios vem do banco):

 

Paquimetro

Micrometro

Lupa

 

no banco eu tenha uma tabela de preço onde  eu tenha (3 ou varios vem do banco):

 

Paquimetro vale 30,00

Micrometro vale 20,00

Lupa vale 45,00

 

3 equipamentos diferentes com ids diferentes, quando eu seleciono um Equipamento no select ele envia a id desse equipamento para consulta no banco na tabela de preço o valor referente a aquele equipamento e me traz o valor em um input nessa linha.

 

Quando clico no Botao adicionar que ele me cria mais uma linha e eu seleciono no novo select e escolho outro equipamento ele faz o msm e traz o valor do equipamento, porem ele modifica o valor da linha anterior e fica os dois com mesmo valor.

 

Exemplo

 

selecionei paquimetro trouxe 30,00

selecionei micrometro trouxe 20,00

 

so que ai ao trazer os 20,00 do micrometro ele altera o valor do paquimetro da linha de cima pra 20,00 tbm. =/

 

[lgbruno 0]

acredito ser em funcao do retorno, pq o retorno vem na:

 

<td class="retorno2"></td>

conforme adiciona um novo campo continua com o mesmo nome pra class e ele vai jogando o valor do ultimo que consulto em todos eles. 

 

alguma ideia do que fazer ?

[Eziquiel 96]

Sim... vamos faze o seguinte....

Use esta função aqui, no lugar da sua...

function listanome(elemento){
            var nome = elemento.value;
            var cell = elemento.parentElement.nextElementSibling.nextElementSibling;
	
            if(nome != ''){
                        var dados = {
                            listanome : nome
                        }
                        $.post('../BUSCAR_BANCO/busca_preco.php', dados, function(retorna){
                            cell.innerHTML = retorna;
                        });
            }else{
            alert("Sem Equipamento Selecionado");    
            }
        }

Aí, no" onchange" do seu select use isto: ...

onchange="listanome(this)"

 

[lgbruno 0]

PERFEITO, AGRADEÇO DEMAIS PELA AJUDA, SO FALTAVA ISSO PRA FECHAR.

 

SE PUDER ME INDICA UM BOM LIVRO OU MATERIAL DE ESTUDO PRA JAVASCRIPT E MEU FRACO, TENHO MAIS FACILIDADE EM PHP, MAS QUERO APRENDER TODAS QUE PUDER, TO QUERENDO TENTAR UM PROJETO GRANDE MAIS QUERO TA PREPARADO NAS LINGUAGENS EM GERAL.

 

RESOLVIDO !! VALEU!!

[Eziquiel 96]

Eu não conheço nenhum material para lhe indicar, a não ser este que eu uso bastante para tirar dúvidas e estudar cada parâmetro.

 

https://www.w3schools.com/

 

Estude bastante a biblioteca JQuery. Ela é ótima também.

 

Abraço.

 

[lgbruno 0]

VLW, OBRIGADO !! ABRAÇO!!

[Eziquiel 96]

Se você quiser usar apenas JQuery (o que considero mais eficiente), você pode apagar aquele evento "onchange="listanome(this)" e incluir esta função no seu script. Apenas para você conhecer um outro modo de se fazer isso.

$(document).on('change', 'select#nome', function(){
   var nome  = $(this).val();
   var cell = $(this).parents('td').siblings('.resultado2');
   
   if(nome != ''){
      var dados = {
        listanome : nome
      }
      $.post('../BUSCAR_BANCO/busca_preco.php', dados, function(retorna){
         cell.html = retorna;
      });
   }else{
       alert("Sem Equipamento Selecionado");    
   }
}); 

 

[lgbruno 0]

show, a primeira forma conseguir fazer funcionar ate mesmo trazendo outros valores, entendi como funcionava a logica dos comandos e ai fui fazendo adaptacoes.

 

 eu tava pensando aqui, se conseguiria a partir disso ja fazer o calculo nas outras td

 

tem aquela td que retorna o valor

 

<td class="resultado2"></td>

 

e tem as outras td que so sao replicadas ao adicionar entre elas tem

<td><input type="number" style="width:50px;text-align: center;" size="1" name="qtd[]" id="qnt"></td>
<td><input size="10" name="valortotal[]" style="text-align: center;" id="total" onKeyPress="return(MascaraMoeda(this,'.',',',event))"></td>
                    

pegar o resultado que vem do banco na td class resultado2 e de acordo com a quantidade que fosse inserida pelo usuario na td qtd ele ja dar o valor total na td total .

[Eziquiel 96]

Poste aqui o seu código javascript. 

[lgbruno 0]

pode ser em cima desse proprio script que me mostrou

function listanome(elemento){
            var nome = elemento.value;
            var cell = elemento.parentElement.nextElementSibling.nextElementSibling;
	
            if(nome != ''){
                        var dados = {
                            listanome : nome
                        }
                        $.post('../BUSCAR_BANCO/busca_preco.php', dados, function(retorna){
                            cell.innerHTML = retorna;
                        });
            }else{
            alert("Sem Equipamento Selecionado");    
            }
        }

na pratica e visto como esta na imagem enviada, a diferenca foi que inserir no codigo um busca pra royallties e pra imposto, mas isso eu adapto dps o calculo seria mesmo nos campos qtd que o usuario digita o valor unitario que vem do banco de acordo com o que e selecionado e o valor que e o calculo final

 

[Eziquiel 96]

Minha dica é que o input (id="qnt") inicie com o valor "1", alterando sua propriedade value="1".

Se quiser fazer isso, tem que incluir esta linha na função que cria uma nova linha (para esta nova linha iniciar com valor 1):

novoCampo.find("input#qnt").val('1');

Sua função "listanome" ficará assim: (copie ela completa)

function listanome(elemento){
    var nome       = elemento.value;
    var cell_valor = elemento.parentElement.parentElement.querySelector('.resultado2');
    var cell_total = elemento.parentElement.parentElement.querySelector('td > input#total');
    var qnt = elemento.parentElement.parentElement.querySelector('td > input#qnt').value;
    qnt = (qnt != '')? parseInt(qnt): 0;
	
        if(nome != ''){
          var dados = {
            listanome : nome
          }
          $.post('../BUSCAR_BANCO/busca_preco.php', dados, function(retorna){
            cell_valor.innerHTML = retorna;
            var valor = parseFloat(retorna.replace("R$","").replace(",",".")); 
            var total = parseInt(qnt) * parseFloat(valor);
            cell_total.value  = "R$ " + total.toFixed(2);
          });
        }else{
          alert("Sem Equipamento Selecionado");    
        }
}

Agora acrescente esta função no <script>: 

$(document).on('change', 'input#qnt', function(){
    var qnt        = $(this).val();
    qnt        = (qnt != '')? parseInt(qnt): 0;
    var valor      = $(this).parent('td').siblings('.resultado2').html();
    valor      = parseFloat(valor.replace("R$","").replace(",","."));
    var cell_total = $(this).parents('td').siblings().children('input#total');
    var total      = (qnt * valor);

    cell_total.val("R$ " + total.toFixed(2).replace(".",","));
});

 

 

 

 

[lgbruno 0]

parece que em algum ponto ele nao ta reconhecendo como numero, esta dando resultado como NaN.. 

[Eziquiel 96]

Em que momento, especificamente?

[Eziquiel 96]

Quando selecionando um item no select?

[lgbruno 0]

Quando seleciona puxa o valor normal e o qtd ja ta definido 1, e ai ja puxa na hora tb o resultado do calculo, no valor total so que ele aparece como R$ NaN..

 

no banco o campo que receber o valor unitario ta como decimal(10,2) faz alguma diferenca pra esse script?

[Eziquiel 96]

Faz um teste pra mim:

 

abaixo desta linha:

cell_valor.innerHTML = retorna;

inclua esta linha e me diga a mesagem que aparece:

alert(retorna);

 

[lgbruno 0]

Ele aponta pro input que vem com valor do banco so descreve ela no alert 

<input size="10" name="preco[]" id="valor_unitario" value="R$ <?php echo $res['preco_tabela'];?>" onKeyPress="return(MascaraMoeda(this,'.',',',event))" readonly="true" style="background-color:#cccccc;color:black;text-align: center">