Ir para conteúdo
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?

 

Compartilhar este post


Link para o post
Compartilhar em outros 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>
    

 

Compartilhar este post


Link para o post
Compartilhar em outros 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?

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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.

 

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros 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' .

Compartilhar este post


Link para o post
Compartilhar em outros 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 :)

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 reginaldo123
      estou com dificuldade em criar uma url pernalizada exemplo
       
      href="www.bolacha,.com/novabolacha"
      value= "www.bolacha.com"
       
      quando o usuario copia a url para colocar em outra pagina quero que apareça o conteudo de value, e seja direcionado para o href.
       
    • Por JGD
      Supondo que tenho um input name = dataHoraINI...
      Este input tem o  valor/value =  21/03/2019 09:00 
      Chamo a função abaixo pelo <button...:
       
      <button class="btn btn-primary" onclick="popdataJGD('dataHoraINI','pop1',document.getElementById('dataHoraINI').value)"> <i class="glyphicon glyphicon-calendar"></i> </button>  
      São 03 parâmetros: popdataJGD(objeto, div, value).. Sendo o 3º: data + hora.
       
      Observar que passo para a função o 3º parâmentro assim: document.getElementById('dataHoraINI').value
      Como poderia passar este 3º paramentro como string e inline a data e hora ???
       
      Qual diferença entre: 
      document.getElementById('dataHoraINI').value E
      this.value E/Ou ainda.
      var data_hora = "21/03/2019 09:00" Neste caso : popdataJGD(objeto, div, data_hora)... Observar no code acima a questão das aspas simples.
       
      Agradeço qualquer ajuda conceitual
       
    • Por _badi_
      Preciso de ajuda! Pode parecer uma dúvida besta, mas sou nova nessa área e não estou conseguindo resolver essa questão da facul!
      A questão é:
      1)      Faça o fluxograma e depois faça o código em Javascript de um programa  que lê  3 notas obtidas por um aluno e depois calcule  e imprima a média dos para avaliação, usando  a fórmula abaixo. Imprimir depois o conceito, conforme a tabela abaixo. Use o prompt no javascript e um botão que mostre a média e o conceito depois que do clique no mesmo.
      MA = (Nota1 + Nota2 x 2 + Nota3 x 3 + ME )/7
      Média de Aproveitamento
      Conceito
      10
      A
      7,5 e < 10
      B
      4,0 e < 7,5
      C
      < 4,0
      D
       
      Meu código ficou assim:
      <!DOCTYPE html> <html> <head>      </head> <body> Para calcular sua media e saber seu conceito, clique no botao abaixo: <br> <br> <button onclick='mostra()'>Try it</button> <p id="resp"></p> <br> <br> <script>     function mostra(){         var nota1 = prompt ("Digite a nota 1");         var resp1 = parseInt (nota1);         var nota2 = prompt ("Digite a nota 2");         var resp2 = parseInt (nota2);         var nota3 = prompt ("Digite a nota 3");         var resp3 = parseInt (nota3);         var ME = (resp1 + resp2 + resp3)/3;         var MA = resp1 + (resp2 * 2) + (resp3 * 3) + ME/7;         if (MA=10) {             document.getElementById("resp").innerHTML=("Sua media foi " + ME + " e seu conceito foi A!");         } else if (MA=7.5&&MA<10){             document.getElementById("resp").innerHTML=("Sua media foi " + ME + " e seu conceito foi B!");         } else if (MA=4&&MA<7.5){             document.getElementById("resp").innerHTML=("Sua media foi " + ME + " e seu conceito foi C!");         } else if (MA<4){             document.getElementById("resp").innerHTML=("Sua media foi " + ME + " e seu conceito foi D!");         }         }          </script> </body> </html>  
      Mas sempre volta como conceito A, não importa os valores que coloco :(
      Obrigado!
       
    • Por Eduardo S. B. de Oliveira
      Senhores, preciso de uma ajuda, estou criando um formulário onde o checkbox fique "checked" quando clicar em cima, mas o detalhe e que quando atualizar a pagina o checkbox permaneça marcado. É possível? 
    • Por alh
      Estou seguindo as especificações corretamente do git. https://github.com/opencartbrasil/opencart-rest-api/blob/master/README.md
      Estou tendo o erro ao acessar minha página de integração:
      ERRO: Not found (entity)
      Ao acessar minha página que contém o seguinte código: categorias.php
       
      No arquivo abaixo estou colocando a minha KEY e domínio correto.
      <?php $headers = array(); $headers[] = 'Content-Type: application/json'; $headers[] = 'key: MINHAKEY'; // // Replace key value for API key OpenCart (Only numbers and letters) $ch = curl_init(); curl_setopt_array($ch, [ CURLOPT_URL => 'http://www.NOMEDOMEUDOMINIO.com.br/api.php/categories', // Replace domain and table name CURLOPT_HTTPHEADER => $headers, CURLOPT_CUSTOMREQUEST => 'GET', CURLOPT_RETURNTRANSFER => true, CURLOPT_SSL_VERIFYHOST => false, CURLOPT_SSL_VERIFYPEER => false ]); $out = curl_exec($ch); curl_close($ch); print_r( $out ); // Result json ?>
×

Informação importante

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