Manipular formulário

alexandremanowar · Junho 9, 2008

E ae pessoal beleza

Eu estou estudando ajax, e já fiz uns exemplos bacana usando dropdown e outros teste! Recentemente estudei um totoria e fiz um modelo de dois dropdown básicos que ao clicar no primeiro ele enche o segundo com informação, porém eu gostaria de saber como fazer algo um pouco diferente, por exemplo a idéia que quero aprender é a seguinte: Tenho por exemplo 5 nomes na tela um abaixo do outro, como segue abaixo:

Rio de Janeiro

São Paulo

Minas

Pernanbuco

Cada nome desses acima seria um link, quando clicar em um link desses eu quero que os dados dele apareça abaixo dele empurrando os demais links, por exemplo se eu clicar em São Paulo, ficaria assim:

Rio de Janeiro

São Paulo

....São Paulo

....Itagua

....Poá

....Suzando

Minas

Pernanbuco

E isso acontece o mesmo se eu clicar nos demais e se eu clicar em São Paulo novamente ele retira dos dados. Como falei eu fiz algo parecido com dropdown, mas nesse caso teria que mecher com o layout do form ou seja com Dom(usando css acredito), e claro que os dados que aparecem abaixo do link clicado vem do bando, eu tentei fazer aqui mas ainda não consegui, será alguém pode me ajudar a fazer isso?

Olha o código que fiz com o dropdown:

Essa é a index:

<html>
<head>
<script language="javascript" src="VerificaBrownser.js"></script>
<script language="javascript" src="funcao.js"></script>
</head>
<body>
<?
	include "conecta.php";
	$busca = mysql_query("select * from estados order by DSC_ESTADO");
	$linha = mysql_num_rows($busca);
?>

 <h1>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<$linha; $i++)
			{ 
				$reg = mysql_fetch_row($busca);
			?>
			   <option value="<? echo $reg[0] ?>"><? echo $reg[1]; ?></option>
			<? } ?>
		 </select>
	  
		 <br><br>
		 Cidade: 
		 <select name="listCidades">
			<option id="opcoes" value="0">--Primeiro selecione o estado--</option>
		 </select>
	  </form>

</body>
</html>

Esses são os dois arquivos js que fiz:

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;
			}
		 }
	  }

function Dados(valor) 
{ 
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--";
	  }	  
 }

Esse é o código em php que consulta o banco:

<?
include "conecta.php";		 

			
$estado = $_POST["estado"];		   

//QUERY  
$resultado = mysql_query("select * from cidades where COD_ESTADO='$estado' order by DSC_CIDADE"); 
$linha = mysql_num_rows($resultado);
if($linha>0) 
{				
   //XML
   $xml  = "<?xml version=\"1.0\" encoding=\"ISO-8859-1\"?>\n";
   $xml .= "<cidades>\n";			   
			 
   for($i=0; $i<$linha; $i++) 
   { 
	  $reg = mysql_fetch_row($resultado);
	  $codigo = $reg[0]; 
	  $descricao = $reg[1];
	  $xml .= "<cidade>\n";	 
	  $xml .= "<codigo>".$codigo."</codigo>\n";				  
	  $xml .= "<descricao>".$descricao."</descricao>\n";		 
	  $xml .= "</cidade>\n";	
   }			   
   
   $xml.= "</cidades>\n";
   
   //CABEÇALHO
   Header("Content-type: application/xml; charset=iso-8859-1"); 
}											   

//PRINTA O RESULTADO  
echo $xml;			
?>

Alguém pode me explicar como fazer?

Valeu

alexandremanowar · Junho 11, 2008

E ae pessoal beleza

Eu fiz algumas pesquisas e teste e consegui fazer, porém ainda estou com um problema! quando eu clico no link os dados vem logo abaixo, porém se eu clicar novamente ele duplica os dados e eu clicar novamente e for clicar ele vai repetindo os dados na tela, eu preciso que funcione da seguinte forma, clicou uma vez no link mostra os dados se clicar novamente esconde os dados, então fica assim todo o tempo um clique mostas os dados outro clique esconde, alguém pode me explicar como fazer isso?

olha como esta o meu código:

<html>
<head>
<script language="javascript" src="VerificaBrownser.js"></script>
<script language="javascript" src="funcao.js"></script>
</head>
<body>
<?
	include "conecta.php";
	$busca = mysql_query("select * from estados order by DSC_ESTADO");
	$linha = mysql_num_rows($busca);
?>

 <h1>AJAX + PHP</h1>
	  Carregando cidades sem dar refresh na página.
	  <br><br>
	  

	<ul name="listCidades" id="lixo">
			<? 
			for($i=0; $i<$linha; $i++)
			{ 
				$reg = mysql_fetch_row($busca);
				
			?>
			  <li id="liEstado_<?=$reg[0]?>"><a href="#" onclick="loadCities('<?=$reg[0]?>')"><? echo $reg[1]; ?></a></li><br>

			<? 
			}
			?>
			
	</ul>

	  
	  

</body>
</html>

function loadCities(valor) 
{ 
if(ajax) 
{
	
	 //Pega o li do estado clicado
	 var liEstado = document.getElementById('liEstado_'+valor);


	 
	ajax.open("POST", "cidades.php", true);
	ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		 
	ajax.onreadystatechange = function() 
	{
	 
		if(ajax.readyState == 1) 
		{
			idOpcao.innerHTML = "Carregando...!";   
		}
		
		if(ajax.readyState == 4 ) 
		{
			if(ajax.responseText) 
			{
			
				 //Acrescenta o retorno nesse li
					liEstado.innerHTML = liEstado.innerHTML + ajax.responseText;

			}
			
		}
	}
		 //passa o código do estado escolhido
		 var params = "estado="+valor;
		 ajax.send(params);
}
}

<?
include "conecta.php";		 

			
$estado = $_POST["estado"]; 

$resultado = mysql_query("select * from cidades where COD_ESTADO='$estado' order by DSC_CIDADE"); 
$linha = mysql_num_rows($resultado);
if($linha>0) 
{				
	$dados = "";			 
   for($i=0; $i<$linha; $i++) 
   { 
	  $reg = mysql_fetch_row($resultado);
	  $codigo = $reg[0]; 
	  $descricao = $reg[1];
						 
	  $dados .= $descricao."<br>";		 
	 }			   
   
   
   
   //CABEÇALHO
   Header("Content-type: application/xml; charset=iso-8859-1"); 
}											   

//PRINTA O RESULTADO  
echo $dados;			
?>

Alguém pode me ajudar? Valeu

Entrar

Arquivado

Manipular formulário

Recommended Posts

alexandremanowar 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

alexandremanowar 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Sound Designer

Orientação - Jav + MySql

Alteracao Tema Wordpress Profolio

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante