Streaming live at 10am (PST)

Form with selector field - Cities and States


#1

Hello guys,

I’m have been trying to create a form with cities and states but these items need to be selected and not written. I tried to embed the code (javascript) and the json in the custom code option but is not really working here, because when i put the code in the custom option he is showing the code in the head.

here is some of codes that i’m trying to use on the form:
Html + Javascript and Json (with the cities and states)

Another code:

    //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);
});

With:

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

Somebody did something like that? Form with cities and states? I really need some help with that =/

Thanks a lot!


#2

I created one code that works good on my html test, but in the webflow i got this msg “Custom Code cannot exceed 10000 characters” There is some way to improve my code? maybe with GTM?


#3

My code is working now but only in the URL “webflow.io”, in the “.com” is not getting the data, i think is some bug from the Webflow. Any idea?


#4

Nice! there is no support in this tools, thanks Webflow! :slight_smile:


#5

Welcome to the Webflow forum!

Could you please edit and provide ALL the necessary details in your post so we can take a look at your site/issue?

In future if you want faster replies and more accurate answers, I suggest including all the details listed in the link above upfront before someone has to ask.

If you require urgent assistance, you can also hire me here.

Hope to hear from you soon. Thanks!


#6

Dear @Dk_SEO,

Thank you for reaching out. The Webflow team is dedicated to helping all of you incredible designers in any way they possibly can.

Forum Usage

Everyone is welcome to ask for our help on the forum, where the community can help one another and share tips and experiences with using Webflow. There is also a Freelance category if your design or custom code issues are broad or urgent in nature, and would be more suited for a professional Designer or Developer to assist you with.

Email Support

With Priority Support, the Webflow team prioritizes email support requests for account, billing, or technical related that come from those with Professional or Team plans ahead of those from Starter plan or free accounts. But if there is ever a bug, please do post in the Bugs category and tag @waldo and/or @cyberdave and they will do everything to address the bug as soon as possible and resolve that issue to make sure that you’re able to continue using Webflow as normal. If you are unable to post it in the forum for any reason, you can also email Webflow support at support@webflow.com and they will look into it during office hours.

Statement of Support

Please also note that Webflow staff are limited to what they are allowed to support via email and forums. Due to the highly variable nature of design or custom code related issues (including external plugins) that can occur in the Webflow Designer, they fall outside of Webflow’s statement of support as they can be resolved by making design changes to a site or removing/editing custom code in a site. The Webflow’s statement of support describes the kind of issues the Webflow team can help you with from the support desk.

Thank you for your understanding.

Sam


Disclaimer: I’m NOT Webflow staff, just a normal guy like you