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

 

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 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".
    • Por joeythai
      Boa tarde pessoal,
       
      Eu criei um formulário em que tenho 3 interações: evento click, change e uma chamada ajax. No evento on change ("select#removal_table_from" )eu faço uma chamada ajax onde eu passo como parametro o id do item selecionado e construo uma tabela dinamica com o próprio javascript, após isto, tenho um input em que o usuario coloca um valor de percentual para que eu possa preencher em 3 colunas da tabela que foi criada dinamicamente: moto_atualizado, carro_atualizado e caminhao_atualizado, até aí tudo bem, o codigo está fazendo isso, porém, como a tabela é criada dinamicamente eu preciso de alguma forma enviar o arrayData para meu backend mas quando faço o calculo dentro do loop apos resposta do meu ajax, os valores desses 3 campos chegam como null, não sei se é possível fazer o que pretendo ou se é ainda não sei como faz
       
      <code>
           $(document).ready(function (event) {   let arrayData = []; let percentage; let removal_vehicle; let removal_motorcycle; let removal_tuck; let apply_removal = $('#apply_removal');   // apply_removal.on('click', function () { // percentage = $('#percentage').val();   // $('.table-body tr').each(function () {   // let veiculo = $(this).find('.veiculo').text(); // let moto = $(this).find('.moto').text(); // let caminhao = $(this).find('.caminhao').text();   // let removal_vehicle = parseFloat(veiculo) + (parseFloat(veiculo) * parseFloat(percentage)) / 100; // let removal_motorcycle = parseFloat(moto) + (parseFloat(moto) * parseFloat(percentage)) / 100; // let removal_tuck = parseFloat(caminhao) + (parseFloat(caminhao) * parseFloat(percentage)) / 100;   // arrayData.push({ // removal_vehicle, // removal_motorcycle, // removal_tuck // })   // $(this).find('.veiculo_atualizado').val(removal_vehicle.toFixed(2)); // $(this).find('.moto_atualizado').val(removal_motorcycle.toFixed(2)); // $(this).find('.caminhao_atualizado').val(removal_tuck.toFixed(2)); // }); // });   apply_removal.on('click', function () { percentage = $('#percentage').val();   $('.table-body tr').each(function () {   let veiculo = $(this).find('.veiculo').text(); let moto = $(this).find('.moto').text(); let caminhao = $(this).find('.caminhao').text();   removal_vehicle = parseFloat(veiculo) + (parseFloat(veiculo) * parseFloat(percentage)) / 100; removal_motorcycle = parseFloat(moto) + (parseFloat(moto) * parseFloat(percentage)) / 100; removal_tuck = parseFloat(caminhao) + (parseFloat(caminhao) * parseFloat(percentage)) / 100;   arrayData.push({ removal_vehicle, removal_motorcycle, removal_tuck })   $(this).find('.veiculo_atualizado').val(removal_vehicle.toFixed(2)); $(this).find('.moto_atualizado').val(removal_motorcycle.toFixed(2)); $(this).find('.caminhao_atualizado').val(removal_tuck.toFixed(2));     console.log('Removal Vehicle:', removal_vehicle); console.log('Removal Motorcycle:', removal_motorcycle); console.log('Removal Truck:', removal_tuck); }); });   $('select#removal_table_from').on('change', function (e) { let table_id = $(this).val(); let action = route('removal.removal-values.show', table_id);   $.ajax({ type: "GET", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },   success: function (data) { $('.table-body').empty();   for (let i = 0; i < data.length; i++) { let carro = parseFloat(data[i].CARRO); let moto = parseFloat(data[i].MOTO); let caminhao = parseFloat(data[i].CAMINHAO); let distancia = data[i].DISTANCIA; let origem = data[i].ORIGEM; let destino = data[i].DESTINO; let localidadeOrigem = data[i].LocalidadeOrigem_ID; let localidadeDestino = data[i].LocalidadeDestino_ID;   let newRow = '<tr class="removal-row">' + '<td class="align-middle">' + '<div class="row">' + '<div class="col-1">' + '<span class="font-weight-bold">Origem</span><br>' + '<span class="origem">' + origem + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Destino</span><br>' + '<span class="destino">' + destino + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">KM</span><br>' + '<span class="km">' + distancia + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Veículo</span><br>' + '<span class="veiculo">' + carro + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Veículo Atualizado</span><br>' + '<input type="text" class="veiculo_atualizado">' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Moto</span><br>' + '<span class="moto">' + moto + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Moto Atualizado</span><br>' + '<input type="text" class="moto_atualizado">' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Caminhão</span><br>' + '<span class="caminhao">' + caminhao + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Caminhão Atualizado</span><br>' + '<input type="text" class="caminhao_atualizado">' + '</div>' + '</div>' + '</div>' + '</td>' + '</tr>';   $('.table-body').append(newRow); //let row = $('.removal-row:last');   // Calcula o valor atualizado e define nos campos diretamente // let veiculo_atualizado = carro + (carro * percentage) / 100; // let moto_atualizado = moto + (moto * percentage) / 100; // let caminhao_atualizado = caminhao + (caminhao * percentage) / 100; // console.log('PORCENTS: ', percentage); //console.log('Veiculo Atualizado:', veiculo_atualizado, 'Moto Atualizado:', moto_atualizado, 'Caminhao Atualizado:', caminhao_atualizado);   // Define os valores diretamente nos campos da nova linha // row.find('.veiculo_atualizado').val(veiculo_atualizado.toFixed(2)); // row.find('.moto_atualizado').val(moto_atualizado.toFixed(2)); // row.find('.caminhao_atualizado').val(caminhao_atualizado.toFixed(2));   arrayData.push({ carro, moto, caminhao, distancia, origem, destino, localidadeOrigem, localidadeDestino, removal_vehicle, removal_motorcycle, removal_tuck }); }   $('#copy_data_table').val(JSON.stringify(arrayData)); }   }); });   //javascript para o formulario de cadastro // $(document).ready(function (event) { $('#uf').change(function () { let code_city = $(this).val(); let deposit = localStorage.getItem('selected_deposit_id'); let action = route('removal.removal-values.cities', code_city); $.ajax({ type: "POST", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, data: { code_city: code_city },   success: function (data) {   $('#city').empty(); $('#deposit').empty();   for (let i = 0; i < data.cities.length; i++) { $('#city').append('<option value="' + data.cities[i].NM + '">' + data.cities[i].NM + '<option>'); }   if (data.deposits.length > 0) { for (let i = 0; i < data.deposits.length; i++) { $('#deposit').append('<option value="' + data.deposits[i].NM + '">' + data.deposits[i].NM + '<option>'); } } else { // $('#deposit').prop('disabled', true); // $('#city').prop('disabled', false); }   $('#city').trigger('change'); } });   });   $('#deposit').on('change', function () { depositId = $(this).val(); localStorage.setItem('selected_deposit_id', depositId); });   $('#uf_destiny').change(function () { let code_city = $(this).val(); let depositDestiny = localStorage.getItem('selected_deposit_destiny_id'); let action = route('removal.removal-values.cities', code_city); $.ajax({ type: "POST", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, data: { code_city: code_city },   success: function (data) {   $('#city_destiny').empty(); $('#deposit_destiny').empty();   for (let i = 0; i < data.cities.length; i++) { $('#city_destiny').append('<option value="' + data.cities[i].NM + '">' + data.cities[i].NM + '</option>'); }   if (data.deposits.length > 0) { // $('#deposit_destiny').prop('disabled', false); //$('#city_destiny').empty(); // $('#city_destiny').prop('disabled', true); for (let i = 0; i < data.deposits.length; i++) { $('#deposit_destiny').append('<option value="' + data.deposits[i].NM + '">' + data.deposits[i].NM + '</option>'); } } else { // $('#deposit_destiny').prop('disabled', true); // $('#city_destiny').prop('disabled', false); }   $('#city_destiny').trigger('change'); } }); });   $('#deposit_destiny').on('change', function () { let depositDestinyId = $(this).val(); localStorage.setItem('selected_deposit_destiny_id', depositDestinyId); });   }); </code>
    • Por gersonab
      Bom dia a todos, estou usando o datatable com uma consulta mysql e funciona 100% , meu único problema é na hora que eu exporto para pdf, este não vem com sua largura da tabela exportada em 100%, dependendo da situação ocupa apenas 30% da página, infelizmente após varias pesquisas ainda não encontrei uma forma de fazer.
      segue meu código de forma simples:
      $('#exportar').DataTable( { language: { url: '//cdn.datatables.net/plug-ins/1.13.7/i18n/pt-BR.json', }, dom: 'Bfrtip', order: [[ 0, 'desc' ]], buttons: [ 'pdfHtml5' ] } ); desde já agradeço toda ajuda possível
×

Informação importante

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