[Resolvido] Ajax + Php + Textfield

[pcjardim 0]

Olá! estou com o seguinte problema/dúvida:- Quero fazer o seguinte: Fazer consulta no BD e mostrar por exemplo, no 1º combobox o estado, e de acordo com estado selecionado, seja mostrado as cidades, mas em TextFields, e a medida que eu mudasse o estado no combobox atualizasse as cidades. Estou usando o exemplo das cidades porque consegui fazer com 2 combobox, de acordo que eu seleciono o 1º combobox (estados) ele preenche o 2º combobox (cidades), com as cidades respectivas. Na verdade vou usar para endereço (quando eu selecionar a Rua ele me preencherá os Textfields com os demais dados do endereço que já estaram armazenados no BD). Resumindo com 2 combobox consigo... mas com 1 combobox e textfieds, não consigo. Aguém poderia me dar uma luz, uma ajuda... Obrigado...

[Tiago Cardoso 1]

poste o SCRIPT para a gente te ajudar, ok?

[pcjardim 0]

Estou estudando através de exemplos na intertne, estou usando exemplos de 2 combobox, aqueles q você seleciona o estado no 1º dai ele preenche o 2º com as cidades correspondentes, para dai tentar chegar onde quero. Quero que o primeiro fique como esta, porém não existiria o 2º os dados seriam preenchidos em tabela ou textfield, de preferência em textfield. Tenhos os seguintes arquivos:

index.php

 

<?/*----------------------------------------------------------------------Arquivo .............: AJAX + PHP                                     Desenvolvido por ....: Júlio César Martini                            Matéria .............: Artigo 127 - www.imasters.com.br               Criado em  ..........: 14/03/2006                                     ----------------------------------------------------------------------*///CONECTA AO MYSQL              require_once("conecta.php");    //PEGA OS ESTADOS $sql = "                  SELECT a.id_estado, a.dsc_estado, a.sigl_estado         FROM estados a          		ORDER BY a.dsc_estado"; //EXECUTA A QUERY               $sql = mysql_query($sql);       $row = mysql_num_rows($sql); ?><script language="JavaScript">   function Dados(valor) {      //verifica se o browser tem suporte a ajax	  try {         ajax = new ActiveXObject("Microsoft.XMLHTTP");      }       catch(e) {         try {            ajax = new ActiveXObject("Msxml2.XMLHTTP");         }	     catch(ex) {            try {               ajax = new XMLHttpRequest();            }	        catch(exc) {               alert("Esse browser não tem recursos para uso do Ajax");               ajax = null;            }         }      }	  //se tiver suporte ajax	  if(ajax) {	     //deixa apenas o elemento 1 no option, os outros são excluídos		 document.forms[0].listCidades.options.length = 1;	     		 idOpcao  = document.getElementById("opcoes");		 	     ajax.open("POST", "cidades.php", true);		 ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");		 		 ajax.onreadystatechange = function() {            //enquanto estiver processando...emite a msg de carregando			if(ajax.readyState == 1) {			   idOpcao.innerHTML = "Carregando...!";   	        }			//após ser processado - chama função processXML que vai varrer os dados            if(ajax.readyState == 4 ) {			   if(ajax.responseXML) {			      processXML(ajax.responseXML);			   }			   else {			       //caso não seja um arquivo XML emite a mensagem abaixo				   idOpcao.innerHTML = "--Primeiro selecione o estado--";			   }            }         }		 //passa o código do estado escolhido	     var params = "estado="+valor;         ajax.send(params);      }   }      function processXML(obj){      //pega a tag cidade      var dataArray   = obj.getElementsByTagName("cidade");      	  //total de elementos contidos na tag cidade	  if(dataArray.length > 0) {	     //percorre o arquivo XML paara extrair os dados         for(var i = 0 ; i < dataArray.length ; i++) {            var item = dataArray[i];			//contéudo dos campos no arquivo XML			var codigo    =  item.getElementsByTagName("codigo")[0].firstChild.nodeValue;			var descricao =  item.getElementsByTagName("descricao")[0].firstChild.nodeValue;				        idOpcao.innerHTML = "--Selecione uma das opções abaixo--";						//cria um novo option dinamicamente  			var novo = document.createElement("option");			    //atribui um ID a esse elemento			    novo.setAttribute("id", "opcoes");				//atribui um valor			    novo.value = codigo;				//atribui um texto			    novo.text  = descricao;				//finalmente adiciona o novo elemento				document.forms[0].listCidades.options.add(novo);		 }	  }	  else {	    //caso o XML volte vazio, printa a mensagem abaixo		idOpcao.innerHTML = "--Primeiro selecione o estado--";	  }	     }</script><html>   <head>      <title>127º artigo PHP</title>	  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">   </head>      <body bgcolor="#FFFFFF">      <h1>127º artigo: AJAX + PHP</h1>	  Carregando cidades sem dar refresh na página.      <br><br>	  	  <form name="frmAjax">	     Estado: 	     <select name="listEstados" onChange="Dados(this.value);">	        <option value="0">--Selecione o estado >></option>		    <? for($i=0; $i<$row; $i++) { ?>		       <option value="<? echo mysql_result($sql, $i, "id_estado"); ?>">			   <? echo mysql_result($sql, $i, "dsc_estado"); ?></option>		    <? } ?>	     </select>		 	  	     <br><br>	     Cidade: 	     <select name="listCidades" onChange="alert(this.value);">            <option id="opcoes" value="0">--Primeiro selecione o estado--</option>	     </select>		 	  </form>	  <?	  	  $conexao = mysql_pconnect("localhost","root","paulo") or die($msg[0]);      mysql_select_db("imasters",$conexao) or die($msg[1]);// Colocando o Início da tabela?><table border="1"><tr>   <td><div align="center"><b>ID</b></div></td>   <td><div align="center"><b>Nome</b></div></td>   <td><div align="center"><b>Sigla</b></div></td></tr><?// Fazendo uma consulta SQL e retornando os resultados em uma tabela HTML$query = "SELECT id_estado,dsc_estado,sigl_estado FROM estados ORDER BY id_estado";$resultado = mysql_query($query,$conexao);while ($linha = mysql_fetch_array($resultado)) {   ?>   <tr>      <td><? echo $linha['id_estado']; ?></td>      <td><? echo $linha['dsc_estado']; ?></td>      <td><? echo $linha['sigl_estado']; ?></td>   </tr>   <?}?></table>   </body></html>

