Jump to content
Sign in to follow this  
asacap1000

preencher campo Input Text com javascript

Recommended Posts

Galera salve salve a todos.

Estou com um formulário que funciona da seguinte maneira, o cliente digita o CPF/CNH do motorista e os campos seguintes são carregados automáticamente,estas informações vem do banco de dados. Caso o motorista ainda não tenha cadastro os campos permanecerão em branco aguardando o preenchimento.

O que não estou conseguindo fazer é que as informações carreguem em um input text para uma possivel digitação no campo. Com o script que eu tenho só consigo trazer as informações se o campo for um <select name...>

Segue scripts:

Primeiro html:

<script type="text/javascript">
        $(document).ready(function(){
            $('#cpf').change(function(){
                $('#validade').load('validade.php?cpf='+$('#cpf').val() );

            });
        });
    </script>


<form id="form1" name="form1" method="post" action=">

<input name="cpf" id="cpf" class="maius" value="" width="15" />


<!--OS DOIS CAMPOS ABAIXO CARREGAM NORMALMENTE AS INFORMAÇÕES PORÉM SÃO SELECT-->
<select name="nome" id="nome"></select>
<select name="cnh" id="cnh" ></select>


<!--O CAMPO ABAIXO NÃO CARREGA INFORMAÇÃO ALGUMA QUANDO MUDO PARA SELECT ELE CARREGA -->
<input type="text" name="validade" id="validade"/>


Ele realiza a pesquisa na página validade.php via js

segue:

<?php
$cpf= $_GET ['cpf'];
$connect = oci_connect("user","senha","banco");  //banco de dados oracle  

//Primeiro select busca os dados do cliente
$stmt = ociparse($connect,"select dr.name NOME, dr.cpf CPF, dr.license CNH, dr.datum_valid VALIDADE
from driver dr WHERE (dr.cpf = '$cpf' or dr.license = '$cpf')");
oci_execute($stmt,OCI_DEFAULT);  
 
   while (oci_fetch($stmt)) {

//EU PRECISO DE ALGO PARECIDO COM ISSO MAS NÃO SEI SE ESTÁ CORRETO
   echo "<input type='text' value=" . ociresult($stmt,4) . ">";

//PARA OS CAMPOS SELECTS O FORMATO ABAIXO CARREGA NORMALMENTE
echo "<option value=" . ociresult($stmt,1) . "'>" . ociresult($stmt,4) . "</option>";

}

?>



Se alguem puder me dar uma força pra resolver, acredito que seja simples mas não consegui sair do lugar.

Obrigado por enquanto

Share this post


Link to post
Share on other sites

Bom dia,

recomendo você fazer isso com ajax Json e Jquery.

de uma pesquisada que voce consegue fazer isso facilmente.

Depois de alguns testes estou utilizando o Ajax agora como você me falou só estou com um pequeno problema.

vou colocar o scritp abaixo mais resumido

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="bibliotecaAjax.js"></script>
<script type="text/javascript" src="nome.js"></script>
<style type="text/css">
.maius
{
text-transform: uppercase;
}
</style>
<title>DADOS DO MOTORISTA</title>
</head>
<form action="javascript:void%200">
<label for="cnpj"><legend><strong>DIGITE O CPF OU CNH DO MOTORISTA APENAS NUMEROS</strong></label>
 <hr>
CPF/CNH:<input name="cpf" id="cpf" width="15"/>

NOME:<input name="nome" id="nome" type="text">
LICENCA:<input name="documento" id="documento" type="text">
VALIDADE:<input name="validade" id="validade" type="text">
<br />
<hr />
</form></legend>
</body>
</html>

que realiza este script

nome.js

//////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////BUSCA NOME MOTORISTA////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////

window.onload = function(){
	var cpf = document.getElementById("cpf");
	if(cpf != null)
		cpf.onblur = function() { traduz(cpf.value); }
}

function traduz(cpf){
	if(cpf) {
		var url="nome.php?nome="+encodeURIComponent(cpf);
		requisicaoHTTP("GET",url,true);
	}
}

function trataDados(){
	var info1 = ajax.responseText;  // obtém a resposta como string
	var resposta1 = document.getElementById("nome");
	resposta1.value = info1;
}



//////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////BUSCA DOCUMENTO////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////
function traduz(cpf){
	if(cpf) {
		var url="documento.php?documento="+encodeURIComponent(cpf);
		requisicaoHTTP("GET",url,true);
	}
}

function trataDados(){
	var info2 = ajax.responseText;  // obtém a resposta como string
	var resposta2 = document.getElementById("documento");
	resposta2.value = info2;
}



//////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////BUSCA VALIDADE////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////

function traduz(cpf){
	if(cpf) {
		var url="validade.php?validade="+encodeURIComponent(cpf);
		requisicaoHTTP("GET",url,true);
	}
}

function trataDados(){
	var info3 = ajax.responseText;  // obtém a resposta como string
	var resposta3 = document.getElementById("validade");
	resposta3.value = info3;
}

Assim ele chama cada página trazendo as informações, a consulta é realizada porém apenas o ultimo campo do formulário é preenchido que no caso é validade.

Se eu comentar o ultimo campo ele carrega no campo Documento os dados.

a consulta das páginas é realizada de uma froma simples apenas para conseguir trazer as informações segue exemplo:

<?php
$gmtDate = gmdate("D, d M Y H:i:s"); 
header("Expires: {$gmtDate} GMT"); 
header("Last-Modified: {$gmtDate} GMT"); 
header("Cache-Control: no-cache, must-revalidate"); 
header("Pragma: no-cache");
header("Content-Type: text/html; charset=ISO-8859-1");

// array de palavras
$palavras = array (
	"55346595309" => "NOME DO MOTORISTA"
);

$cpf = $_GET["cpf"];
if(isset($palavras[$cpf]))
	echo $palavras[$cpf];
else
	echo "NÃO ENCONTRADA";
?>

Saberia me dizer em que parte estou errando?

Share this post


Link to post
Share on other sites

Faz assim

fiz de cabeça, então pode não funcionar.

voce vai precisar alterar o seu nome.php pra retorna no formado JSON

e ao invés de $_get usa $_post no nome.php

$("#cpf").change(function() { //vai executar todas vez que o campo cpf sobre mudança	
var campoCpf = document.getElementById("cpf").value;	//pega o valor do campo cpf
			    $.ajax({	
		                type: "POST",
			        url : "nome.php",			    
			        dataType : "json",	
		                data: {cpf: campoCpf}, //envia pro php o cpf via post 
			        success : function(data){			       
			           
			           //vai preencher os campos com o resultado do php
			            $("#nome").value(data[0].nome);
                                   $("#nome").value(data[0].validade);
                                    $("#nome").value(data[0].documento);
			        }
			    });

Share this post


Link to post
Share on other sites

Faz assim

fiz de cabeça, então pode não funcionar.

voce vai precisar alterar o seu nome.php pra retorna no formado JSON

e ao invés de $_get usa $_post no nome.php

$("#cpf").change(function() { //vai executar todas vez que o campo cpf sobre mudança	
var campoCpf = document.getElementById("cpf").value;	//pega o valor do campo cpf
			    $.ajax({	
		                type: "POST",
			        url : "nome.php",			    
			        dataType : "json",	
		                data: {cpf: campoCpf}, //envia pro php o cpf via post 
			        success : function(data){			       
			           
			           //vai preencher os campos com o resultado do php
			            $("#nome").value(data[0].nome);
                                   $("#nome").value(data[0].validade);
                                    $("#nome").value(data[0].documento);
			        }
			    });

Mano agradeço a parceria, consegui resolver a bagaça com sua dica. Segue como ficou:

<script type="text/javascript">
 $(document).ready(function(){
    $("input[name='cpf']").blur(function(){
      var $nome = $("input[name='nome']");
      var $documento = $("input[name='documento']");
      var $validade = $("input[name='validade']");

       $nome.val('Carregando...');
       $documento.val('Carregando...');
       $validade.val('Carregando...');

        $.getJSON(
          'function.php',
          { cpf: $( this ).val() },
          function( json )
          {
            $nome.val( json.nome );
            $documento.val( json.documento );
            $validade.val( json.validade );
          }
        );
    });
  });
  </script>

Function.php

<?php

  function retorna( $cpf, $db )
  {
    $sql = "SELECT NAME nome, DOCUMENTO documento, date_format(DATE_VALIDADE,'%d/%m/%Y') validade
      FROM motorista WHERE `DOCUMENTO` = '$cpf' ";

    $query = $db->query( $sql );

    $arr = Array();
    if( $query->num_rows )
    {
      while( $dados = $query->fetch_object() )
      {
        $arr['nome'] = $dados->nome;
        $arr['documento'] = $dados->documento;
        $arr['validade'] = $dados->validade;
      }
    }
    else
      $arr['nome'] = 'não encontrado';

    return json_encode( $arr );
  }

/* que devolve os dados */
if( isset($_GET['cpf']) )
{
  $db = new mysqlI('localhost', 'root', 'senha', 'banco');
  echo retorna( filter ( $_GET['cpf'] ), $db );
}

function filter( $var ){
  return $var;
}

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
Sign in to follow this  

  • Similar Content

    • By danilo759
      Tenho uma tabelinha de programas para uma rádio... está da seguinte forma.

      titulo
      data (YYYY-MM-DD)
      hora (00:00:00)

      Minha consulta, mas não retorna o programa da hora corrente. O que eu fiz de errado?
      SELECT * FROM programas WHERE data = CURDATE() AND hora = CURTIME() LIMIT 1
    • By Sapinn
      Fala galera, tudo blz? Então estou com uma dúvida um pouco boba mas que não consegui resolver o problema ainda. Estou desenvolvendo um site para agendamento de serviços e resolvi fazer a pagina principal como uma dashboard (área de administrador) onde seria muito mais fácil para o usuário registrar os serviços entre outras coisas, enfim, estou com um problema quanto ao layout da página. Normalmente o dashboard tem um menu à esquerda e o conteúdo  fica à direita quando ocorre o clique no botão hambúrguer( Aquele que tem três tracinhos) esse menu é recolhido e esse conteúdo que fica a direita fica centralizado, às vezes, em muitos dashboard esse menu só é um pouco recolhido ficando amostra apenas os ícones enquanto o conteúdo da direita fica um pouco mais centralizado. A pergunta é como eu posso fazer isso? Outra coisa, na responsividade quando a página diminui o menu da uma retraída e o conteúdo fica centralizado quando é clicado no botão hambúrguer o menu não afasta o conteúdo de volta e sim fica por cima desse conteúdo. Não sei como fazer isso, eu estou melhorando quando ao desenvolvimento front-end mas ainda não é muito a minha praia. Eu tentei fazer isso com css grid (que por sinal é algo que eu não tenho tanta pratica, já que eu sou melhor com flebox) mas não funcionou e o código só ficou ruim e confuso. Se alguém puder me ajudar ficaria muito grato
       
      Não tem muito coisa ainda mas irei disponibilizar o código que desenvolvi até agora:
       
      <!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>Sistema de Gerenciamento</title>     <link rel="stylesheet" href="assets/css/style.css">     <link rel="icon" href="assets/images/icone-logo.png">     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css"> </head> <body>     <header>         <div class="bar-header">             <i class="bi bi-list"></i>         </div>     </header>     <nav class="menu">         <div class="user">             <i class="bi bi-person-circle"></i>             <p>Nome do Usuário</p>         </div>         <ul>             <li class="active"><a href=""><i class="bi bi-house-fill"></i> Inicio</a></li>             <li><a href=""><i class="bi bi-calendar-plus-fill"> </i>Adicionar Serviço</a></li>             <li><a href=""><i class="bi bi-person-plus-fill"></i> Adicionar Admin</a></li>             <li><a href=""><i class="bi bi-file-earmark-post-fill"></i> Configurações de Nota</a></li>             <li><a href=""><i class="bi bi-file-person"></i> Configurações da Conta</a></li>             <li><a href=""><i class="bi bi-box-arrow-right"></i> Sair</a></li>         </ul>     </nav>     <main></main>     <footer></footer> </body> </html>  
       
      *{     padding: 0;     margin: 0; } body{     font-family: Arial, Helvetica, sans-serif;     background-color: #e5e5e5; } .bar-header{     background-color: #4285f4;     position: fixed;     color: #fff;     width: 100%;     height: 40px;     font-size: 37px;     padding: 8px 16px;     z-index: 1; } .menu{     background-color: #26353e;     width: 260px;     height: 100vh;     position: fixed;     padding-top: 65px; } .menu ul li{     list-style: none;     padding: 15px;     cursor: pointer;     border-bottom: 1px solid #26353e; } .menu ul li:hover{     background-color: #4285f4;      } .menu li a{     color: #fff;     font-size: 18px;     text-decoration: none;     } .menu i{     font-size: 27px; } .menu .active{     background-color: #4285f4; } .user{     margin-left: 50px;     padding-bottom:10px ; } .user i{     font-size: 120px;     color: #4285f4; } .user p{     font-weight: bold;     font-size: 18px;     color: #fff; }
       
    • By Ro_JnR
      Estou tentando a semanas resolver um problema, consumir uma API e verificar se o campo no banco está vazio, se estiver faz insert se não faz update.
      Até aí tudo bem, agora não consigo passar do meu select para o banco, ele da erro.
       
      Segue o código:
       
      <?php

          require_once("db.class.php");
          
          $url = "https://servicodados.ibge.gov.br/api/v1/localidades/distritos";
              $ch = curl_init($url);
              curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
              curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
              $resultado = json_decode(curl_exec($ch));
              foreach ($resultado as $cidades) {
                  $nome = $cidades->nome;
                  $stmt = $conn->prepare("SELECT name FROM cidades WHERE name=?");
                  $stmt->bind_Param(':name', $nome);
                  $stmt->execute();
                  $stmt->bind_result($resultSelect);
                  $stmt->fetch();
                  if(!$stmt->execute()){
                      print_r($stmt->errorInfo());
                  }
              } 

      ?>
       
      Código do banco:
       
      $conn = new PDO("mysql:host=localhost;dbname=exercicio", "root", "");
      //"sqlsrv:Database=dbphp7;server=localhost\SQLEXPRESS;ConnectionPooling=0", "sa", "root");
      $stmt = $conn->prepare("SELECT * FROM cidades ORDER BY nome");
      $stmt->execute();
      //fetchALL basicamente faço while do mysqli
      $results = $stmt->fetchALL(PDO::FETCH_ASSOC);
       
      Print do erro:

       
      Tenho um outro exercicio que fiz bem parecido, consumi a API de estados e inseri no banco de dados, esse funcionou normalmente.
      Alguém poderia me dar uma luz, não sei mais o que fazer.
      Era para ser simples rsrsrrs.
    • By Sapinn
      Fala galera existe algum meio que eu possa usar para saber automaticamente o tamanho da tela usando apenas javascript????
       
      Eu sei como saber o tamanho da tela usando:
       
      if (window.matchMedia("(max-width:800px)").matches) {         console.log('Menos que 800')       } else {         console.log('Mais que 800')       }  Ainda assim, preciso atualizar a pagina para conseguir obter o resultado, existe alguma maneira de fazer isso sem atualizar a página.
           
    • By programananet
      Quero vender códigos fontes de sites para empresas ou outras pessoas com um site fazendo a mediação !
      Existe um site onde podemos vender código fonte , se sim qual e como vendemos ?
×

Important Information

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