Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

  • 0
lgbruno

ADICIONAR/REMOVER DINAMICAMENTE FAZENDO A ID TER +1 ACRESCENTADA

Pergunta

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>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

29 respostas a esta questão

Recommended Posts

A variável "retorna" aparece formatada como?

É um valor monetário precedido de R$?

Exemplo: R$ 100.00?

 

Qual a formatação que aparece no alert?

Desculpe. Agora que apareceu sua resposta pra mim. Vou analisar.

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

É 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");    
        }
}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

 

Sua outra função ficará assim:

$(document).on('change', 'input#qnt', function(){
    var qnt        = $(this).val();
    qnt        = (qnt != '')? parseInt(qnt): 0;
    var valor      = $(this).parents('td').siblings().children('input#valor_unitario').val();
    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(".",","));
});

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

PERFEITO, FINALMENTE FECHEI .. VLW MESMO CARA.. você SACA MT.. OBRIGADO, VOU AJUSTAR AGORA AO RESTANTE DAS COISAS QUE PRECISO MAIS SO EM ENTENDER OS COMANDOS JA TA SHOW PRA FAZER!!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Amigo se puder me ajudar novamente, fiz umas alteracoes e consegui incluir no valor total royallties e imposto sobre o valor final me mostrando o valor de cada um nos campos, mais eu tenho mais dois ultimos campos que o usuario interagiria em tempo real, de transporte e de desconto, como faria pra conseguir pegar esses valores em tempos real e ja mostrar no meu valor final?

 

segue o codigo modificado:

PARTE DO SCRIPT:

<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.find("input#qnt").val('1');
                    novoCampo.find("input#total").val('R$ 0.00');
                    novoCampo.find("input#royallties").val('R$ 0.00');
                    novoCampo.find("input#imposto").val('R$ 0.00');
                    novoCampo.find("input#transporte").val('R$ 0.00');
                    novoCampo.find("input#desconto").val('0.00 %');
                    novoCampo.find("input#valorfinal").val('R$ 0.00');
                    novoCampo.insertAfter("tr.linhas:last");
                    removeCampo();
              });
            });
        </script>

		<script type="text/javascript">
        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 cell_royallties = elemento.parentElement.parentElement.querySelector('td > input#royallties');
            var cell_imposto = elemento.parentElement.parentElement.querySelector('td > input#imposto');
            var cell_valorfinal = elemento.parentElement.parentElement.querySelector('td > input#valorfinal');
            var qnt = elemento.parentElement.parentElement.querySelector('td > input#qnt').value;
            qnt = (qnt != '')? parseInt(qnt): 0;
            
            var nome = elemento.value;
            var cell = elemento.parentElement.nextElementSibling.nextElementSibling;
            
            $(document).on('change', 'input#qnt', function(){
                var qnt        = $(this).val();
                qnt        = (qnt != '')? parseInt(qnt): 0;
                
                var valor      = $(this).parents('td').siblings().children('input#valor_unitario').val();
                valor      = parseFloat(valor.replace("R$","").replace(",","."));
                
                var cell_total = $(this).parents('td').siblings().children('input#total');
                var total      = (qnt * valor);
                
                var cell_royallties = $(this).parents('td').siblings().children('input#royallties');
                var royallties     = (total * 11.62)/100;
                
                var cell_imposto = $(this).parents('td').siblings().children('input#imposto');
                var imposto     = (total * 4.65)/100;
                
                var cell_valorfinal = $(this).parents('td').siblings().children('input#valorfinal');
                var valorfinal = total + royallties + imposto;
               
                cell_total.val("R$ " + total.toFixed(2).replace(".",","));
                cell_royallties.val("R$ " + royallties.toFixed(2).replace(".",","));
                cell_imposto.val("R$ " + imposto.toFixed(2).replace(".",","));
                cell_valorfinal.val("R$ " + valorfinal.toFixed(2).replace(".",","));
                
            });

            
            
             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);
                    
                    var royallties = (parseFloat(total) * 11.62)/100;
                    var imposto = (parseFloat(total) * 4.65)/100;
                    
                    var valorfinal = parseFloat(total) + parseFloat(royallties) + parseFloat(imposto);
                    
                    cell_total.value  = "R$ " + total.toFixed(2);
                    cell_royallties.value = "R$ " + royallties.toFixed(2);
                    cell_imposto.value = "R$ " + imposto.toFixed(2);
                    cell_valorfinal.value  = "R$ " + valorfinal.toFixed(2);
                  });
                }else{
                  alert("Sem Equipamento Selecionado");    
                }
            
        }
        </script>

PARTE DO HTML:

