0

Como posso fazer um formulário com um campo UF e um campo de seleção com label Cidades que será preenchido através de AJAX e que ao selecionar a UF a função JS faz a conexão com o servidor e retorna as cidades daquela UF, mas sem pesquisa no Banco de Dados? Fui orientada a fazer com uma estrutura switch-case ou algo semelhante que retorne valores a partir de um valor chave, mas não faço ideia de como isso funciona. Só tenho uma ideia de como fazer utilizando o banco de dados.

OBS: Resolvi fazer com o banco de dados mesmo, por achar que é mais prático.

Já fiz o formulário:

<form name="formCadastro" action="buscaCidade.php" method="post">

    <label>Nome</label>
    <input type="text" name="name" placeholder="Digite seu nome" required>  

    <label>E-mail</label>
    <input type="email" name="email" placeholder="Digite seu email">    

    <label>UF</label>
    <select name="uf">
    </select>

    <label>Cidade</label>
    <select name="cidade">

        <!--INSERIR AQUI AS OPÇÕES DE CIDADE-->

    </select>

    <input type="submit" name="submit" value="Enviar">


</form>

E também fiz o banco, que seria algo mais ou menos assim:

DROP TABLE IF EXISTS `cidades`;
DROP TABLE IF EXISTS `estados`;


CREATE TABLE `cidades` (
  `estados_cod_estados` int(11) DEFAULT NULL,
  `cod_cidades` int(11) DEFAULT NULL,
  `nome` varchar(72) COLLATE utf8_unicode_ci DEFAULT NULL,
  `cep` varchar(8) COLLATE utf8_unicode_ci DEFAULT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;


CREATE TABLE `estados` (
  `cod_estados` int(11) DEFAULT NULL,
  `sigla` varchar(2) COLLATE utf8_unicode_ci DEFAULT NULL,
  `nome` varchar(72) COLLATE utf8_unicode_ci DEFAULT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Agora, estou finalizando o PHP.

2
  • O que você ja fez? Commented 27/02/2017 às 15:37
  • Fiz o HTML, o BD e agora estou finalizando o PHP. Commented 27/02/2017 às 16:42

1 Resposta 1

0

Jamile será que um uso de uma API com os estados e cidades iria te ajudar? não sei se iria resolver mas aqui está o que estava pensando, desse jeito você iria ter a opção de cidade e estados sem precisar fazer um select no banco e nem mesmo ter esses valores guardado neles

//jquery var do select dos estados
var $selectUf = $("#selectUf"); 

//jquery var do select das cidades
var $selectCidades = $("#selectCidade");

//será atribuido um valor nessa variável sempre que ele escolher um UF
var estadoSelecionado; 
var cidadeSelecionada;

//uma função que pega os estados da API e o parametro dela recebe uma função que lida com essa resposta
var getEstados = function(responseFunction){  
  $.ajax({
    method: "GET",
    url: "http://api.londrinaweb.com.br/PUC/Estados/BR/0/10000",
    contentType: "application/json; charset=utf-8",
    dataType: "jsonp",
    async:false,
    success: responseFunction
  });
}

//mesma ideia da função de cima porém nessa pegaremos a cidade de acordoo com a UF escolhida
var getCidades = function(estadoSelecionado,responseFunction){
  $.ajax({
    method: "GET",
    url: "http://api.londrinaweb.com.br/PUC/Cidades/"+estadoSelecionado+"/BR/0/10000",
    dataType: "jsonp",
    success: responseFunction
  });
}

//função que lida com a resposta da api e lista os estados no select
var populandoSelectUf = function(response) {
  $.each(response,function(i,item){
    $selectUf.append('<option value="'+item.UF+'"> '+item.UF+' </option>');
  })
}

//essa função só é chamada quando escolhe algum estado da UF
var populandoSelectCidades = function(response){
  //limpando o html do select
  $selectCidades.html("");
  $.each(response,function(i,item){
    $selectCidades.append('<option value="'+item+'">'+item+'</option>')
  });
}

getEstados(populandoSelectUf);

//sempre quando escolher uma UF coloca o valor selecionado na variavel estado selecionado
//e depois disso lista as cidades correspodente a UF Escolhida
$selectUf.change(function(){
  estadoSelecionado = $(this).val();
  alert("voce selecionou: "+estadoSelecionado);
  getCidades(estadoSelecionado,populandoSelectCidades);
});

$selectCidades.change(function(){
  cidadeSelecionada = $(this).val();
  alert("voce selecionou: "+cidadeSelecionada);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="formCadastro" action="buscaCidade.php" method="post">

  <label>Nome</label>
  <input type="text" name="name" placeholder="Digite seu nome" required>

  <label>E-mail</label>
  <input type="email" name="email" placeholder="Digite seu email">

  <label>UF</label>
  <select name="uf" id="selectUf">
  <option selected="true" disabled>UF</option>
  </select>

  <label>Cidade</label>
  <select name="cidade" id="selectCidade">

    <!--INSERIR AQUI AS OPÇÕES DE CIDADE-->

  </select>

  <input type="submit" name="submit" value="Enviar">


</form>

3
  • Reynnan, até ajudaria e eu agradeço muito sua gentileza em me ajudar. Mas eu tenho especificidades a seguir, são elas: Um campo de seleção com label Cidade que será preenchido através de AJAX com, pelo menos, 5 cidades de cada UF. Ao selecionar a UF a função JS faz a conexão com o servidor e retorna as cidades daquela UF. Não é necessário fazer pesquisa a banco de dados, pode utilizar uma estrutura switch-case ou algo semelhante que retorne valores a partir de um valor chave. Um botão do tipo button com value "Exibir". No onclick, exibir um alert com a mensagem mostrando a UF e a cidade. Commented 27/02/2017 às 18:48
  • @JamileLima então você poderia fazer algo tipo a resposta de um JSON como na API, ao selecionar a UF, vc daria um $.get para a url desejada enviando o valor da UF escolhida assim nessa url vc verificava qual a uf escolhida if $_GET['uf'] == "SE" echo "Aracaju, Itabaiana..." e com a resposta dessa URL você listaria as cidades da UF escolhida, desculpa se ficou um pouco atrapalhada essa comentário mas basicamente iria trabalhar bem parecido como a API. Commented 27/02/2017 às 18:58
  • Obrigada pela ajuda, Reynnan! Vou tentar aqui! Commented 27/02/2017 às 20:05

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .