Jump to content
joelzsbit

Preencher vários inputs de acordo com id escolhido no select

Recommended Posts

Pessoal tenho o seguinte código:

 

<body>
        <label for="cadastro">Cadastro</label>
        <select id="cadastro" name="cadastro" id="">
            <?php
            $busca_segura = $PDO_con->prepare("SELECT * FROM tb_cad_pf WHERE excluido != 'sim' ");
            $busca_segura->execute();
            if ($busca_segura == 1) {
                while ($dados= $busca_segura->fetch(PDO::FETCH_ASSOC)) {
                    $opt .= '<option value="' . $dados['id_cad_pf'] . '">' . $dados['nome'] . '</option>';
                }
            } else {
                $opt = '<option value="0">Nenhum cliente cadastrado</option>';
            }
            echo $opt;
            ?>
        </select>

        <label for="nome">Nome</label>
        <input type="text" id="nome" placeholder="nome" value=""/>

        <label for="sobrenome">Sobrenome</label>
        <input type="text" id="sobrenome" placeholder="nome" value=""/>

        <label for="login">Login</label>
        <input type="text" id="login" placeholder="nome" value=""/>

        <script>

            var nomes = ["", "Tiago", "Rafael", "Marcos", "Tatiane", "Luana"];
            var sobrenomes = ["", "Pereira", "Silva", "Grilhones", "Nascimento", "Piovani"];
            var logins = ["", "tiago_pereira", "rafael_01", "marcos.g2", "taty2017", "luana10"];

            document.getElementById("cadastro").addEventListener('change', function () {
                document.getElementById("nome").value = nomes[this.selectedIndex];
                document.getElementById("sobrenome").value = sobrenomes[this.selectedIndex];
                document.getElementById("login").value = logins[this.selectedIndex];
            });

        </script>
    </body>

Ao selecionar um id no select me retorna o respectivo nome, sobrenome e login nos referidos inputs. Por exemplo se eu selecionar o 3 id ele vai preencher os inputs nome: Rafael, Sobrenome: Silva e login: rafael_01. Até ai tudo bem, esta funcionando.

A duvida é como que faço para que no "var nomes",  "var sobrenomes" e "var logins" vir direto do banco de acordo com o id escolhido?

 

Share this post


Link to post
Share on other sites

Tente isso: (Não sou muito bom em php).

 

Crie estas variáveis php:

$nome = array();
$sobrenome = array();
$login = array();

 

Acrescente as três linhas abaixo dentro do seu while (lembrando de ajustá-las com os respectivos nomes dos campos da sua tabela).

while ($dados= $busca_segura->fetch(PDO::FETCH_ASSOC)) {
  $opt .= '<option value="' . $dados['id_cad_pf'] . '">' . $dados['nome'] . '</option>';
  $nome = $dados['nome'];
  $sobrenome = $dados['sobrenome'];
  $sobrenome = $dados['login'];	
}

Agora esse será seu código javascript:

<script>
  
  var nomes = new Array();
  var sobrenomes = new Array();
  var logins = new Array();
  
  <?php 
  foreach($nome as $key => $value) { 
    printf("nomes[%d] = '%s';", $key, $value); // Imprime nomes[0] = '(primeiro nome)'; 
  } 

  foreach($sobrenome as $key => $value) { 
    printf("sobrenomes[%d] = '%s';", $key, $value); // Imprime sobrenomes[0] = '(primeiro sobrenome)'; 
  } 

  foreach($login as $key => $value) { 
    printf("logins[%d] = '%s';", $key, $value); // Imprime logins[0] = '(primeiro login)'; 
  } 

  ?> 
  document.getElementById("cadastro").addEventListener('change', function(){
    document.getElementById("nome").value = nomes[this.selectedIndex];
    document.getElementById("sobrenome").value = sobrenomes[this.selectedIndex];
    document.getElementById("login").value = logins[this.selectedIndex];
  });

</script>
    

 

Share this post


Link to post
Share on other sites

Fiz assim:

<body>
        <label for="cadastro">Cadastro</label>
        <select id="cadastro" name="cadastro" id="">
            <?php

            $busca_segura = $PDO_con->prepare("SELECT * FROM tb_cad_pf WHERE excluido != 'sim' ");
            $busca_segura->execute();
            if ($busca_segura == 1) {
                while ($dados= $busca_segura->fetch(PDO::FETCH_ASSOC)) {
                    $opt .= '<option value="' . $dados['id_cad_pf'] . '">' . $dados['nome'] . '</option>';
                    $nome .= $dados['nome']; // criei o array incluido  .=
                    $sobrenome .= $dados['sobrenome']; // criei o array incluido .=
                    $login .= $dados['login'];	// criei o array incluido .=
                }
               
            } else {
                $opt = '<option value="0">Nenhum cliente cadastrado</option>';
            }
            echo $opt;
      
            ?>
        </select>

        <label for="nome">Nome</label>
        <input type="text" id="nome" placeholder="nome" value=""/>

        <label for="sobrenome">Sobrenome</label>
        <input type="text" id="sobrenome" placeholder="sobrenome" value=""/>

        <label for="login">Login</label>
        <input type="text" id="login" placeholder="login" value=""/>

<script>
       
var nomes  = <?php echo $nome ?>; 
var sobrenomes = <?php echo $sobrenome ?>;
var logins = <?php echo $login ?>;
  
  <?php 
  foreach($nome as $key => $value) { 
    printf("nomes[%d] = '%s';", $key, $value); // Imprime nomes[0] = '(primeiro nome)'; 
  } 

  foreach($sobrenome as $key => $value) { 
    printf("sobrenomes[%d] = '%s';", $key, $value); // Imprime sobrenomes[0] = '(primeiro sobrenome)'; 
  } 

  foreach($login as $key => $value) { 
    printf("logins[%d] = '%s';", $key, $value); // Imprime logins[0] = '(primeiro login)'; 
  } 

  ?> 

            document.getElementById("cadastro").addEventListener('change', function () {
                document.getElementById("nome").value = nomes[this.selectedIndex];
                document.getElementById("sobrenome").value = sobrenomes[this.selectedIndex];
                document.getElementById("login").value = logins[this.selectedIndex];
            });

        </script>
        
    </body>

Não mostra erro, mesmo assim não preenche os campos, note que criei os arrays colocando ".= " nas variáveis ($nome, $sobrenome e $login) do php, sera que é ai o problema?

Share this post


Link to post
Share on other sites
4 horas atrás, Eziquiel disse:

Creio que sim. Utilize sem o "." (ponto). Ajuste apenas os nomes dos campos dentro do while.

Retirei os pontos, no while ja estão com o nome dos campos da tabela.

 

4 horas atrás, wessleysanttos disse:

Amigo, é possível também fazer por ajax 

Weslsley, com Ajax, não tentei ainda... mas pelo que sei teria que criar um arquivo externo. Mas ai para cada input terei que criar um arquivo externo? se for assim ai fica mais trabalhoso.

Share this post


Link to post
Share on other sites

Precisa não. 

Olha, da uma olhada nesse tutorial:

http://clubedosgeeks.com.br/programacao/listando-registro-de-banco-de-dados-mysql-com-ajax-json-e-php

 

Ao invés de fazer a chamada ajax no $(document).ready(), tu faria no .onchange do select.

E ao invés de printar os dados em uma table, tu coloca nos input. 

Tenta seguir ele e qualquer duvida posta ai.

Share this post


Link to post
Share on other sites

@wessleysanttos o lugar do listener do evento ficar é indiferente...

 

Veja um exemplo de jQuery:

<select name="funcionarios" id="funcionarios">
	<option value="">-- Selecione --</option>
	<option value="1">Funcionario 1</option>
	<option value="2">Funcionario 2</option>
</select>

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>

<script type="text/javascript">
$(document).ready(function() {
	//onchange....
	$( "#funcionarios" ).bind( "change", function() {
		var funcionarioSelecionado = $(this).val();
		alert(funcionarioSelecionado);
	});	
});
</script>

Live Demo:

https://fiddle.jshell.net/5qm9700r/

 

 

É a 'mesma' coisa que:

<select name="funcionarios" id="funcionarios" onchange="alert(this.value)">
	<option value="">-- Selecione --</option>
	<option value="1">Funcionario 1</option>
	<option value="2">Funcionario 2</option>
</select>

Live Demo:

https://fiddle.jshell.net/qwsvhtcq/

 

Que também é possível fazer sem jQuery:

<select name="funcionarios" id="funcionarios" onchange="alert(this.value)">
	<option value="">-- Selecione --</option>
	<option value="1">Funcionario 1</option>
	<option value="2">Funcionario 2</option>
</select>