<tr class="linhas">
                    <td colspan="4">
                        <select style="width:355px;" name="descricao[]" id="nome" onchange="listanome(this)">
                            <option value="">Selecione..</option>
                                        <?php
                                            include_once '../conexaobancodedados.php';

                                            $sql = "select * from  tabelapreco left outer join unidades on unidades.id_unidade = tabelapreco.id_unidade order by `nome_tabela`";

                                            $result=  mysql_query($sql,$con);
                                            if(@mysql_num_rows($result)>0){

                                            while($row =  mysql_fetch_array($result)){

                                            ?>
                                            <option value="<?php echo $row["id_tabela"];?>"><?php echo $row["nome_tabela"];?> (<?php echo $row["nome_unidade"];?>)</option>

                                            <?php           
                                            }
                                            }else{
                                                ?>
                                                <option value="">Sem Cadastro de Equipamento</option>
                                                <?php 
                                            }

                                            ?>
                        </select>
                    </td>
                    <td><input type="number" value="1" min="1" style="width:50px;text-align: center;" size="1" name="qtd[]" id="qnt"></td>
                    <td class="resultado2"><input size="10" value="R$ 0.00" readonly="true" style="text-align: center;background-color:#cccccc;color:black;"></td>
                    <td><input type="text" size="10" name="valortotal[]" value="R$ 0.00" style="text-align: center;" id="total" onKeyPress="return(MascaraMoeda(this,'.',',',event))"></td>
                    <td><input type="text" size="10" name="royallties[]" id="royallties" value="R$ 0.00" onKeyPress="return(MascaraMoeda(this,'.',',',event))" readonly="true" style="background-color:#cccccc;color:black;text-align: center;"></td>
                    <td><input type="text" size="6" name="imposto[]" id="imposto" value="R$ 0.00" onKeyPress="return(MascaraMoeda(this,'.',',',event))" readonly="true" style="background-color:#cccccc;color:black;text-align: center;"></td>
                    <td><input size="16" name="transporte[]" id="transporte" value="R$ 0.00" style="text-align: center;" onKeyPress="return(MascaraMoeda(this,'.',',',event))"></td>
                    <td><input size="11" name="desconto[]" id="desconto" value="0.00 %" style="text-align: center;" onKeyPress="return(MascaraMoeda(this,'.',',',event))"></td>
                    <td><input size="16" name="valorfinal[]" id="valorfinal" value="R$ 0.00" style="text-align: center;" onKeyPress="return(MascaraMoeda(this,'.',',',event))"></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>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Não entendi o que quis dizer. O valor para o "transporte" e "desconto" será inserido pelo usuário, é isso?

Daí você quer pegar estes valores, fazer algum cálculo com outros e exibir no valor final?

Compartilhar este post


Link para o post
Compartilhar em outros sites

isso o valor dos equipamentos vao alterando de acordo com a quantidade e respectivamente os impostos e royallties sao acrescentados ao valor final .. sendo que em algumas ocasioes tera gasto de transporte e esse valor o usuario ira digitar qt gastara de transporte se tiver vai ser acrescentado ao valor final se nao tiver permanece como esta, ja o desconto tb sera digitado pelo usuario caso queira dar um desconto se tiver sera um valor a ser diminuido no valor final se nao permanece como esta. mas nos outros campos os valores eram ja definidos nao digitava, nesse dois precisa ser pego ao digitar, eu nao conheço javascript mt bem entao nao sei como fazer, se puder dar uma ajuda .

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por ILR master
      Fala pessoal, tudo bem?
       
      Tô tentando fazer um pre-loading, mas não consigo de jeito algum.
      Quero mostrar uma animação enquanto a página é carregada e depois de caregada, esconder a animação e mostrar conteúdo.
       
      Aguém pode me ajudar?
       
      Segue código abaixo
       
       
      <!DOCTYPE html>
      <html lang="pt-br">
      <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
          <title>PÁGINA LOAD</title>

      <style type="text/css">
      .loadclass {
          border: 2px solid #f3f3f3; /* Light grey */
          border-top: 4px solid #ffc401; /* Blue */
          border-radius: 50%;
          width: 50px;
          height: 50px;
          animation: spin 2s linear infinite;
      }
      @keyframes spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
      }
      .conteudo {
          display:none;
      }
      </style>
      <script>
          function loading(){
              document.getElementsByClassName('loadclass')[0].style.display="none";
              document.getElementsByClassName('conteudo').style.display="block";
          }
      </script>
      </head>
      <body onLoad="loading()">
      <div class="loadclass"></div>
      <div class="conteudo">SEU CONTEUDO AQUI DENTRO!!!</div>
      </body>
      </html>
    • Por ILR master
      Pessoal, pergunta bem simples. Abaixo tenho o seguinte código:
       
      <script>
      function alerta()
      {
        if (window.confirm("Você realmente quer sair?")) {
          window.open("sair.html");
      }
      }
      </script>
       
      Funciona perfeitamente, só que está abrindo em outra janela e quero que abra na mesma janela.
       
      Alguém pode me ajudar?
    • Por Giovanird
      Olá a todos!
      Tenho uma pagina que possui uma DIV onde coloquei uma pagina PHP.
      Uso a função setInterval para atualizar a pagina inclusa dentro da DIV.
      O problema é que ao acessar o site , a DIV só me mostra a pagina inclusa somente quando completo o primeiro minuto.
      Preciso que a pagina inclusa já inicie carregada
       
      Meu código JavaScript e a DIV com a pagina PHP
       
      <script> function atualiza(){ var url = 'direita.php'; $.get(url, function(dataReturn) { $('#direita').html(dataReturn); }); } setInterval("atualiza()",60000); </script> <div> <span id="direita"></span> </div>  
    • Por Thiago Duarte
      Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc
       
      Alguem pode me ajudar?
    • Por belann
      Olá!
       
      Estou fazendo o upload de arquivos com fetch dessa forma
      fetch(url, {
              method: 'POST',
              headers: {'Content-Type': 'multipart/form-data',},
              body: formData 
          }).catch((error) => (console.log("Problemas com o Upload"), error));
       
      estou usando input type=file
      e criando uma const formData = new FormData(); 
      mas não faz e não dá nenhum erro.
      estou fazendo o upload com a url="http://localhost/dashboard/dados".
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.