Busca de endereço pelo cep

Developer
Size
3,815 Kb
Views
14,168

How do I make an busca de endereço pelo cep?

What is a busca de endereço pelo cep? How do you make a busca de endereço pelo cep? This script and codes were developed by Clayton on 04 November 2022, Friday.

Busca de endereço pelo cep Previews

Busca de endereço pelo cep - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Busca de endereço pelo cep</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body>
    <h1>Obrigado por comprar em nossa loja, preencha seus dados para entrega da compra:</h1> <hr>
    <form action="#" method="post">
      <fieldset> <legend><h3>Dados Pessoais</h3></legend>
        <p> <label for="nome"><h3>Nome</h3></label>
          <input type="text" name="nome" id="nome" autocmplete ="off"/>
        </p>
        <p> <label for="email"><h3>E-mail</h3></label>
          <input type="text" name="email" id="email" autocmplete ="off" />
        </p>
        <p> <label for="cep"><h3>CEP</h3></label>
          <table><input type="text" name="cep" id="cep" autocmplete ="off" />
  <div id="validcep" style="color: #FF0000;"></div></table>
        </p>
        <p> <label for="logradouro"><h3>Logradouro</h3></label>
          <input type="text" name="logradouro" id="logradouro" autocmplete ="off" /> <p> <label for="numero" class="numero"><h3>Número</h3></label>
          <input type="text" name="numero" id="numero" autocmplete ="off" />
        </p>
        <p> <label for="complemento"><h3>Complemento</h3></label>
          <input type="text" name="complemento" id="complemento" autocmplete ="off" />
        </p>
        <p> <label for="bairro"><h3>Bairro</h3></label>
          <input type="text" name="bairro" id="bairro" autocmplete ="off" />
        </p>
        <p> <label for="localidade"><h3>Localidade</h3></label>
          <input type="text" name="localidade" id="localidade" autocmplete ="off"/> <br> <label for="uf" class="uf"><h3>UF</h3></label>
          <select name ="uf1" id="uf" autocmplete ="off">
            <option value="">-- selecione --</option>
            <option value="AC">Acre</option>
            <option value="AL">Alagoas</option>
            <option value="AP">Amapá</option>
            <option value="AM">Amazonas</option>
            <option value="BA">Bahia</option>
            <option value="CE">Ceará</option>
            <option value="DF">Distrito Federal</option>
            <option value="ES">Espírito Santo</option>
            <option value="GO">Goiás</option>
            <option value="MA">Maranhão</option>
            <option value="MT">Mato Grosso</option>
            <option value="MS">Mato Grosso do Sul</option>
            <option value="MG">Minas Gerais</option>
            <option value="PA">Pará</option>
            <option value="PB">Paraíba</option>
            <option value="PR">Paraná</option>
            <option value="PE">Pernambuco</option>
            <option value="PI">Piauí</option>
            <option value="RJ">Rio de Janeiro</option>
            <option value="RN">Rio Grande do Norte</option>
            <option value="RS">Rio Grande do Sul</option>
            <option value="RO">Rondônia</option>
            <option value="RR">Roraima</option>
            <option value="SC">Santa Catarina</option>
            <option value="SP">São Paulo</option>
            <option value="SE">Sergipe</option>
            <option value="TO">Tocantins</option>
          </select>
        </p>
        <p> <button type ="submit" id ="bt-submit" value="Enviar" />Próximo</button>  
        </p>
      </fieldset>
    </form>
    <address><h2>Infogyba Soluções em Ti (<a href="mailto:[email protected]">[email protected])</a></h2>
    </address>
  </body>
</html> <script src="js/index.js"></script>
</body>
</html>

Busca de endereço pelo cep - Script Codes CSS Codes

body {
margin: 0;
padding: 30px 50px;
font: 70% Verdana, Arial, sans-serif;
}
button {
display:block;
width:90px;
height:30px;
text-align:center;
font-size:1.2em;
font-weight:bold;
text-shadow: 1px 1px #222;
color:#fff;
background-color:#32CD32;
border:none;
float:right;
}
a{
text-decoration:none;
}
h1 {font-size: 1.6em;
text-align:center;}
h2 {font-size: 1.2em;
text-align:center;
}
h3 {font-size: 1.1em;
text-align:left;}
address{
text-align:center;
}
form {margin: 30px 50px 0;}
form fieldset {
float: left;
  padding: 0 10px 10px;
  background: #e5e5e5;
  border-style: solid;
  border-width: 1px 2px 2px 1px;
  border-color: #AAA;
}
form legend {
  margin-bottom: 15px;
  padding: 5px 10px;
  background: #F5F5F5;
  border-style: solid;
  border-width: 1px 2px 2px 1px;
  border-color: #AAA; font-size:1.2em;
  font-weight: 600;
}
form p {
  float: left;
  clear: both;
  margin: 0;
}
form label {
  float: left;
  clear: left;
  display: block;
  width: 90px;
  height: 30px;
  margin-right: 5px;
  padding-top: 3px;
  cursor: pointer;
  text-align: right;
  color: #C00;
}
form label.numero {clear: none; width: 60px;padding:10px;}
form label.uf {clear: none; width: 40px;padding:10px;margin:0 auto;text-align:center;}
form input {float: left; width: 200px;}
form input#numero, form input#uf {width: 50px;}
form input#bt-submit {width: 100px; margin-left: 150px;}
address {clear: both; padding: 30px 0;}

