[Resolvido] Povoar INPUTs

[Maneju 0]

Olá.

 

 

Já vi a maioria dos exemplos na NET de como povoar os INPUTs do formulário para alteração mas não consegui com nenhum deles.

 

Hoje, tenho um formulário FORMULARIO.HTML (nele só tenho realmente código HTML e código em JS) e tenho um campo CODIGO com um botão que ao ser clicado, gostaria de "passar" o ID para uma consulta SQL e preencher os INPUTs com o resultado desta pesquisa.

 

O que tenho visto nos exemplos na NET, o pessoal cria o FORM com os INPUTs numa página .PHP, que não é meu caso, meu formulário serve para a Inclusão, Alteração e Exclusão.

 

Será que teria que fazer algo com JS para só processar uma rotina e me devolver o resultado para alimentar os INPUTs?

 

Desculpem-me se a dúvida é muito básica mas estou iniciando agora programação em PHP e no livro que estou estudando só tem exemplos parecidos com o da NET.

 

 

Abraços!

[Fabyo 66]

É isso mesmo, se quer usar pagina .html tem que usar javascript.

 

voce quer saber como faz com javascript puro ou tem preferencia por algum framework?

[William Bruno 1501]

Da uma olhada:

http://www.wbruno.com.br/scripts/combo-preenche-input.php

 

Tem aqui no forum esse script alterado para funcionar apartir de input text

source:

http://www.wbruno.com.br/blog/?p=12

[Maneju 0]

Olá Fabyo.

 

Primeiramente obrigado por responder, estou nesta labuta já faz tempo.

 

Pode ser JS puro mesmo, se tiver como me mostrar como faço este processamento para obter os dados do banco e apresentá-los no input fico muito grato.

 

PS - esta técnica que estou utilizando é muito ruim? Vcs aí do fórum aconselham fazer de forma diferente?

 

Abraços!

[Fabyo 66]

Acho valido usar javascript, é rapido e pratico.

[Maneju 0]

Certo.

 

Sua sugestão em JS é parecida com a do William Bruno?

[Fabyo 66]

Sim a ideia é essa, mas ele usou Jquery, que alias recomendo

[Maneju 0]

Olá.

 

Seguindo o exemplo do William Bruno, vejam se está certo meu raciocínio:

 

1) Na function.php eu tirei a funcion MontaSelect pois no exemplo ela é a responsável por carregar os nomes dos clientes na combobox e eu não terei esta combo;

 

2)Na function Retorna adaptei o nome de minha tabela e meus campos;

 

3)Na pagina.HTML o trecho abaixo é quem "invoca" a function.php apresentando os dados de endereço e telefone do cliente selecionado. Se for isto mesmo, como "invocá-la" pela ação do click do botão?

 

<form action="" method="post">

<label>Nome: <select name="nome">

<option value="">--</option>

<?php

include('function.php');

echo montaSelect();

?>

</select></label>

<label>Endereço: <input type="text" name="endereco" value="" /></label>

<label>Telefone: <input type="text" name="telefone" value="" /></label>

</form>

É isto mesmo?

[William Bruno 1501]

3)Na pagina.HTML o trecho abaixo é quem "invoca" a function.php apresentando os dados de endereço e telefone do cliente selecionado. Se for isto mesmo, como "invocá-la" pela ação do click do botão?

 

<form action="" method="post">

<label>Nome: <select name="nome">

<option value="">--</option>

<?php

include('function.php');

echo montaSelect();

?>

</select></label>

<label>Endereço: <input type="text" name="endereco" value="" /></label>

<label>Telefone: <input type="text" name="telefone" value="" /></label>

</form>

É isto mesmo?

 

Nao.

O include ali, eh para montar o select. Se você nao precisa montar o select na pagina, nao precisa desse include.

 

Para chamar no click do botao, basta alterar o jQuery de change para click

baixou a biblioteca ?

[Maneju 0]

Olá William.

 

Acredito ser esta a linha que mencionou, certo

 

Mudar de:

