Ir para conteúdo
Sapinn

Transferir dados de uma tabela para um form em js

Recommended Posts

Pessoa de novo eu aqui kk. Acho que essa pergunta é simples mas eu não sei como fazer, já pesquisei em vários cantos mas só achei a resposta em Jquery e eu queria fazer em Javascript puro. Basicamente eu gostaria de transferir dados de uma tabela para um form eu já consegui fazer mas só funciona em um td e eu gostaria nos outros não funcionam. 

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1px">
        <tr>
            <td>Nome</td>
            <td>Endereço</td>
            <td>Telefone</td>
            <td>Adicionar</td>
        </tr>
        <tr>
            <td id="nome_cliente" value="Sapien">Sapinn</td>
            <td id="endereco_cliente" value="Rua 01">Rua 01</td>
            <td id="tel_cliente" value="(88) 9 9999-9999">(88)9 9999-9999</td>
            <td><button onclick="adicionar()">Adicionar</button></td>
        </tr>
        <tr>
            <td id="nome_cliente" value="Sapien">Supremo</td>
            <td id="endereco_cliente" value="Rua 01">Rua 05</td>
            <td id="tel_cliente" value="(88) 9 9999-9999">(88)9 0000-0000</td>
            <td><button onclick="adicionar()">Adicionar</button></td>
        </tr>
    </table><br><br>
    Nome:<input type="text" name="nome" id="nome">
    Telefone: <input type="text" name="telefone" id="telefone">
    Endereço: <input type="text" name="endereco" id="endereco">

    <script>
        function adicionar(){
           
            let nome_cliente = document.getElementById("nome_cliente").innerHTML;
            let endereco_cliente = document.getElementById("endereco_cliente").innerHTML;
            let tel_cliente = document.getElementById("tel_cliente").innerHTML;

            document.getElementById('nome').value = nome_cliente;
            document.getElementById('telefone').value = tel_cliente;
            document.getElementById('endereco').value = endereco_cliente;

            console.log(nome_cliente, endereco_cliente, tel_cliente)
            
        }
    </script>
</body>
</html>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Começando pelo principal problema que na verdade é: Vários erros em seu HTML.

O atributo global #ID deve ser único pois seu objetivo é distinguir alguma coisa de outra.

Portanto quando você declara vários:

9 horas atrás, Sapinn disse:

id="nome_cliente"

Entre os demais, você está cometendo um erro gravíssimo de interpretação e hierarquia no HTML por isso só funciona em um, porque só deveria existir em um.

Ou seja nunca repita o #ID com a mesma propriedade!

 

Você terá que construir algo que possa ser reaproveitado.

Antigamente nessas situações tínhamos que compor um objeto com todos os valores, mas desde o html5 a coisa ficou mais fácil, temos um novo atributo global que podemos buscar no documento e esse assim como diversos outros podem se repetir.

Então você só obtêm uma referencia única que pode ser um #ID para distinguir quais serão os elementos de busca.

 

Veja isso:

<table>
    <tr id="cliente-1"> <!-- ID "1" para o primeiro cliente -->
        <td data-nome="joão">João</td>
        <td data-endereco="endereço a">Endereço A</td>
        <td><button onclick="adicionar('cliente-1')">Adicionar</button></td>
    </tr>
    <tr id="cliente-2"> <!-- ID "2" para o segundo cliente -->
        <td data-nome="maria">Maria</td>
        <td data-endereco="endereço b">Endereço B</td>
        <td><button onclick="adicionar('cliente-2')">Adicionar</button></td>
    </tr>
</table>

Nome: <input type="text" name="nome" id="nome" />
Endereço: <input type="text" name="endereco" id="endereco" />

Perceba que definir os #ID diferente em cada coluna "tr" da table, e é assim que posso chegar até os atributos data que são meus alvos, apenas informando para a função o #id da coluna.

var nome = document.getElementById('nome'),
    endereco = document.getElementById('endereco'),
    tdNome = null,
    tdEndereco = null;

function adicionar(id_alvo) {
  var trID = document.getElementById(id_alvo);
  tdNome = trID.querySelector('[data-nome]').dataset.nome;
  tdEndereco = trID.querySelector('[data-endereco]').dataset.endereco;

  nome.value = tdNome;
  endereco.value = tdEndereco;
}

