JSFiddle - React, Tailwind, and code Playground

by Renilson Meneguci

HTML

<div class="well"><form class="form row" action="checkout-sample" method="POST">
<div class="form-group col-sm-2"><label>CEP</label><input id="cep" class="form-control" name="cep" type="text"></div>
<div class="form-group col-sm-2"><label>Estado</label><input id="estado" class="form-control" name="estado" type="text"></div>
<div class="form-group col-sm-3"><label>Cidade</label><input id="cidade" class="form-control" name="cidade" type="text"></div>
<div class="form-group col-sm-2"><label>Bairro</label><input id="bairro" class="form-control" name="bairro" type="text"></div>
<div class="form-group col-sm-3"><label>Endereço</label><input id="endereco" class="form-control" name="endereco" type="text"></div>
</form>

</div>

JavaScript

jQuery(function($){
   $("input#cep").change(function(){
      var cep_code = $(this).val();
      if( cep_code.length <= 0 ) return;
      alert("Enviando consulta do CEP "+cep_code);
      $.get("http://apps.widenet.com.br/busca-cep/api/cep.json", { code: cep_code },
         function(result){
            if( result.status!=1 ){
               alert(result.message || "Houve um erro desconhecido");
               return;
            }
            $("input#cep").val( result.code );
            $("input#estado").val( result.state );
            $("input#cidade").val( result.city );
            $("input#bairro").val( result.district );
            $("input#endereco").val( result.address );
            $("input#estado").val( result.state );
            //alert("Dados recebidos e alterados");
         });
   });
});