Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

felipe-maciel

Ajax+Php

Por , em Javascript

Recommended Posts

felipe-maciel    0

felipe-maciel
Postado

To com um probleminha em AJAX aqui é coisa FACIL pra quem entende do assunto já pra mim não achei nada parecido.

 

Tenho um sistema em PHP que o cara escolhe estado e lista a cidades embaixo, porém meu problema é o seguinte:

 

Se na pagina que tem este Formulario de cidade eu tiver um outro Formulario a hora que eu seleciono o estado ele não carrega as cidades.

 

abaixo um exemplo:

 

<?
$sqlcad = "		  
		SELECT a.id, a.nome, a.uf 
		FROM tb_estados a		  
		ORDER BY a.nome"; 
$sqlcad = mysql_query($sqlcad);	   
$row = mysql_num_rows($sqlcad); 
?>
<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;
			}
		 }
	  }

	  if(ajax) {

		 document.forms[0].cidade.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() {

			if(ajax.readyState == 1) {
			   idOpcao.innerHTML = "carregando...";   
			}

			if(ajax.readyState == 4 ) {
			   if(ajax.responseXML) {
				  processXML(ajax.responseXML);
			   }
			   else {

				   idOpcao.innerHTML = "selecione o estado";
			   }
			}
		 }

		 var params = "estado="+valor;
		 ajax.send(params);
	  }
   }
   
   function processXML(obj){

	  var dataArray   = obj.getElementsByTagName("cidade");
	  

	  if(dataArray.length > 0) {

		 for(var i = 0; i < dataArray.length; i++) {
			var item = dataArray[i];

			var codigo	=  item.getElementsByTagName("codigo")[0].firstChild.nodeValue;
			var descricao =  item.getElementsByTagName("descricao")[0].firstChild.nodeValue;
			
			idOpcao.innerHTML = "selecione a cidade";
			

			var novo = document.createElement("option");

				novo.setAttribute("id", "opcoes");

				novo.value = descricao;

				novo.text  = descricao;

				document.forms[0].cidade.options.add(novo);
		 }
	  }
	  else {

		idOpcao.innerHTML = "primeiro selecione o estado";
	  }	  
   }

</script>  
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#dddddd" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="33%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr> 
	<td valign="top"> </td>
  </tr>
  <tr> 
	<td valign="top" class="TextoPrinc"> </td>
  </tr>
  <tr> 
	<td class="TextoPrinc"><div align="center"> 
		<form action="texto.php" method="post" name="vcpadrao" id="vcpadrao">
		  <table width="100%" border="0" cellspacing="7" cellpadding="0" class="TextoPrinc">
			<tr> 
			  <td colspan="2" class="MsgErro"><div align="center"></div></td>
			</tr>
			<tr> 
			  <td width="45%"><div align="right">Texto: </div>
				<div align="center"> </div></td>
			  <td width="55%"><input name="cpadrao" type="text" id="cpadrao" class="Form2"></td>
			</tr>
			<tr> 
			  <td colspan="2"><div align="center"> 
				  <input type="submit" name="Submit22" value="-ok-">
				</div></td>
			</tr>
		  </table>
		</form>
	  </div></td>
  </tr>
  <tr> 
	<td class="TextoPrinc"><div align="center"> 
		<form action="cadastro.php" method="post" name="cadastro" id="cadastro">
		  <table width="436" border="0" cellspacing="7" cellpadding="0" class="TextoPrinc">
			<tr> 
			  <td colspan="2" class="MsgErro"><div align="center"> </div></td>
			</tr>
			<tr> 
			  <td width="108"><div align="right"> Estado:</div></td>
			  <td width="307"> <select name="estado" onChange="Dados(this.value);" class="Formulario">
				  <option value="0" selected>selecione o estado</option>
				  <? for($i=0; $i<$row; $i++) { ?>
				  <option value="<? echo mysql_result($sqlcad, $i, "id"); ?>"> 
				  <? echo mysql_result($sqlcad, $i, "nome"); ?></option>
				  <? } ?>
				</select></td>
			</tr>
			<tr> 
			  <td><div align="right"> Cidade:</div></td>
			  <td> <select name="cidade" class="Formulario" id="cidade">
				  <option id="opcoes" value="0">primeiro selecione o estado</option>
				</select></td>
			</tr>
			<tr> 
			  <td colspan="2"><div align="center"> </div></td>
			</tr>
			<tr> 
			  <td colspan="2"><div align="center"> 
				  <input type="submit" name="Submit2" value="-ok-">
				</div></td>
			</tr>
			<tr> 
			  <td colspan="2"> </td>
			</tr>
			<tr> 
			  <td colspan="2"><div align="center"></div></td>
			</tr>
		  </table>
		</form>
	  </div></td>
  </tr>
</table>
</body>
</html>

 

Lembrando o codigo ta correto só que se tiver mais de uma TAG <form> na pagina o codigo não funciona, a não ser que o <form> referente ao estado e cidades seja o 1 form da ppagina Html.

 

 

Desde já agradeco.

Compartilhar este post

Link para o post
Compartilhar em outros sites

eibon    2

eibon
Postado

Tópico movido

 

Origem: Programação » PHP

Destino: Desenvolvimento » Javascript / DHTML

Não é com o ajax e sim com JavaScript básico.

 

document.forms[0]

Faz uma referência ao primeiro form da página.Existem várias maneiras de resolver o seu problema,uma simples seria pegar os elementos por nome/id,ou pegar o form por nome/id e acessar os elementos do mesmo como feito acima.

 

 

Exemplo:

 

Troque:

document.forms[0].cidade.options.length = 1;

Por:

document.getElementsByName("cidade")[0].options.length = 1;

Dependendo,outros problemas podem ser criados (pega o primeiro elemento de nome cidade da página....).

Sugiro que estude HTML e JavaScript/DOM.

Abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito