1
resposta

Preenchendo formulário HTML automaticamente com AJAX

Estou tentando implementar o que está sendo ensinado nesse artigo da formação front-end mas não sei exatamente onde eu coloco o código que está sendo ensinado no passo a passo. Alguém poderia dar uma luz? Obrigado

1 resposta

Oi Rafael!

Os arquivos inicias so projeto estão neste link e os arquivos CSS estão aqui. Depois de baixar os dois arquivos e extraí-los, copie e cole os arquivos CSS na pasta asserts\stylesheets\stilize.

Você pode colocar o código javascript ensinado no post dentro de uma tag script no final do body no arquivo HTML, desta maneira:

<body>
    // código inicial da aula

    <script>
    // código ensinado aqui
    </script>
</body>

Após ler o artigo, percebi que são necessários 2 passos adicionais para que o código funcione corretamente:

  1. Associar o evento de click do botão com a função buscaCep
    document.querySelector('.o-button--gary').addEventListener('click', buscaCep);
  2. Colocar type="button" no botão que com o ícone de globo
    // linha 19 do index.html
    <button class="o-button--gary" type="button"><i class="icon-globe"></i></button>
    Como o botão está dentro de um form, seu type padrão é submit e isso causaria um refresh na página ao ser clicado. Desta forma os campos seriam preenchidos com os dados, mas logo em seguida a página seria recarregada, limpando todos os campos. Sendo assim, a troca para type="button" impede esse comportamento indesejado.

Espero ter ajudado! Se tiver mais alguma dúvida pode postar aqui! :)