<script type="text/javascript">
	document.getElementById("funcionarios").addEventListener("change", function() {
		alert(this.value);	
	});
</script>

Live demo sem jQuery + Listener:

https://fiddle.jshell.net/3tedze11/1/

 

 

 

Pode parecer que o segundo jeito é melhor em todos os casos.

Porem como evento fica inline qualquer linha que exija uma leitura ou muitos códigos fica complicado de ler.

 

 

 

 

Share this post


Link to post
Share on other sites

Pessoal com ajuda de vocês e com pesquisa na net, consegui fazer e esta funcionando da forma que queria, apenas tive que incluir um arquivo externo para fazer a busca no banco, mas não precisou fazer vários arquivos para cada input como imaginava:

 

No meu arquivo teste.php ficou assim:

 

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("select[name='nome']").change(function () {
                    var nome = $("input[name='nome']");
                    var sobrenome = $("input[name='sobrenome']");
                    var login = $("input[name='login']");

                    $(nome).val('Carregando...');
                    $(sobrenome).val('Carregando...');
                    $(login).val('Carregando...');

                    $.getJSON(
                            'function.php', // arquivo externo que faz as buscas no banco.
                            {id_cad_pf: $(this).val()},
                    function (json)
                    {
                        $(nome).val(json.nome);
                        $(sobrenome).val(json.sobrenome);
                        $(login).val(json.login);
                    }
                    );
                });
            });
        </script>

    </head>
    <body>
        <form action="" method="post">
            <label>Nome: </label>
            
            <select name="nome">
                <option value="">Seleciona um Usuario: </option>
                <?php
                include 'function19.php';
                echo montaSelect();
                ?>
            </select>
            
            <label>Nome: <input name="nome" type="text" disabled="disabled" value="" /></label>
            <label>Sobrenome: <input type="text" name="sobrenome" value="" /></label>
            <label>login: <input type="text" name="login" value="" /></label>
        </form>
    </body>
</html>

Ai no meu arquivo function.php fiz assim:

 

<?php
require_once("../DAO/conn.class.php");
require_once("../classes/classes.class.php");
$classe = new myclass;

function montaSelect() {
    $PDO_con = conectar();
    $busca_segura = $PDO_con->prepare("SELECT * FROM tb_cad_pf WHERE excluido != 'sim' ");
    $busca_segura->execute();
    if ($busca_segura == 1) {
        while ($dados = $busca_segura->fetch(PDO::FETCH_ASSOC)) {
            $opt .= '<option value="' . $dados['id_cad_pf'] . '">' . $dados['nome'] . '</option>';
        }
    } else {
        $opt = '<option value="0">Nenhum cliente cadastrado</option>';
    }
    return $opt;
}

/**
 * função que devolve em formato JSON os dados do cliente
 */
function retorna($id) {
    $PDO_con = conectar();
    $id = (int) $id;

    $busca_id = $PDO_con->prepare("SELECT * FROM tb_cad_pf WHERE id_cad_pf = '$id'");
    $busca_id->execute();

    $arr = Array();
    if ($busca_id == 1) {
        while ($dados_id = $busca_id->fetch(PDO::FETCH_ASSOC)) {
            $arr['nome'] = $dados_id['nome'];
            $arr['sobrenome'] = $dados_id['sobrenome'];
            $arr['login'] = $dados_id['codigo'];
        }
    } else
        $arr[] = 'endereco: não encontrado';

    return json_encode($arr);
}

/* só se for enviado o parâmetro, que devolve o combo */
if (isset($_GET['id_cad_pf'])) {
    echo retorna($_GET['id_cad_pf']);
}

Só não entendi ali no "function retorna($id)"  onde esta "$id = (int) $id", como que essa variável $id esta com o valor do $id pra fazer a consulta no banco se em nenhum momento eu estou setando esse $id. Para explicar melhor: se no select eu escolho o id 5, como que o $id assume esse valor se nenhum momento ele esta setado que $id esta com '5' .

Share this post


Link to post
Share on other sites
Citar

Pessoal com ajuda de vocês e com pesquisa na net


Que legal a ideia do forum é essa, ajudar a trilhar o caminho e não percorrer pra ti.

Citar

Para explicar melhor: se no select eu escolho o id 5, como que o $id assume esse valor se nenhum momento ele esta setado que $id esta com '5' .

Como não?


No Trecho em Javascript

 $.getJSON(
    'function.php', // arquivo externo que faz as buscas no banco.
    {id_cad_pf: $(this).val()},
    function (json){
        $(nome).val(json.nome);
        $(sobrenome).val(json.sobrenome);
        $(login).val(json.login);
    }
 );


 
Nesse momento você criou um Objeto em Javascript {}

E passou o parâmetro
 

id_cad_pf = $(this).val()

 Esse cara aqui é o value do Combo selecionado no evento (Lembra do evento?) 'change'

 

Ou seja assim q o evento ocorre é disparado.

 

Só toma cuidado com o escopo do this.

Tenta sempre 'armazenar' ele logo de inicio.
Exemplo:

$("select[name='nome']").change(function () {
    var nome = $("input[name='nome']");
    var sobrenome = $("input[name='sobrenome']");
    var login = $("input[name='login']");
    
    var id_cad_pf_selected = $(this).val();
    $(nome).val('Carregando...');
    $(sobrenome).val('Carregando...');
    $(login).val('Carregando...');
    $.getJSON(
         'function.php'
        ,{id_cad_pf: id_cad_pf_selected}
        ,function (json){
            $(nome).val(json.nome);
            $(sobrenome).val(json.sobrenome);
            $(login).val(json.login);
        }
    );
});


E isso dispara uma requisição HTTP com o _GET[id_cad_pf] = <valor>


Ficando algo assim:

function.php?id_cad_pf=5

 

Tem uma serie bem legal do Zeno explicando um pouco da aba 'NetWork', e como ela te auxilia a ler oq foi enviado.

https://www.youtube.com/watch?v=wsCCACcEtig&list=PLiGzvgwA5Gmgnq5vPjJxW52hDiX3ndL53&index=7

 

 

Recomendo a serie por completo:

https://www.youtube.com/watch?v=XUgfwYzv-WQ&list=PLiGzvgwA5Gmgnq5vPjJxW52hDiX3ndL53

 

