Distribuindo valores recebidos de uma consulta com Ajax

[andreia_sp 1]

Montei um exemplo simples de como fazer para distribuir os dados vindo do Ajax aos campos existentes no formulário.

Aqui não explicarei como é feita a parte do Ajax pois no fórum já tem bastante exemplos. Estou partindo do ponto em que vocês recebem os dados do Ajax.

 

Observações:

1) o retorno do ajax tem que vir em uma estrutura similar a um array. Como fazer isso? Lá na página onde voces fazem a busca no banco de dados tem o resultado da pesquisa certo? É só imprimir o resultado com as separações para a função javascript saber dividí-las.

 

2) Como é um exemplo, coloquei fixo a variavel Retorno, mas ela deve vir do Ajax. Exemplo:

SetaCampos(xmlHttp.responseText);

3) Os campos que devem receber valores precisam conter um ID igual, como no exemplo "grupo".

 

4) O array de retorno deve estar na ordem de exibição dos campos, exemplo: "primeiro_valor|segundo_valor|terceiro_valor". Ou seja, a ordem em que os campos do grupo estao sendo exibidos.

 

Sugestão:

O exemplo usa o ID para apontar quais campos receberão valores. Isso quando a aplicação recebe campos no meio que não receberam - como no exemplo o campo 3. Uma sugestao para quando voces nao tiverem esta situação, é envolver todos os campos dentro de uma DIV.

 

Exemplo de aplicação:

Para voces terem ideia aonde isso pode ser aplicado, imaginem aquelas buscas de endereço onde digita-se o CEP e retornam os dados (Endereço, número, cidade, estado) e cada campo receba seu valor.

 

Navegadores:

Testado e funcionando no IE 7 e Firefox 2.0.0.14

 

Código:

<script language="JavaScript">
   function SetaCampos(Retorno) {
   var frm = document.frm.grupo;
   var TotalElementos = frm.length;
   var ArrayRetorno = Retorno.split("|");
   
	   for (var i=0; i < TotalElementos; i++)
	   {
			   frm[i].value = ArrayRetorno[i];
	   }
   }
   </script>
   
   <form name="frm">
   Campo1:<input type="text" name="campo1" id="grupo">
   
   Campo2:<input type="text" name="campo2" id="grupo">
   
   Campo3:<input type="text" name="campo3">
   
   Campo4:<input type="text" name="campo4" id="grupo">
   
   Campo5:<input type="text" name="campo5" id="grupo">
   
   <input type="button" value="Buscar" onclick="SetaCampos('valor1|valor2|valor3|valor4')">
   </form>

Qualquer dúvida, crítica, elogio ou sugestão.... só postar ;)

[nknk 3]

Uso também está função split para distribuir dois valores, em dois códigos, mas se alguém colocar no formulário este caractere |, o que acontece?

[andreia_sp 1]

nao entendi sua duvida, pq pode-se colocar o | em qq parte do formulario.. isso nao vai interferir pq a função soh é acionada com a chamada e os parametros diretamente enviada.

[nknk 3]

Eu pensei que o | era usado para fazer o split.

[brcontainer 16]

Andreia só uma pergunta por que não usou elementos de captura DOM

tipo document.getElementById?

 

e tipo outra coisa o que entendi é que você está usando o atributo ID="" como uma "condicional" assim somente os campos com esta ID receberão os valores, estou certo?

 

Bem não querendo discordar do seu código mas o uso repetido de ID é errado, seria bom se você usa-se:

 

document.getElementById("frm").getElementsByTagName("input")

usa-se ID no form

<form id="frm">

e atribuisse classes aos elementos INPUTs

Campo1:<input type="text" name="campo1" class="grupo">  
   Campo2:<input type="text" name="campo2" class="grupo">
   Campo3:<input type="text" name="campo3">
   Campo4:<input type="text" name="campo4" class="grupo">
   Campo5:<input type="text" name="campo5" class="grupo">

ae usaria as classes como condicionais

for (var i=0; i < TotalElementos; i++)
	   {
	if(frm[i].className=="grupo" || frm[i].getAttribute("class")=="grupo"){
			   frm[i].value = ArrayRetorno[cont++];
	}
	   }

 

resultado final:

<script language="JavaScript">
function SetaCampos(Retorno) {
   var frm = document.getElementById("frm").getElementsByTagName("input");
   var TotalElementos = frm.length;
   var ArrayRetorno = Retorno.split("|");
   var cont = 0;
  
for (var i=0; i < TotalElementos; i++)
{
	if(frm[i].className=="grupo" || frm[i].getAttribute("class")=="grupo"){
			   frm[i].value = ArrayRetorno[cont++];
	}
}
}
</script>

   <form id="frm">
   Campo1:<input type="text" name="campo1" class="grupo">  
   Campo2:<input type="text" name="campo2" class="grupo">
   Campo3:<input type="text" name="campo3">
   Campo4:<input type="text" name="campo4" class="grupo">
   Campo5:<input type="text" name="campo5" class="grupo">
  
   <input type="button" value="Buscar" onclick="SetaCampos('valor1|valor2|valor3|valor4')">
   </form>

bem espero que eu tenha ajudado

 

falow abraços ;)