Jump to content
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>

 

Share this post


Link to post
Share on other 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.

 

Share this post


Link to post
Share on other 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>

Share this post


Link to post
Share on other 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 */ ?> 

Share this post


Link to post
Share on other 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!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By violin101
      Caros Amigos,
       
      saudações...
       
      Desculpa a recorrer ao auxílio dos amigos, mas estou com um pequeno problema que não estou conseguindo entender.
       
      A página inicial do meu Sistema tem um CAROUSEL com um SLIDER que deveria iniciar junto com a página. 
      INFELIZMENTE algumas vezes não inicia e para EXECUTAR o o Slider deve pressionar F5.
       
      Algumas vezes quando o Slider inicia depois de um período para o LOOP, não entendo isso.
       
      Abaixo o código do SLIDER.
      /*----------------------------------------*/ /* 01. Main Slider Ativação e Velocidade do Slide /* /* Como consigo resolver esse problema para o Slider INICIAR com um LOOP infinito /* sem ter que ficar atualizando a página ? /* /*----------------------------------------*/ $(".slider_active").owlCarousel({ loop: true, margin: 0, nav: true, autoplay: true, infinite: true, items: 1, autoplayTimeout: 10000, navText: ["<i class='fa fa-caret-left'></i>", "<i class='fa fa-caret-right'></i>"], dots: true, autoHeight: true, lazyLoad: true });  
      Grato,
       
      Cesar
    • By Person
      Estou fazendo um protótipo de e-commerce com aps clássico e sql server, na parte de administração, o usuário administrativo pode alterar o status do pedido,  para isso ele clica no botão de alterar na pagina principal e é redirecionado para um formulário onde tenho as options, para que ele mude o status, coloquei um botão para que ele passe os parâmetros  (id_pedido e id_status_pedido) para a pagina de manutenção, onde é feito o update e o envio de e-mail com as atualizações. Mas quero retirar esse botão e fazer com que, assim que eu clique em uma opção, ele altere, sem eu precisar ser redirecionado para a tela de manutenção, isso com o Ajax se possível.
       
      <body> <% call Abredb() cod = Request.QueryString("cod") evt = Request.QueryString("evt") if cod <> "" then cod = cint(cod) end if if ucase(evt) = "ALT" then sql = "exec SP_TR32_status_frm_SEL" 'Response.Write(sql) 'Response.End() set rs = dbWeb.execute(sql) estrato = rs("id_status_pedido") bot = "Alterar" end if %> <div class="container"> <div class="titulo">Formulario</div> <form action="manu_pedido.asp" method="post" enctype="multipart/form-data"> <div class="detalhes-formulario"> <div class="input-box"> <span class="detalhes">status</span> <select class="form-control" name = "status"> <% do while not rs.eof%> <option value="<%=rs("id_status_pedido")%>"><%=rs("descricao")%></option> <% rs.movenext loop rs.close set rs = nothing %> </select> </div> </div> <button><a href="/treinamento/Thau/mini_mercado/adm/manu_pedido.asp?evt=alt&cod="<%=cod%>"&estrato="<%rs("id_status_pedido")%> </form> </div> <br> </body> <%call Fechadb()%> </html> Abaixo está o código da minha pagina de manutenção, no qual acontece a alteração do status
      <% Function ZerosEsquerda(Num,tam) Dim Zero Num = Trim(Num) Zero = "" For i = Len(Num) To tam - 1 Zero = "0" & Zero Next ZerosEsquerda = Trim(Zero & Num) End Function byteCount = Request.TotalBytes RequestBin = Request.BinaryRead(byteCount) Set UploadRequest = CreateObject("Scripting.Dictionary") BuildUploadRequest RequestBin 'opc = request.QueryString("opc") 'if opc = "" then 'cod = UploadRequest.Item("hfcod").Item("Value") 'botao = UploadRequest.Item("botao").Item("Value") 'estrato = UploadRequest.Item("estrato").Item("Value") 'end if session.LCID = 1046 call Abredb() if botao = "Alterar" then ' ALTERANDO OS DADOS RECEBIDOS NA TABELA sql = "exec SP_TR32_pedido_UPD "&cod&", '"&estrato&"'" 'response.write sql 'response.end dbWeb.execute(sql) str_html = "" str_html = str_html & "<HTML><BODY BGCOLOR=#0000FF>" str_html = str_html & "<h1>produtos</h1>" sql ="SP_TR32_email__itens_sel "&cod&"" set rs = dbWeb.execute(sql) str_html = str_html & "<table>" str_html = str_html & "<thead>" str_html = str_html & " <tr>" str_html = str_html & "<th>Produtos</th>" str_html = str_html & "<th>quantidade</th>" str_html = str_html & " <th>Total</th>" str_html = str_html & "</tr>" str_html = str_html & " </thead>" str_html = str_html & "<tbody>" do while not rs.eof str_html = str_html & "<tr>" str_html = str_html & "<td >"&rs("produto")&"</td>" str_html = str_html & "<td >"&rs("quantidade")&"</td>" str_html = str_html & "<td >"&rs("total")&"</td>" str_html = str_html & "</tr>" rs.movenext loop rs.close set rs = nothing str_html = str_html & " </tbody>" str_html = str_html & "</table>" str_html = str_html & "</BODY></HTML>" sql = "SP_TR32_email_sel "&cod&"" set rs = dbWeb.execute(sql) if estrato<>"" then Set ObjMail = Server.CreateObject("Cdonts.Newmail") objMail.Subject = "Atualização de pedido" objMail.From = "Porto Dourado <contato@email.websupply.com.br>" objMail.To = "request("email")" objMail.BodyFormat = 0 objMail.MailFormat = 0 objMail.Body = "Olá"&" "&rs("nome")&" "&rs("sobrenome")&", </br> Houve uma atualização em seu pedido pedido: "&rs("id_pedido")&" </br> o status mudou para: "&rs("descricao")&" </br> endereço de entrega: "&rs("cep")&", "&rs("rua")&", "&rs("bairro")&", "&rs("numero")&", "&rs("cidade")&", "&rs("Uf")&" </br>Total pedido: "&rs("total_pedido")&" </br> "& str_html &" </br></br>"&" Atentamente,"&" </br> "&"Equipe Porto dourado"&" </br></br> "&"Para entrar em contato com a equipe de suporte, entre em contato com o email ou ligue para nossa central no numero " objMail.Send Set objMail = nothing envio = true %> <script> alert('email com alteração enviado com sucesso!'); </script> <% end if if estrato = 6 then sql = "exec SP_TR32_adm_data_envio_UPD "&cod&"" dbWeb.execute(sql) end if if estrato = 4 then sql = "exec SP_TR32_adm_data_entregue_UPD "&cod&"" dbWeb.execute(sql) end if %> <script> alert("Dados alterado com sucesso!") parent.location = "cst_pedido.asp" </script> <% end if %> <%call Fechadb()%>  
    • By srs1999_
      Tópico
       
      Site em Código
      Sobre desenvolver sites sem o wordpress que ja tá tudo ali feito que seja um site dinâmico ou seja com banco de dados , APIs de pagamento, Painel para o usuário ,  além de todas  as funções que tem no wordpress e você teria propriedade pra explicar sobre detalhes mais técnicos da produção onde no wordpress só quem entende de progrqmação explicaria algum detalhe técnico 
      Então usando basicamente : 
      FRONT END 
      HTML 
       CSS 
      JAVASCRIPT 
      ALGUMA DE BACKEND COMO PHP E BANCO DE DADOS
      Pode se criar sites/sistemas tão bons ou melhores que no wordpress
       
      Fato : o proprio wordpress é feito em php e ate o proprio facebook tbm em php
      Fato 2 :  cerca de 70% dos sites são feitos em Wordpress
       
      Acho esse lance de procurar o caminho mais fácil limita muito a pessoa por exemplo é facil editar imagens no paint bem intuitivo , agora para editar no photoshop com muitas outras possibilidades  acaba sendo importante ir explorando essa elaboração mais difícil  com um mesmo objetivo. No caso do exemplo ( editar imagens )  
       
      Reflexão:
      Vale a pena se dedicar a trabalhar com a ferramenta Wordpress apenas por ser um meio rápido de ganhar dinheiro ?
      Ou trabalhar sem wordpress  usando tudo que exigido pra criar coisas originais mais que não seria tão rápido a produção. Mas creio que além dos sites feitos também geraria a possibildade de vender o sistema web criado para o cliente personalizar .
       
      Você Desenvolveria de que forma :
       Wordpress apenas ?
       
      Conhecer programação pra trabalhar 
      com  Wordpress ?
       
      Produzir tudo só com programação totalmente dinâmico sem  Wordpress?
    • By Joob
      Boas Malta,
       
      Queria ver se me conseguiam ajudar.
      Tenho um Search Bar em Vue,  quando faço uma pesquisa dos ficheiros ou pastas, dá-me sempre como se nada fosse encontrado, ou seja não dá o resultado, imaginemos por exemplo a pasta tem um nome de "Pasta Numero" eu começava a pesquisar com "P" ou com o "N" e supostamente deveria pesquisar tudo o que tem "P" e "N" (pastas e ficheiros).
       
      Resolvido
       
      Obrigado :)
    • By zuuzu
      Olá, estou desenvolvendo uma api para download de fotos/videos/gif, eu consegui fazer tudo certinho, mas na hora de gerar um link de download aleatório ele gera sempre o mesmo, só gera um link diferente se eu reiniciar o servidor, queria que gerasse um link diferente sempre que eu reiniciasse a página, sem precisar reiniciar o servidor. Tem como alguém me ajudar com isso? *A api está sendo desenvolvida para a automatização de download de fotos/videos/gif*

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.