Pessoal, no link abaixo:
http://nutrirmais.com.br/loja2/clientes_cad.php
Tenho um formulário de cadastro de clientes.
Nesse formulário, tenho uma combobox (select option) para os estados brasileiros e outra combo para listar as cidades brasileiras.
Acontece que quando champo a função DadosCidade de dentro da Select dos Estados, dá erro e nem o navegador me informa esse erro.
No formulário esta assim:
Código (HTML):
Podem me ajudar?
Eis o arquivo php que faz a leitura. (Obs: O php esta fazendo a leitura corretamente).
Código (PHP):
E o ajax
Código (Javascript):
Obrigado!
http://nutrirmais.com.br/loja2/clientes_cad.php
Tenho um formulário de cadastro de clientes.
Nesse formulário, tenho uma combobox (select option) para os estados brasileiros e outra combo para listar as cidades brasileiras.
Acontece que quando champo a função DadosCidade de dentro da Select dos Estados, dá erro e nem o navegador me informa esse erro.
No formulário esta assim:
Código (HTML):
<label id="label_estado_cad_clientes" for="estado_cad_clientes">Estado :</label>
<?php
$estados_regiao_string =
"select sigla, nome from estados where regiao=".$_SESSION["id_regioes"]." order by nome";
$estados_regiao_query= $conexao->query($estados_regiao_string);
?>
<select name="estado_cad_clientes" id="estado_cad_clientes" onchange="DadosCidade(this.value,this.form.name,'cidade_cad_clientes');" size="1" style="width:200px">
<option value='#'>Escolha o estado</option>
<?php
while(list($sigla, $nome)=$estados_regiao_query->fetch_row())
{
echo "<option value='$sigla'>$nome</option>";
}
?>
</select> <br />
<label id="label_cidade_cad_clientes" for="cidade_cad_clientes">Cidade :</label>
<select name="cidade_cad_clientes" id="cidade_cad_clientes" size="1" style="width:200px">
<option id="opcoescidade" value="#">Primeiro selecione o estado!</option>
</select>
Observação: Os estados retornam normalmente.<?php
$estados_regiao_string =
"select sigla, nome from estados where regiao=".$_SESSION["id_regioes"]." order by nome";
$estados_regiao_query= $conexao->query($estados_regiao_string);
?>
<select name="estado_cad_clientes" id="estado_cad_clientes" onchange="DadosCidade(this.value,this.form.name,'cidade_cad_clientes');" size="1" style="width:200px">
<option value='#'>Escolha o estado</option>
<?php
while(list($sigla, $nome)=$estados_regiao_query->fetch_row())
{
echo "<option value='$sigla'>$nome</option>";
}
?>
</select> <br />
<label id="label_cidade_cad_clientes" for="cidade_cad_clientes">Cidade :</label>
<select name="cidade_cad_clientes" id="cidade_cad_clientes" size="1" style="width:200px">
<option id="opcoescidade" value="#">Primeiro selecione o estado!</option>
</select>
Podem me ajudar?
Eis o arquivo php que faz a leitura. (Obs: O php esta fazendo a leitura corretamente).
Código (PHP):
<?php
include("../config/conexao.php");
$sql_string = "SELECT id, nome FROM cidades WHERE estado = '".$_POST["estado"]."' ORDER BY nome";
$sql_query = $conexao->query($sql_string);
$row = $sql_query->num_rows;
//VERIFICA SE VOLTOU ALGO
if($row)
{
//XML
$xml = "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n";
$xml .= "<cidades>\n";
//PERCORRE ARRAY
while(list($codigo, $descricao)=$sql_query->fetch_row())
{
$xml .= "<cidade>\n";
$xml .= "<codigo>".$codigo."</codigo>\n";
$xml .= "<descricao>".$descricao."</descricao>\n";
$xml .= "</cidade>\n";
}
$xml.= "</cidades>\n";
}
header("Content-type: application/xml; charset=utf-8");
echo $xml;
?>
include("../config/conexao.php");
$sql_string = "SELECT id, nome FROM cidades WHERE estado = '".$_POST["estado"]."' ORDER BY nome";
$sql_query = $conexao->query($sql_string);
$row = $sql_query->num_rows;
//VERIFICA SE VOLTOU ALGO
if($row)
{
//XML
$xml = "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n";
$xml .= "<cidades>\n";
//PERCORRE ARRAY
while(list($codigo, $descricao)=$sql_query->fetch_row())
{
$xml .= "<cidade>\n";
$xml .= "<codigo>".$codigo."</codigo>\n";
$xml .= "<descricao>".$descricao."</descricao>\n";
$xml .= "</cidade>\n";
}
$xml.= "</cidades>\n";
}
header("Content-type: application/xml; charset=utf-8");
echo $xml;
?>
E o ajax
Código (Javascript):
function DadosCidade(valor,form_get, campo) {
//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.getElementById(campo).options.length =1;
idOpcao = document.getElementById("opcoescidade");
ajax.open("POST", "global/funcoes_php/buscacidade.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 processXMLCidades que vai varrer os dados
if(ajax.readyState == 4 ) {
if(ajax.responseXML) {
processXMLCidades(ajax.responseXML,form_get, campo);
}
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 processXMLCidades(obj,form_get, campo){
//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", "opcoescidade");
//atribui um valor
novo.value = codigo;
//atribui um texto
novo.text = descricao;
//finalmente adiciona o novo elemento
document.getElementById(campo).options.add(novo);
}
}
else {
//caso o XML volte vazio, printa a mensagem abaixo
idOpcao.innerHTML = "Primeiro selecione o estado>>";
}
}
//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.getElementById(campo).options.length =1;
idOpcao = document.getElementById("opcoescidade");
ajax.open("POST", "global/funcoes_php/buscacidade.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 processXMLCidades que vai varrer os dados
if(ajax.readyState == 4 ) {
if(ajax.responseXML) {
processXMLCidades(ajax.responseXML,form_get, campo);
}
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 processXMLCidades(obj,form_get, campo){
//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", "opcoescidade");
//atribui um valor
novo.value = codigo;
//atribui um texto
novo.text = descricao;
//finalmente adiciona o novo elemento
document.getElementById(campo).options.add(novo);
}
}
else {
//caso o XML volte vazio, printa a mensagem abaixo
idOpcao.innerHTML = "Primeiro selecione o estado>>";
}
}
Obrigado!