Ajuda com Combobox Estado/Cidade/Bairro/Ramo

Myrhay · Fevereiro 11, 2017

Boa tarde Gente, estou com dificuldade com esse combobox, tenho que selecionar o Estado, depois seleciono a cidade, depois o bairro e por ultimo o Segmento

Segue o código que uso

index.php

<?php

if (file_exists('init.php'))
{
	require_once 'init.php';
}
else
{
	exit('N�o foi poss�vel encontrar o arquivo de inicializa��o');
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript" src="funcoes.js"></script>
<title>Cidades | Estados</title>
</head>
<body onload="buscaEstados()">

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

    <select name="uf" id="uf" onchange="buscaCidades(this.value)">
    </select>


    <select name="cidade" id="cidade" >
      <option value="">Selecione a Cidade</option>
    </select>
    
     <select name="bairro" id="bairro" >
      <option value="">Selecione o bairro</option>
    </select>
  
  	<select name="ramo" id="ramo" >
      <option value="">Selecione o ramo</option>
    </select>

</form>

</body>
</html>

funcoes.php

<?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 'buscaEstados':
	    buscaEstados();
	    break;
	case 'buscaCidades':
	    buscaCidades();
	    break;
    case 'buscaBairro':
	    buscaBairro();
	    break;
}


function buscaEstados()
{
	global $xml;
	
	$xml .= '<estados>';
	
	$MySQLi = new MySQLi(BD_SERVIDOR, BD_USUARIO, BD_SENHA, BD_NOME);
	
	$sql = $MySQLi->query('Select * From estados Order By nome ASC');
	
	while ($f = $sql->fetch_object())
	{
		$xml .= '  <estado>';
		$xml .= '    <id>' . $f->id . '</id>';
		$xml .= '    <sigla>' . $f->sigla . '</sigla>';
		$xml .= '    <nome>' . $f->nome . '</nome>';
		$xml .= '  </estado>';
	}
	
	$sql->close();
	$MySQLi->close();
	
	$xml .= '</estados>';
	echo $xml;
}



function buscaCidades()
{
	$uf = isset($_GET['uf']) ? (int)$_GET['uf'] : 1;
	
	global $xml;
	
	$xml .= '<cidades>';
	
	$MySQLi = new MySQLi(BD_SERVIDOR, BD_USUARIO, BD_SENHA, BD_NOME);
	
	$sql = $MySQLi->query('Select id, nome From cidades Where id_uf = ' . $uf . ' Order By nome ASC');
	
	while ($f = $sql->fetch_object())
	{
		$xml .= '  <cidade>';
		$xml .= '    <id>' . $f->id . '</id>';
		$xml .= '    <nome>' . $f->nome . '</nome>';
		$xml .= '  </cidade>';
	}
	
	$sql->close();
	$MySQLi->close();
	
	$xml .= '</cidades>';
	echo $xml;
}



function buscaBairro()
{
	$cidade = isset($_GET['cidade']) ? (int)$_GET['cidade'] : 2;

	global $xml;

	$xml .= '<bairros>';

	$MySQLi = new MySQLi(BD_SERVIDOR, BD_USUARIO, BD_SENHA, BD_NOME);

	$sql = $MySQLi->query('Select * From bairro Where id_cid = ' . $cidade . ' Order By nome ASC');

	while ($f = $sql->fetch_object())
	{
		$xml .= '  <bairro>';
		$xml .= '    <id>' . $f->id . '</id>';
		$xml .= '    <nome>' . $f->nome . '</nome>';
		$xml .= '  </bairro>';
	}

	$sql->close();
	$MySQLi->close();

	$xml .= '</bairros>';
	echo $xml;
}

?>

funcoes.js


function buscaEstados()
{
	var uf = document.getElementById('uf');
	
	var op = document.createElement('option');
    op.setAttribute('value', '');
    op.appendChild(document.createTextNode("Carregando..."));
    uf.appendChild(op);
	
	var ajax = openAjax();
	
	ajax.open('GET', 'funcoes.php?acao=buscaEstados', true);
	
	ajax.onreadystatechange = function()
	{
		if (ajax.readyState == 4)
		{
			if (ajax.status == 200)
			{
				uf.innerHTML = '';
				
				var opcao = document.createElement('option');
				opcao.setAttribute('value', '');
				opcao.appendChild(document.createTextNode('Selecione o Estado'));
				uf.appendChild(opcao);
				
				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;
					var siglaEstado = estado[i].getElementsByTagName('sigla')[0].firstChild.nodeValue;
					var nomeEstado = estado[i].getElementsByTagName('nome')[0].firstChild.nodeValue;
					
					var opcao = document.createElement('option');
					opcao.setAttribute('value', idEstado);
					//opcao.appendChild(document.createTextNode(siglaEstado + ' - ' + nomeEstado));
					opcao.appendChild(document.createTextNode(nomeEstado));
					uf.appendChild(opcao);
					
				}
				
			}
		}
	}
    ajax.send(null);
    
}




function buscaCidades(uf)
{

	var cidades = document.getElementById('cidade');
	cidades.innerHTML = '';
	var op = document.createElement('option');
    op.setAttribute('value', '');
    op.appendChild(document.createTextNode("Carregando..."));
    cidades.appendChild(op);
	
	var url = 'funcoes.php?acao=buscaCidades&uf=' + uf;
	var ajax = openAjax();
	
	ajax.open('GET', url, true);
	ajax.onreadystatechange = function()
	{
		if (ajax.readyState == 4)
		{
			if (ajax.status == 200)
			{
				cidades.innerHTML = '';
				

				
				var xml = ajax.responseXML;
				var cidade = xml.getElementsByTagName('cidade');
				
				for (var i = 0; i < cidade.length; i++)
				{
					var idCidade = cidade[i].getElementsByTagName('id')[0].firstChild.nodeValue;
					var nomeCidade = cidade[i].getElementsByTagName('nome')[0].firstChild.nodeValue;
					
					var opcao = document.createElement('option');
					opcao.setAttribute('value', idCidade);
					opcao.appendChild(document.createTextNode(nomeCidade));
					cidades.appendChild(opcao);
				}
			}
		}
	}
	ajax.send(null);
}



function buscaBairro(cidade)
{

	var bairro = document.getElementById('bairro');
	bairro.innerHTML = '';
	var op = document.createElement('option');
    op.setAttribute('value', '');
    op.appendChild(document.createTextNode("Carregando..."));
    bairro.appendChild(op);

	var url = 'funcoes.php?acao=buscaBairro&cidade=' + cidade;
	var ajax = openAjax();

	ajax.open('GET', url, true);
	ajax.onreadystatechange = function()
	{
		if (ajax.readyState === 4)
		{
			if (ajax.status === 200)
			{
				bairro.innerHTML = '';



				var xml = ajax.responseXML;
				var bairro = xml.getElementsByTagName('bairro');

				for (var i = 0; i < bairro.length; i++)
				{
					var idBairro = bairro[i].getElementsByTagName('id')[0].firstChild.nodeValue;
					var nomeBairro = bairro[i].getElementsByTagName('nome')[0].firstChild.nodeValue;

					var opcao = document.createElement('option');
					opcao.setAttribute('value', idBairro);
					opcao.appendChild(document.createTextNode(nomeBairro));
					bairro.appendChild(opcao);
				}
			}
		}
	}
	ajax.send(null);
}

Se puderem me ajudar agradeço muito.

RodriAndreotti · Fevereiro 11, 2017

Qual seria a dificuldade que você está tendo?

O Que está funcionando e o que não está até o momento?

Myrhay · Fevereiro 11, 2017

No caso

5 horas atrás, RodriAndreotti disse:

Qual seria a dificuldade que você está tendo?

O Que está funcionando e o que não está até o momento?

No caso conseguir fazer até a cidade, quando utilizo para o bairro e ramo já não funciona, não consigo ver se o erro é no codigo.

RodriAndreotti · Fevereiro 13, 2017

Mas qual o erro que ocorre quando você executa?
Tentou debugar no firebug?

Myrhay · Fevereiro 13, 2017

7 horas atrás, RodriAndreotti disse:

Mas qual o erro que ocorre quando você executa?
Tentou debugar no firebug?

Opa boa tarde, depois de muito mexer, verifiquei esse erro

Uncaught TypeError: Cannot set property 'innerHTML' of undefined
at XMLHttpRequest.ajax.onreadystatechange

O que poderia ser?

Segue o código e é justamente no bairro.innerHTML = '';

function buscaBairro(cidade)
{

	var bairro = document.getElementById('bairro');
	bairro.innerHTML = '';
	var op = document.createElement('option');
    op.setAttribute('value', '');
    op.appendChild(document.createTextNode("Carregando..."));
    bairro.appendChild(op);

	var url = 'funcoes.php?acao=buscaBairro&cidade=' + cidade;
	var ajax = openAjax();

	ajax.open('GET', url, true);
	ajax.onreadystatechange = function()
	{
		if (ajax.readyState == 4)
		{
			if (ajax.status == 200)
			{
				bairro.innerHTML = '';
				var xml = ajax.responseXML;
				var bairro = xml.getElementsByTagName('bairro');

				for (var i = 0; i < bairro.length; i++)
				{
					var idBairro = bairro[i].getElementsByTagName('id')[0].firstChild.nodeValue;
					var nomeBairro = bairro[i].getElementsByTagName('nome')[0].firstChild.nodeValue;

					var opcao = document.createElement('option');
					opcao.setAttribute('value', idBairro);
					opcao.appendChild(document.createTextNode(nomeBairro));
					bairro.appendChild(opcao);
				}
			}
		}
	}
	ajax.send(null);
}

RodriAndreotti · Fevereiro 14, 2017

Então... o próprio erro está te dizendo o problema.

Uncaught TypeError: Cannot set property 'innerHTML' of undefined

Ele diz que você está setando a propriedade innerHTML de uma variável que não foi definida ainda.

Observe este trecho:

bairro.innerHTML = '';
var xml = ajax.responseXML;
var bairro = xml.getElementsByTagName('bairro');

Veja que você seta o innerHTML do bairro antes de declarar a variável bairro, então você está tentando acessar uma variável que ainda não existe.

Alaerte Gabriel · Fevereiro 14, 2017

Seu problema não é com PHP. Vou mover para área correta. Ainda na oportunidade, vide os tópicos:

ATENÇÃO: Orientações e Regras do Fórum de PHP

Arquivado

Ajuda com Combobox Estado/Cidade/Bairro/Ramo

Recommended Posts

Myrhay 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

RodriAndreotti 25

Compartilhar este post

Link para o post

Compartilhar em outros sites

Myrhay 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

RodriAndreotti 25

Compartilhar este post

Link para o post

Compartilhar em outros sites

Myrhay 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

RodriAndreotti 25

Compartilhar este post

Link para o post

Compartilhar em outros sites

Alaerte Gabriel 662

ATENÇÃO: Seu problema é realmente com o PHP ?

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeigniter - Dúvida referente a PDV

PHP+Codeigniter - Dúvida em Relação a Teclas

Conexão mysql com outro domínio

Conteúdo Similar

Fóruns

Tempo Real

Informação importante