$("select[name='nome']").change(function(){

Para:

$("select[name='nome']").click(function(){

 

Porém, não entendi como "será disparado" se tenho vários botões na tela, como ele identifica o click no botão que eu preciso?

 

Eu baixei a JQuery sim, ela tem o nome jquery-1.3.2.min.download, é isto mesmo? Onde devo salvá-la?

[William Bruno 1501]

Aqui eu seleciono um select pelo nome dele:

$("select[name='nome']")

você tem que alterar essa parte tb.

 

Salve, e chame corretamente..

<script type="text/javascript" src="jquery-1.3.2.js"></script>

nesse meu caso, eu salvei no mesmo nivel da pagina com o formulario.

 

veja o src

[Maneju 0]

Certo, JQuery gravada no mesmo nível da página.

 

Quanto ao select, eu não tenho nenhum na minha página, não consegui entender ainda como vou "atrela" esta parte ao click de um botão:

 

$("select[name='nome']").change(function(){

seria algo assim, mais ou menos?

$("button[name='pesquisa']").click(function(){

Não consegui fazer, inclusive a function.php não está sendo executada:

 

function.php

<?php
     include 'config.php';
 
     $con = conectar();          
     mysql_select_db('testes');  

     $id = $_POST['codigo'];
     

     /**
     * função que devolve em formato JSON os dados do cliente
     */
     function retorna( $id=null )
     {
          $id = (int)$id;
          $sql = "SELECT * FROM `clientes` ";
          if( $id != null )
               $sql .= "WHERE `idCliente` = {$id} ";
          $query = mysql_query( $sql ); 

          $json .= ' [';  
          if( mysql_num_rows( $query ) > 0 )
          {
               while( $dados = mysql_fetch_assoc( $query ) )
               {
                    $json .= "{razao: '{$dados['Razao']}', suframa: '{$dados['Suframa']}', cnpj: '{$dados['CNPJ']}'}";;
               }
          }
          else
               $json = 'razao: não encontrado';
  
          $json .= ']';
          return $json;
   }
?>

 

Na página HTML:

<script type="text/javascript" src="jquery-1.3.2.js"></script> 
$(document).ready(function(){
                $("button[name='btnpesquisar']").click(function(){
                        $("input[name='razao']").val('Carregando...');
                        $("input[name='suframa']").val('Carregando...');
			$("input[name='cnpj']").val('Carregando...');

                        $.getJSON(
                                'function.php',
                                {Codigo: $(this).val()},
                                function(data){
                                        $.each(data, function(i, obj){
                                                $("input[name='razao']").val(obj.Razao);
                                                $("input[name='suframa']").val(obj.Suframa);
						$("input[name='cnpj']").val(obj.CNPJ);
                                        })
                                });
                });
        });

Oque está errado?

[William Bruno 1501]

você envia um Codigo

{Codigo: $(this).val()},//e aqui no caso,você deve trocar pelo value do campo Codigo.. $(this), se refere ao botão nesse caso.

então precisa receber, e chamar a função:

 

<?php
     include 'config.php';
 
     $con = conectar();          
     mysql_select_db('testes');       

     /**
     * função que devolve em formato JSON os dados do cliente
     */
     function retorna( $id=null )
     {
          $id = (int)$id;
          $sql = "SELECT * FROM `clientes` ";
          if( $id != null )
               $sql .= "WHERE `idCliente` = {$id} ";
          $query = mysql_query( $sql ); 

          $json .= ' [';  
          if( mysql_num_rows( $query ) > 0 )
          {
               while( $dados = mysql_fetch_assoc( $query ) )
               {
                    $json .= "{razao: '{$dados['Razao']}', suframa: '{$dados['Suframa']}', cnpj: '{$dados['CNPJ']}'}";;
               }
          }
          else
               $json = 'razao: não encontrado';
  
          $json .= ']';
          return $json;
   }
     $id = $_GET['Codigo'];//o método getJSON só envia GET
     echo retorna( $id );
?>

Para ter certeza de que está certo, acesse lá:

function.php?Codigo=2

 

vai voltar o JSON ou erros php.. vá arrumando. Aparece ao menos 'carregando nos campos'?

como está o teu HTML ?

[Maneju 0]

Vamos lá.

 

você envia um Codigo

{Codigo: $(this).val()},//e aqui no caso,você deve trocar pelo value do campo Codigo.. $(this), se refere ao botão nesse caso.

 

Mudei, está certo?

$(document).ready(function(){
                $("button[name='btnpesquisar']").click(function(){
                        $("input[name='razao']").val('Carregando...');
                        $("input[name='suframa']").val('Carregando...');
						$("input[name='cnpj']").val('Carregando...');

                        $.getJSON(
                                'function.php',
                                {Codigo: $(document.getElementById("codigo").value},	
								
                                function(data){
                                        $.each(data, function(i, obj){
                                                $("input[name='razao']").val(obj.Razao);
                                                $("input[name='suframa']").val(obj.Suframa);
												$("input[name='cnpj']").val(obj.CNPJ);
                                        })
                                });
                });
        });

 

Para ter certeza de que está certo, acesse lá:

function.php?Codigo=2

 

Funcionou certo, retornou os dados corretamente!

 

Então creio que meu problema esteja na parte HTML ou alguma coisa referente à JQuery, certo?

 

Parte HTML referente ao Campo Código e o botão que deveria acionar a pesquisa:

 

PS - não aparece o "Carregando"

 

<td class="style6"><div align="right">Cod.:</div></td
      <td><input name="codigo" size="7" type="text" id="codigo" required="true"/>
      <label>
      <input name="btnpesquisar" type="submit" class="post" id="btnpesquisar" />
      </label>

[William Bruno 1501]

Tá.. faz o seguinte:

$(document).ready(function(){
                $("#btnpesquisar").click(function(){
                var Codigo = $("#codigo").val();
                alert( Codigo );

vamos pegar o botão pelo ID dele.

 

Diga se aparece o alert.. e se ele tem valor.

será o mesmo, mas ai podemos usar jQuery tb...

{Codigo: $("#codigo").val()},

[Maneju 0]

Tá.. faz o seguinte:

$(document).ready(function(){
                $("#btnpesquisar").click(function(){
                var Codigo = $("#codigo").val();
                alert( Codigo );

vamos pegar o botão pelo ID dele.

 

Diga se aparece o alert.. e se ele tem valor.

será o mesmo, mas ai podemos usar jQuery tb...

{Codigo: $("#codigo").val()},

 

O alert não apareceu não.

 

Obs: percebi que, qdo coloco o código javascript que povoa os inputs, dá problema na página. Os botões perdem a funcionalidade e um menu que tenho em JS, perde os submenus (verticais), ficando só os menus da horizontal.

Antes eu tinha estas definições:

<script src="script.js"></script> 
<script type="text/javascript">

Se mudo para a definição da biblioteca JQuery, pára de funcionar...

[William Bruno 1501]

Ah tá... só agora vi oque você fez..

<script type="text/javascript" src="jquery-1.3.2.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
                $("#btnpesquisar").click(function(){
                var Codigo = $("#codigo").val();
                alert( Codigo );
                        $("input[name='razao']").val('Carregando...');
                        $("input[name='suframa']").val('Carregando...');
                        $("input[name='cnpj']").val('Carregando...');

                        $.getJSON(
                                'function.php',
                                {Codigo: $("#codigo").val()},
                                function(data){
                                        $.each(data, function(i, obj){
                                                $("input[name='razao']").val(obj.Razao);
                                                $("input[name='suframa']").val(obj.Suframa);
                                                $("input[name='cnpj']").val(obj.CNPJ);
                                        })
                                });
                });
        });
</script>

esse código JS está dentro do <head> do documento ?

 

o teu jquery se chama: jquery-1.3.2.js mesmo? e está no mesmo nivel de pasta do arquivo .html ?

se tiver dúvidas, poste o arquivo completo.

[Maneju 0]

Sim, sim, está tudo dentro do <head>.

Coloquei o fragmnento original que tem a parte de javascript antes de colocar a função JQuery.

Quanto ao nome da biblioteca JQuery está certo e na mesma pasta da página HTML.

 

<script type="text/javascript">
<!--
function submitForm2(form, action) {  
    form.action = action;  
    form.submit();  	
}

function submitForm(form, action) {  
kk = document.getElementById("codigo").disabled;
if (kk == false){
   if (document.getElementById("razao").value==""){
      alert( "Preencha o campo RAZÃO!" );
	  document.getElementById("razao").focus();
   }
   else if (document.getElementById("cnpj").value==""){
      alert( "Preencha o campo CNPJ!" );
	  document.getElementById("cnpj").focus();
   }
   else if (document.getElementById("ie").value==""){
      alert( "Preencha o campo IE!" );
	  document.getElementById("ie").focus();
   }
   else if (document.getElementById("suframa").value==""){
      alert( "Preencha o campo SUFRAMA!" );
	  document.getElementById("suframa").focus();
   }
   else if (document.getElementById("logradouro").value==""){
      alert( "Preencha o campo LOGRADOURO!" );
	  document.getElementById("logradouro").focus();
   }
   else if (document.getElementById("numero").value==""){
      alert( "Preencha o campo NÚMERO!" );
	  document.getElementById("numero").focus();
   }
   else if (document.getElementById("complemento").value==""){
      alert( "Preencha o campo COMPLEMENTO!" );
	  document.getElementById("complmento").focus();
   }
   else if (document.getElementById("bairro").value==""){
      alert( "Preencha o campo BAIRRO!" );
	  document.getElementById("bairro").focus();
   }
   else if (document.getElementById("cep").value==""){
      alert( "Preencha o campo CEP!" );
	  document.getElementById("cep").focus();
   }
   else if (document.getElementById("pais").value==""){
      alert( "Preencha o campo PAÍS!" );
	  document.getElementById("pais").focus();
   }
   else if (document.getElementById("municipio").value==""){
      alert( "Preencha o campo MUNICÍPIO!" );
	  document.getElementById("municipio").focus();
   }
   else if (document.getElementById("telefone").value==""){
      alert( "Preencha o campo TELEFONE!" );
	  document.getElementById("telefone").focus();
   }else{
    form.action = action;  
    form.submit();  	
	//Habilitar();
	
   }
}else{
   Habilitar();
}
}  

function Habilitar() {
document.getElementById("codigo").disabled = false;
document.getElementById("razao").disabled = false;
document.getElementById("cnpj").disabled = false;
document.getElementById("ie").disabled = false;
document.getElementById("suframa").disabled = false;
document.getElementById("icms").disabled = false;
document.getElementById("logradouro").disabled = false;
document.getElementById("numero").disabled = false;
document.getElementById("complemento").disabled = false;
document.getElementById("bairro").disabled = false;
document.getElementById("cep").disabled = false;
document.getElementById("pais").disabled = false;
document.getElementById("municipio").disabled = false;
document.getElementById("telefone").disabled = false;
document.getElementById("uf").disabled = false;
document.getElementById("codigo").focus();
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}


function pesquisa(valor) 
{ 
//FUNÇÃO QUE MONTA A URL E CHAMA A FUNÇÃO AJAX 
url="busca_nome.php?valor="+valor; 
ajax(url); 
} 
function horizontal() { 
   var navItems = document.getElementById("menu_dropdown").getElementsByTagName("li");
    
   for (var i=0; i< navItems.length; i++) {
      if(navItems[i].className == "submenu")
      {
         if(navItems[i].getElementsByTagName('ul')[0] != null)
         {
            navItems[i].onmouseover=function() {this.getElementsByTagName('ul')[0].style.display="block";this.style.backgroundColor = "#f9f9f9";}
            navItems[i].onmouseout=function() {this.getElementsByTagName('ul')[0].style.display="none";this.style.backgroundColor = "#FFFFFF";}
         }
      }
   }
 
}
//-->
</script>
<script src="script.js"></script> 
</head>

[William Bruno 1501]

hein?! não entendi..

você tem esse site online ?

 

<script src="script.js"></script>

oque tem ai ? nesse arquivo ?

[Maneju 0]

Não está on-line não, está localhost...

 

Este é o arquivo script.js

// JavaScript Document 
// FUNÇÃO RESPONSÁVEL DE CONECTAR A UMA PAGINA EXTERNA NO NOSSO CASO A BUSCA_NOME.PHP 
// E RETORNAR OS RESULTADOS 

function ajax(url) 
{ 

//alert(nick); 
//alert(dest); 
//alert(msg); 

req = null; 
// Procura por um objeto nativo (Mozilla/Safari) 
if (window.XMLHttpRequest) { 
req = new XMLHttpRequest(); 
req.onreadystatechange = processReqChange; 
req.open("GET",url,true); 
req.send(null); 
// Procura por uma versão ActiveX (IE) 
} else if (window.ActiveXObject) { 
req = new ActiveXObject("Microsoft.XMLHTTP"); 
if (req) { 

req.onreadystatechange = processReqChange; 
req.open("GET",url,true); 

req.send(); 
} 
} 
} 

function processReqChange() 
{ 

// apenas quando o estado for "completado" 
if (req.readyState == 4) { 

// apenas se o servidor retornar "OK" 

if (req.status ==200) { 

// procura pela div id="pagina" e insere o conteudo 
// retornado nela, como texto HTML 


document.getElementById('pagina').innerHTML = req.responseText; 


} else { 
alert("Houve um problema ao obter os dados:n" + req.statusText); 
} 
} 
}