Ajax, Javascript and PHP form

Question

Ajax, Javascript and PHP form

Navigation

#1 by (0 votes)

0

How can I make a form with a UF field and a selection field with cities label that will be filled through AJAX and that when selecting the UF the function JS makes the connection with the server and returns the cities of that UF but without search the database? I was oriented to do with a switch-case structure or something similar that returns values from a key value, but I have no idea how this works. I just have an idea how to do it using the database.

NOTE: I have decided to do the same database, because I think it is more practical.

I've already done the form:

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

And I also did the bank, which would look something like this:

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;

Now, I'm finalizing PHP.

php sql javascript ajax

asked by anonymous 27.02.2017 / 15:44

1 answer

How do I read and store the response data from an API? I'm continuing a "form" of a website, using JS HTML PHP

score 0 · Accepted Answer

Jamile will a use of an API with states and cities help you? I do not know if it would solve but here is what I was thinking, this way you would have the option of city and states without having to do a select in the bank and not even have those values saved in them

//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><formname="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>