Qualquer duvida estamos ai :)

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 asacap1000
      Olá galera estou quebrando a cabeça aqui e não sei mais o que fazer. Estamos migrando nossa intranet que estava desatualizada demais e estamos colocando toda ela em php7.3.
      Dentro desse sistema temos varias consultas que são realizadas no Oracle. As consultas estão ocorrendo 100% mas ao chegar na plataforma de relatórios travou tudo. Não consegui acertar o meio de consultar por período, já utilizei "to_date, to_char, trunc" e nada. Interessante que no PLSQL o to_date funciona certo
      SELECT DISTINCT TO_DATE(IO.TIME_ARRIVAL)
        FROM IN_OUT IO
       WHERE TO_DATE(IO.TIME_ARRIVAL) BETWEEN '01/11/2021' AND '23/11/2021'
       
      1    04/11/2021
      2    18/11/2021
      3    17/11/2021
      4    14/11/2021
      5    22/11/2021
      6    08/11/2021
      7    11/11/2021
      8    13/11/2021
      9    09/11/2021
      10    10/11/2021
      11    05/11/2021
      12    19/11/2021
      13    15/11/2021
      14    03/11/2021
      15    06/11/2021
      16    23/11/2021
      17    01/11/2021
      18    02/11/2021
      19    16/11/2021
      20    20/11/2021
      21    12/11/2021
      22    21/11/2021
       
      Se eu utilizar ele ignora a data que estabeleci para a consulta
       TO_CHAR(IO.TIME_ARRIVAL,'DD/MM/YYYY') BETWEEN '01/11/2021' AND '23/11/2021'
       
      1    03/07/2013
      2    05/07/2013
      3    18/06/2013
      4    21/05/2013
      5    20/05/2013
      6    12/08/2013
      7    21/08/2013
      8    23/08/2013
      9    02/09/2013
      10    12/09/2013
       
      Isso no PLSQL, no caso do PHP o to_date não funciona nem gera o relatório, e no to_char funciona mas ignorando as datas apontadas.
       
      O que dá pra  fazer pra resolver isso, tenho que finalizar essa migração até final de Dezembro e estou começando a ficar preocupado com o tempo
       
      Agradeço qualquer ajuda que vier
    • By Marceloely
      Eu gostaria de saber como fazer para preencher automaticamente(pré populado) uma página de pagamentos a partir dos dados inseridos em uma página anterior pelo plugin do contact form 7 do wordpress
       
      Os campos até são preenchidos, mas não com a informação inserido no formulário mas sim com a id mesmo que coloquei na URL
        
      <label> Seu nome
          [text nome id:nome class:nome] </label>
      <label> Seu DDD
      [tel DDD id:DDD class:DDD]</label>
      <label> Seu Celular
      [tel celular id:celular class:celular]</label>
      <label> Seu e-mail
      </label>
      <label> Assunto
          [text* your-subject] </label>
      <label> Sua mensagem (opcional)
          [textarea your-message] </label>
      [submit "Enviar"]
      <script>
       document.addEventListener('wpcf7mailsent', function (Event) {
         location = 'https://pay.hotmart.com/A48773288I?ap=5181&name=id:nome&phoneac=id:ddd&phonenumber=id:celular&email=id:email';
       }, false);
      </script>
    • By Marceloely
      Em alguns países, campanhas de publicidade com objetivo de mensagem no instagram são proibidas, tendo isso em vista gostaria de saber se é possível criar um link onde o usuário caia direto no inbox de outra pessoa no instagram? Como se fosse aqueles links do que cai na conversa do whatsapp.
    • By rafa-martin
      Pessoal, boa noite. 
       
      Estou tendo problemas ao passar um  parâmetro do tipo cursor no java no momento que chamo uma proc no oracle. 
       
      Tenho uma procedure que o parâmetro é um cursor. 
       
      create or replace minhaproce(p_result OUT SYS_REFCURSOR)
       
      begin
        open p_result for select * from tabela;
      end;
       
      Até aqui beleza. 
       
      quando chamo no java não está aceitando o tipo cursor.
       
      @Query(value = "{call minhaproce(?)}", nativeQuery = true)
      Collection<Coche> minhaproce(@Param("p_result") OracleTypes.CURSOR) 
       
      não é aceita. mesmo eu colocando como collection Collection<Coche> listaProcedure(@Param("p_result") List<Coche> p_result2), também não aceita. Agora seu eu fizer o select direto com abaixo retorna. 
       
      @Query(value = "SELECT * FROM tabela", nativeQuery = true)
      Collection<Coche> minhaproce();
       
      Por que funciona fazendo o select direto e não funciona pela procedure? Não acho nada na internet alguma coisa parecida.
    • By KBAlbuquerque
      Estou tentando salvar o nome da imagem no banco de dados com um FormData;
      porém está dando que a imagem está nula no Servidor Node JS da API.
       
      Uso React Native e Express File Upload e Node JS.
       
      Muito obrigada.
       
      Segue o código:
       
      Constantes:
           
      const [nome, setNome] = useState('');       const [marca, setMarca] = useState('');       const [modelo, setModelo] = useState('');       const [foto, setFoto] = useState('');       const [fotoNome, setFotoNome] = useState('');       const [fotoType, setFotoType] = useState('');       const [usuarioId, setUsuarioId] = useState('');  
      Código da API:
         
      const nome = req.body.nome;     const marca = req.body.marca;     const modelo = req.body.modelo;     const foto = req.files;     const usuarioId = req.body.usuario_id;      const file = Date.now().toString() + '_' + foto.myfile;      const filePath = path.join(__dirname, 'public', 'imagens');      foto.mv(`${filePath}/${file}`, err => {           if (err) {               return res.send('Imagem não salva!');           } else {               return res.send('Imagem salva com sucesso!');           }     });  
      Escolhe a Imagem:
           
      const escolhaImagem = (response) => {         if (response.didCancel) {             console.log('Cancelado!');         } else if (response.error) {             console.log("Erro na Imagem: " + response.error);         } else if (response.customButton) {             console.log('Botão customizado' + response.customButton);         } else {             setFoto(response);             setFotoUri(response.uri);             setFotoNome(response.fileName);             setFotoType(response.type);         }     }  
      Função FormData no Cadastro:
              
      const formData = new FormData();         formData.append('nome', nome);         formData.append('marca', marca);         formData.append('modelo', modelo);         formData.append('myfile', fotoNome);         formData.append('usuario_id', usuarioId);         console.log(formData);         const headers = {             method: "post",             body: formData,             headers: {                 "Content-Type": "multipart/form-data",                 "Accept": "application/json",             },         }         await fetch(URL_SERVIDOR + '/salvar-veiculo', headers)             .then(response => response.json())             .then(result => {                 console.log(result)             }).catch((err) => {                 console.log("ERRO: " + err);             });  
×

Important Information

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