Basta que siga esse procedimento para adicionar mais campos como desejar.

 

 

Completando... sobre erros de HTML....

Toda tag deve ser fechada!

Mesmo que o browser percebe o erro e tenta corrigir, você pode se deparar com problemas na estrutura do documento, quanto mais problemas mais interpretações aleatórias pode acontecer pelo browser.

Portanto quando declarar uma tag <input> não se esqueça que ela deve ser fechada.

<input type="text" />

Mais de 90% dos problemas com css e javascript podem ser solucionados apenas escrevendo o html corretamente.

 

Dica de desempenho...

Evite criar variáveis dentro do escopo de uma função, porque consome uma certa % de memória RAM para criar, e apenas reescrever consome muitíssimo menos.

Evite ao máximo buscar por elementos dentro do escopo de um função, lembre-se que quando você passa um getElementById por exemplo o javascript deve ler todo o documento para encontrar esse alvo. Se ele já foi buscado e encontrado, não há necessidade de encontrar-lo novamente.

Mesmo que em diversos casos coisas como essas são indispensáveis, mas devem ser evitadas a todo custo.

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Cara muito obrigado mais uma vez, princialmente pelas dicas. Quero aproveitar o tópico e fazer mais uma pergunta quando eu for fazer uma ligação com o banco de dados mostrando a tabela de clientes e quiser colocar os dados de um cliente especifico eu posso incrementar o código, no caso PHP, com o javascript no botão ou isso seria uma má pratica? E se não for correto poderia me mostrar outra forma de fazer? Desde já grato

 

Exemplo:

<tr id="cliente-<?php echo $id_cliente?>"> 

            <td data-nome="<?php echo $nome_cliente?>">João</td>

            <td data-endereco="<?php echo $nome_endereco?> a">Endereço A</td>

            <td><button onclick="adicionar('cliente-<?php echo $id_cliente?>')">Adicionar</button></td>

        </tr>

Compartilhar este post


Link para o post
Compartilhar em outros sites
2 horas atrás, Sapinn disse:

com o javascript no botão ou isso seria uma má pratica?

Na verdade isso seria o caminho.

 

Me estranha que você montou a lógica corretamente, porque não estaria funcionando?

Talvez o uso de variáveis ao invés dos índices no resultado?

 

Bom... Resultados de querys no php sempre nos retornam um array independente da aplicação de busca seja PDO seja MySqli, então o que podemos é percorrer esse array e a cada índice criar os elementos:

<?php
$banco_de_dados = [
    ['id' => 0, 'nome' => 'Rio', 'endereco' => 'Rio de Janeio'],
    ['id' => 1, 'nome' => 'Paulo', 'endereco' => 'São Paulo'],
    ['id' => 2, 'nome' => 'Salvador', 'endereco' => 'Bahia'],
    ['id' => 3, 'nome' => 'Vitória', 'endereco' => 'Espirito Santo']
];
?>
<table>
    <?php foreach ($banco_de_dados as $value) { ?>
        <tr id="cliente-<?= $value['id'] ?>">
            <td data-nome="<?= $value['nome'] ?>"><?= $value['nome'] ?></td>
            <td data-endereco="<?= $value['endereco'] ?>"><?= $value['endereco'] ?></td>
            <td><button onclick="adicionar('cliente-<?= $value['id'] ?>')">Adicionar</button></td>
        </tr>
    <?php } ?>
</table>

 

Note que ao invés de usar a função echo do php toda hora apenas mandei exibir o valor usando <?= /* Algo a exibir */ ?> 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Muito obrigado mais uma vez Omar. Quanto ao código que eu te perguntei eu ainda não incrementei era só uma dúvida mesmo. Embora eu tenha terminado recentemente minha faculdade na área de T.I e educação ela não fez há cobrança necessária para que eu pudesse me desenvolver bem na programação, e isso é bem tipico das faculdade na área de tecnologia, enfim, estou fazendo diversos cursos para me aprimorar e peguei um freelar para desenvolver um pequeno site para um amigo meu então provavelmente eu vou aparecer muito por aqui criando dúvidas bobas kkkk. 

Mais um vez muito obrigado!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • 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.