conecta.php

<?/*----------------------------------------------------------------------Arquivo .............: AJAX + PHP                                     Desenvolvido por ....: Júlio César Martini                            Matéria .............: Artigo 127 - www.imasters.com.br               Criado em  ..........: 14/03/2006                                     ----------------------------------------------------------------------*///CONECTA AO MYSQL                                       $conn = mysql_connect("localhost", "root", "paulo")              or die("Erro na conexão com a base de dados"); //SELECIONA A BASE DE DADOS                $db = mysql_select_db("imasters", $conn)            or die("Erro na seleção da base de dados");  ?>

cidades.php

<?/******************************************************************// ARQUIVO ...: Monta o XML das Cidades // BY ........: Júlio César Martini     // DATA ......: 14/03/2006              /******************************************************************///CONECTA AO MYSQL                     require_once("conecta.php");           //RECEBE PARÃMETRO                     $pEstado = $_POST["estado"];           //QUERY  $sql = "        SELECT a.id_cidade, a.dsc_cidade            FROM  cidades a                    		WHERE a.cod_estado = ".$pEstado."  		ORDER BY a.dsc_cidade";            //EXECUTA A QUERY               $sql = mysql_query($sql);       $row = mysql_num_rows($sql);    //VERIFICA SE VOLTOU ALGO if($row) {                   //XML   $xml  = "<?xml version=\"1.0\" encoding=\"ISO-8859-1\"?>\n";   $xml .= "<cidades>\n";                     //PERCORRE ARRAY               for($i=0; $i<$row; $i++) {        $codigo    = mysql_result($sql, $i, "id_cidade"); 	  $descricao = mysql_result($sql, $i, "dsc_cidade");      $xml .= "<cidade>\n";           $xml .= "<codigo>".$codigo."</codigo>\n";                        $xml .= "<descricao>".$descricao."</descricao>\n";               $xml .= "</cidade>\n";       }//FECHA FOR                       $xml.= "</cidades>\n";      //CABEÇALHO   Header("Content-type: application/xml; charset=iso-8859-1"); }//FECHA IF (row)                                               //PRINTA O RESULTADO  echo $xml;            ?>

[Gizelda 0]

