7
respostas

formulário HTML automaticamente com AJAX

Estou tentando fazer o formulário HTML + Ajax, onde ao preencher o CEP ele pega as outras informações "automaticamente", conforme o tópico da formação de front end... Mas não funciona, o código ficou assim;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Ajax com JS Puro</title>
    <link href="asserts/stylesheets/stilize/stilize.min.css" rel="stylesheet" type="text/css">
    <script>
        function buscaCep() {
            let inputCep = document.querySelector('input\[name=cep\]');
            let cep = inputCep.value.replace('-', '');
            let url = 'http://viacep.com.br/ws/' + cep + '/json';
            let xhr = new XMLHttpRequest();
            xhr.open('GET', url, true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4) {
                    if (xhr.status = 200) preencheCampos(JSON.parse(xhr.responseText));
                }
            }
            xhr.send();
        }
    </script>
</head>

<body>
    <form class="o-form">
        <div class="o-navbar--gary">Buscando CEP com requisição JAX</div>
        <div class="o-form__body o-form__body--padding">
            <div class="l-row">
                <div class="u-grid--2">
                    <label for="" class="o-form__text">CEP</label>
                    <div class="o-form__group">
                        <input class="o-form__data" name="cep" type="text">
                        <span class="o-form__groupElement"><button class="o-button--gary"><i class="icon-globe"></i></button></span>
                    </div>
                </div>
                <div class="u-grid--8">
                    <label for="" class="o-form__text">Endereço</label>
                    <input class="o-form__data" name="endereco" type="text">
                </div>
                <div class="u-grid--2">
                    <label for="" class="o-form__text">Numero</label>
                    <input class="o-form__data" name="numero" type="text">
                </div>
            </div>
            <div class="l-row">
                <div class="u-grid--8">
                    <label for="" class="o-form__text">Bairro</label>
                    <input class="o-form__data" name="bairro" type="text">
                </div>
                <div class="u-grid--4">
                    <label for="" class="o-form__text">Complemento</label>
                    <input class="o-form__data" name="complemento" type="text">
                </div>
            </div>
            <div class="l-row">
                <div class="u-grid--10">
                    <label for="" class="o-form__text">Cidade</label>
                    <input class="o-form__data" name="cidade" type="text">
                </div>
                <div class="u-grid--2">
                    <label for="" class="o-form__text">Estado</label>
                    <input class="o-form__data" name="estado" type="text">
                </div>
            </div>
        </div>
    </form>
</body>

</html>
7 respostas

Fala ai Roberto, tudo bem? Acho que está faltando algumas partes de códigos, consegue mandar o projeto completo? Assim eu consigo simular o problema por aqui e analisá-lo com mais calma.

Pode compartilhar através do Github ou Google Drive (zipado).

Fico no aguardo.

Fala ai Roberto, tudo bem? Tentei baixar o projeto e aqui está dizendo que eu não tenho permissão para visualizá-lo e baixá-lo.

Solicite o acesso, deve ter chegado um email ai para você.

Abraços

Fala Roberto, dei uma olhada no projeto e faltou tu vincular a função de buscar o CEP com o click do botão, algo assim:

<button class="o-button--gary" onclick="buscaCep()" type="button"><i class="icon-globe"></i></button>

Adicionei o onclick onde informei a função que será executada e adicionei um type=button para evitar ele recarregar a página ao submeter o form.

Obs: Primeira pessoa que vejo utilizando o Stilize, maneiraço kkkk

Dessa forma falta criar a função preencheCampos.

Espero ter ajudado.

Eu fiz como você informou, coloquei o onclick chamando o buscaCep().. A página em si não está mais recarregando por causa do type, mas, não está sendo realizado o preenchimento automático nos campos...

<div class="o-form__group">
                        <input class="o-form__data" name="cep" type="text">
                        <span class="o-form__groupElement"><button onclick="buscaCep()" type="button" class="o-button--gary"><i class="icon-globe"></i>a</button></span>
                    </div>

https://github.com/rvinicius396g/Form-ajax-CEP/blob/master/index.html

Fala Roberto, o preenchimento não irá fazer mesmo, você precisa implementar a função preencheCampos, ela não existe no seus códigos e arquivos.

Basicamente você vai precisar buscar os campos com um querySelector por exemplo e através do objeto retornado pela Via CEP você vai passando os valores para os campos.

Espero ter ajudado.