Editar aparência de um formulário
19/07/2022
0
Olá, tudo bem? Não sou programador, estou montando um site onde o cliente preenche um extenso cadastro para solicitar o serviço, buscando tornar o preenchimento mais fácil procurei uma forma de facilitar o preenchimento do endereço, encontrei um código fonte em JavaScript e Json que atende a minha necessidade, entretanto quando incluído no meu formulário (Gravity Forms) ele não fica com a mesma formatação. Se alguém pudesse me ajudar incluindo no código a opção de aumentar o espaçamentro entre linhas (principal) outras questões secundárias como fonte (mas essa acho que consigo).
código abaixo:
<html>
<head>
<title>ViaCEP Webservice</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Adicionando Javascript -->
<script>
function limpa_formulário_cep() {
//Limpa valores do formulário de cep.
document.getElementById(''rua'').value=("");
document.getElementById(''bairro'').value=("");
document.getElementById(''cidade'').value=("");
document.getElementById(''uf'').value=("");
document.getElementById(''ibge'').value=("");
}
function meu_callback(conteudo) {
if (!("erro" in conteudo)) {
//Atualiza os campos com os valores.
document.getElementById(''rua'').value=(conteudo.logradouro);
document.getElementById(''bairro'').value=(conteudo.bairro);
document.getElementById(''cidade'').value=(conteudo.localidade);
document.getElementById(''uf'').value=(conteudo.uf);
document.getElementById(''ibge'').value=(conteudo.ibge);
} //end if.
else {
//CEP não Encontrado.
limpa_formulário_cep();
alert("CEP não encontrado.");
}
}
function pesquisacep(valor) {
//Nova variável "cep" somente com dígitos.
var cep = valor.replace(/\D/g, '''');
//Verifica se campo cep possui valor informado.
if (cep != "") {
//Expressão regular para validar o CEP.
var validacep = /^[0-9]$/;
//Valida o formato do CEP.
if(validacep.test(cep)) {
//Preenche os campos com "..." enquanto consulta webservice.
document.getElementById(''rua'').value="...";
document.getElementById(''bairro'').value="...";
document.getElementById(''cidade'').value="...";
document.getElementById(''uf'').value="...";
document.getElementById(''ibge'').value="...";
//Cria um elemento javascript.
var script = document.createElement(''script'');
//Sincroniza com o callback.
script.src = ''https://viacep.com.br/ws/''+ cep + ''/json/?callback=meu_callback'';
//Insere script no documento e carrega o conteúdo.
document.body.appendChild(script);
} //end if.
else {
//cep é inválido.
limpa_formulário_cep();
alert("Formato de CEP inválido.");
}
} //end if.
else {
//cep sem valor, limpa formulário.
limpa_formulário_cep();
}
};
</script>
</head>
<body>
<!-- Inicio do formulario -->
<form method="get" action=".">
<label>Cep:
<input name="cep" type="text" id="cep" value="" size="10" maxlength="9"
onblur="pesquisacep(this.value);" /></label><br />
<label>Rua:
<input name="rua" type="text" id="rua" size="60" /></label><br />
<label>Bairro:
<input name="bairro" type="text" id="bairro" size="40" /></label><br />
<label>Cidade:
<input name="cidade" type="text" id="cidade" size="40" /></label><br />
<label>Estado:
<input name="uf" type="text" id="uf" size="2" /></label><br />
<label>IBGE:
<input name="ibge" type="text" id="ibge" size="8" /></label><br />
</form>
</body>
</html>
código abaixo:
<html>
<head>
<title>ViaCEP Webservice</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Adicionando Javascript -->
<script>
function limpa_formulário_cep() {
//Limpa valores do formulário de cep.
document.getElementById(''rua'').value=("");
document.getElementById(''bairro'').value=("");
document.getElementById(''cidade'').value=("");
document.getElementById(''uf'').value=("");
document.getElementById(''ibge'').value=("");
}
function meu_callback(conteudo) {
if (!("erro" in conteudo)) {
//Atualiza os campos com os valores.
document.getElementById(''rua'').value=(conteudo.logradouro);
document.getElementById(''bairro'').value=(conteudo.bairro);
document.getElementById(''cidade'').value=(conteudo.localidade);
document.getElementById(''uf'').value=(conteudo.uf);
document.getElementById(''ibge'').value=(conteudo.ibge);
} //end if.
else {
//CEP não Encontrado.
limpa_formulário_cep();
alert("CEP não encontrado.");
}
}
function pesquisacep(valor) {
//Nova variável "cep" somente com dígitos.
var cep = valor.replace(/\D/g, '''');
//Verifica se campo cep possui valor informado.
if (cep != "") {
//Expressão regular para validar o CEP.
var validacep = /^[0-9]$/;
//Valida o formato do CEP.
if(validacep.test(cep)) {
//Preenche os campos com "..." enquanto consulta webservice.
document.getElementById(''rua'').value="...";
document.getElementById(''bairro'').value="...";
document.getElementById(''cidade'').value="...";
document.getElementById(''uf'').value="...";
document.getElementById(''ibge'').value="...";
//Cria um elemento javascript.
var script = document.createElement(''script'');
//Sincroniza com o callback.
script.src = ''https://viacep.com.br/ws/''+ cep + ''/json/?callback=meu_callback'';
//Insere script no documento e carrega o conteúdo.
document.body.appendChild(script);
} //end if.
else {
//cep é inválido.
limpa_formulário_cep();
alert("Formato de CEP inválido.");
}
} //end if.
else {
//cep sem valor, limpa formulário.
limpa_formulário_cep();
}
};
</script>
</head>
<body>
<!-- Inicio do formulario -->
<form method="get" action=".">
<label>Cep:
<input name="cep" type="text" id="cep" value="" size="10" maxlength="9"
onblur="pesquisacep(this.value);" /></label><br />
<label>Rua:
<input name="rua" type="text" id="rua" size="60" /></label><br />
<label>Bairro:
<input name="bairro" type="text" id="bairro" size="40" /></label><br />
<label>Cidade:
<input name="cidade" type="text" id="cidade" size="40" /></label><br />
<label>Estado:
<input name="uf" type="text" id="uf" size="2" /></label><br />
<label>IBGE:
<input name="ibge" type="text" id="ibge" size="8" /></label><br />
</form>
</body>
</html>
Alisson Decaldas
Curtir tópico
+ 0
Responder
Post mais votado
20/07/2022
Entrar em contato caso queira resolver o problema, com o assunto do email sendo o nome da sua dúvida e com o link da página atual no corpo do email:
contato.gabrielmartinspadoin@gmail.com
contato.gabrielmartinspadoin@gmail.com
Gabriel Padoin
Responder
Mais Posts
21/07/2022
Alisson Decaldas
Entrar em contato caso queira resolver o problema, com o assunto do email sendo o nome da sua dúvida e com o link da página atual no corpo do email:
contato.gabrielmartinspadoin@gmail.com
contato.gabrielmartinspadoin@gmail.com
Olá Gabriel, agradeceço pela disposição e ajuda mas acabei resolvendo o problema de outra forma. Encontrei um código que pude utilizar os próprios campos do formulário para o que eu precisava, desta forma não tive mais problemas com a formatação.
Abraços!
Responder
Clique aqui para fazer login e interagir na Comunidade :)