Estou com o mesmo problema. Sei que o topico é antigo mas, Alguem pode dar uma solução ? Quero dizer.. É possível alterar esse código para escrever em textfield ao invés de combobox? Qual método devo utilizar para fazer a escrita assíncrona ?

 

Obs: No meu caso o select retorna apenas uma linha de resultado. Linha essa que quero escrever no textfield.

[Gizelda 0]

A função php:

(Acredito que esteja tudo Ok, exceto na parte do apelido da tabela que eu não se se devo colocar na tag)

<?php

if (file_exists('init.php'))
{
	require_once 'init.php';
}
else
{
	exit('Não foi possível encontrar o arquivo de inicialização');
}


$acao = isset($_GET['acao']) ? $_GET['acao'] : FALSE;

header('Content-Type: application/xml');

$xml = "<?xml version='1.0' encoding='iso-8859-1'?>\r\n";


switch ($acao)
{
	case 'buscaMatricula':
	    buscaMatricula();
	    break;
}

function buscaMatricula()
{
	$cpf = isset($_GET['cpf']) ? (int)$_GET['cpf'] : 1;
	
	global $xml;
	
	$xml .= '<tb_funcionario';
	
	$MySQLi = new MySQLi(BD_SERVIDOR, BD_USUARIO, BD_SENHA, BD_NOME);
	
	$sql = $MySQLi->query('Select f.nr_matricula From tb_funcionario f, tb_pessoa p Where p.cd_pessoa = f.fk_pessoa_funcionario_01 AND p.nr_cpf = ' . $cpf . '');
	
	$xml .= '<funcionario>';
	$xml .= '<mat>' . $nr_matricula . '</mat>';
	$xml .= '</funcionario>';
		
	$sql->close();
	$MySQLi->close();
	
	$xml .= '</tb_funcionario>';
	echo $xml;
}

?>

função Jscript (AJAX)

(Essa função recebe o parâmetro cpf mas não muda o valor do textfield do form)

function buscaMatricula(cpfm)
{		
	var cpf = soNumeros(cpfm);

	var url = 'funcoes5.php?acao=buscaMatricula&cpf=' + cpf;
	var ajax = openAjax();
	
	ajax.open('GET', url, true);
	ajax.onreadystatechange = function()
	{
		if (ajax.readyState == 4)
		{
			if (ajax.status == 200)
			{
				
				var xml = ajax.responseXML;
				var funcionario = xml.getElementsByTagName('funcionario');

				var nrMatricula = funcionario.getElementsByTagName('mat')[0].firstChild.nodeValue;

				document.capacitacao.matricula.value = nrMatricula;
				
				}
			}
		}
	}
	ajax.send(null);
}

E no formulário está assim:

<td><div align="left"><span class="label">Cpf:</span></div></td>
            <td><div align="left"><span class="label">
                <input name="txtCPF" id="txtCPF" type="text" size="15" maxlength="14" onchange="buscaMatricula(this.value)" />
            </span></div></td>
            <td colspan="2"> </td>
            <td colspan="4"> </td>
          </tr>
          <tr>
            <td><div align="left"><span class="label">Matricula:</span></div></td>
            <td><div align="left"><span class="label">
                <input name="matricula" id="matricula" type="text" size="16" maxlength="15" value="" />
            </span></div></td>
            <td colspan="2"> </td>

Acredito que a falha esteja no código jscript após o ajax dizer que está Ok.

[Gizelda 0]

Já consegui, ficou assim:

function buscaMatricula(cpfm)
{	
	if(cpfm != "")
	{
	var cpf = soNumeros(cpfm)
	var url = 'funcoes5.php?acao=buscaMatricula&cpf=' + cpf;
	var ajax = openAjax();
	
	ajax.open('GET', url, true);
	
	ajax.onreadystatechange = function()
	{
		if	(ajax.readyState == 1) // carregando
		{
			document.capacitacao.matricula.value = " Carregando ... ";
		}
		if (ajax.readyState == 4) // concluído
		{
			document.capacitacao.matricula.value = " Carregando ..";
			if (ajax.status == 200)
			{
				document.capacitacao.matricula.value = '';
				
				
				var xml = ajax.responseXML;
				var estado = xml.getElementsByTagName('estado');
				
				for (var i = 0; i < estado.length; i++)
				{
					var idEstado = estado[i].getElementsByTagName('id')[0].firstChild.nodeValue;
					alert(idEstado);

				}
				
			}
		}
	}
	}
    ajax.send(null);
}