Busca de endereço pelo cep - Script Codes JS Codes

function addEvent(obj, evt, func) {
  if (obj.attachEvent) {
    return obj.attachEvent(("on"+evt), func);
  } else if (obj.addEventListener) {
    obj.addEventListener(evt, func, true);
    return true;
  }
  return false;
}
 
function XMLHTTPRequest() {
  try {
    return new XMLHttpRequest(); // FF, Safari, Konqueror, Opera, ...
  } catch(ee) {
    try {
      return new ActiveXObject("Msxml2.XMLHTTP"); // activeX (IE5.5+/MSXML2+)
    } catch(e) {
      try {
        return new ActiveXObject("Microsoft.XMLHTTP"); // activeX (IE5+/MSXML1)
      } catch(E) {
        return false; // doesn't support
      }
    }
  }
}
 
function buscarEndereco() {
var campos = {
  validcep: document.getElementById("validcep"),
  cep: document.getElementById("cep"),
  logradouro: document.getElementById("logradouro"),
  numero: document.getElementById("numero"),
  bairro: document.getElementById("bairro"),
  localidade: document.getElementById("localidade"),
  uf: document.getElementById("uf")
};
 
var ajax = XMLHTTPRequest();
ajax.open("GET", ("./endereco.txt.php?cep=" + campos.cep.value.replace(/[^\d]*/, "")), true);
 
  ajax.onreadystatechange = function() {
  if (ajax.readyState == 1) {
  campos.logradouro.disabled = true;
  campos.logradouro.value = "carregando...";
  campos.bairro.disabled = true;
  campos.localidade.disabled = true;
  campos.bairro.value = "carregando...";
  campos.uf.disabled = true;
  campos.localidade.value = "carregando...";
  } else if (ajax.readyState == 4) {
  if(ajax.responseText == false){
    campos.validcep.innerHTML = "Cep invalido !!!";
    campos.logradouro.disabled = false;
    campos.logradouro.value = "";
    campos.bairro.disabled = false;
    campos.localidade.disabled = false;
    campos.bairro.value = "";
    campos.uf.disabled = false;
    campos.localidade.value = "";
  }else{
    campos.validcep.innerHTML = "";
    var r = ajax.responseText, i, logradouro, numero, bairro, localidade, uf;
    logradouro = r.substring(0, (i = r.indexOf(':')));
    campos.logradouro.disabled = false;
    campos.logradouro.value = unescape(logradouro.replace(/\+/g," "));
    r = r.substring(++i);
    bairro = r.substring(0, (i = r.indexOf(':')));
    campos.bairro.disabled = false;
    campos.bairro.value = unescape(bairro.replace(/\+/g," "));
    r = r.substring(++i);
    localidade = r.substring(0, (i = r.indexOf(':')));
    campos.localidade.disabled = false;
    campos.localidade.value = unescape(localidade.replace(/\+/g," "));
    r = r.substring(++i);
    uf = r.substring(0, (i = r.indexOf(';')));
    campos.uf.disabled = false;
    i = campos.uf.options.length;
    while (i--) {
      if (campos.uf.options.getAttribute("value") == uf) {
      break;
      }
    }
    campos.uf.selectedIndex = i;
  }
  }
};
ajax.send(null);
}
 
 
window.addEvent(
  window,
  "load",
  function() {window.addEvent(document.getElementById("cep"), "blur", buscarEndereco);}
);
Busca de endereço pelo cep - Script Codes
Busca de endereço pelo cep - Script Codes
Home Page Home
Developer Clayton
Username x-gyba
Uploaded November 04, 2022
Rating 3
Size 3,815 Kb
Views 14,168
Do you need developer help for Busca de endereço pelo cep?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Clayton (x-gyba) Script Codes
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!