Como pegar dados de formulário com JavaScript

Neste artigo você vai aprender a como pegar dados de formulário com JavaScript, com apenas uma única função da linguagem

Fala programador(a), beleza? Bora aprender mais sobre formulários e JavaScript!

Para extrair os dados de um form com JS vamos precisar fazer duas coisas

Primeiramente selecionar o elemento do formulário, podemos fazer isso com querySelector

E depois transformar esse elemento em uma instância de FormData

E então conseguimos pegar os valores de um input com o método get, desta instância

Veja um exemplo prático do que foi explicado:

const formData = new FormData(document.querySelector('form'))

const inputValue = formData.get("name")

console.log(inputValue)

No caso acima selecionamos o form e criamos a instância, como explicado anteriormente

E por fim extraímos o valor de um campo que contém o atributo name como name, simbolizando o nome de um usuário, por exemplo

No seu caso você deve adequar a extração ao nome dos campos do seu formulário

Simples não é? 🙂

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Conclusão

Neste artigo você aprendeu a como pegar dados de formulário com JavaScript

Utilizamos a classe FormData, que serve justamente para isso

Podemos trabalhar os inputs de um formulário em uma abordagem facilitada utilizando objetos e métodos

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!

Pegando TODOS os campos do formulário de uma vez:

O get é ótimo quando tu quer um campo específico

Mas e quando o form tem dez, quinze inputs? Ficar chamando get em cada um é chato demais

A instância de FormData é iterável, então dá pra percorrer tudo de uma vez

const formData = new FormData(document.querySelector('form'))

console.log(campo, valor)
}

E se tu prefere trabalhar com um objeto normal (pra mandar num JSON, por exemplo), dá pra converter em uma linha

const dados = Object.fromEntries(formData)

console.log(dados) // { name: "Matheus", email: "[email protected]" }

Agora tu tem um objeto JavaScript comum, com as chaves sendo os name dos inputs

muito massa, né? 😀

Como pegar os dados no envio do formulário sem recarregar a página?

Aqui mora a pegadinha clássica

Se tu roda o código direto, ele pega os campos vazios, porque rodou antes do usuário digitar qualquer coisa

O certo é escutar o evento de envio do form e só então extrair os dados

const form = document.querySelector('form')

form.addEventListener('submit', (e) => {
e.preventDefault()

const formData = new FormData(form)

console.log(formData.get('name'))
})

E o que aquele e.preventDefault() faz ali?

Ele segura o comportamento padrão do formulário, que é recarregar a página e sumir com tudo

Sem ele tu vê o console.log piscar no console e desaparecer na hora

Já me ferrei uma vez achando que o código estava quebrado, e era só isso haha

Por que meu campo volta vazio ou como null?

Tome cuidado com isso: o FormData monta a lista de campos pelo atributo name do input, e não pelo id

Se o teu input está assim, ele NÃO vai aparecer no FormData

<input type="text" id="name">

O correto é ter o name no elemento

<input type="text" id="name" name="name">

Outro detalhe: input desabilitado com disabled também fica de fora

Então se um campo teimar em vir vazio, olha o HTML antes de brigar com o JavaScript 🙂

E pra pegar valor de checkbox, select e campo de múltipla escolha?

O get sempre devolve o PRIMEIRO valor encontrado daquele nome

Isso resolve input de texto, email, senha, select simples e por aí vai

Mas quando tu tem vários checkboxes com o mesmo name, o certo é usar o getAll

const formData = new FormData(document.querySelector('form'))

const interesses = formData.getAll('interesses')

console.log(interesses) // um array com os marcados

O retorno vira um array, aí tu percorre normalmente

E se tu quiser só checar se um campo existe no form antes de usar, tem o has

if (formData.has('email')) {
console.log(formData.get('email'))
}

Bora testar no teu form?

Perguntas frequentes sobre pegar dados de formulário com JavaScript

Dá pra pegar os dados sem usar FormData?

Dá sim, selecionando o input direto e lendo a propriedade value

const nome = document.querySelector('#name').value

Funciona bem pra um ou dois campos

Agora, em formulário grande, o FormData deixa o código MUITO mais limpo, porque ele já monta tudo pra você

Como pegar o valor de um checkbox?

Pelo elemento tu usa a propriedade checked, que devolve verdadeiro ou falso

const aceitou = document.querySelector('#termos').checked

Pelo FormData, o campo só aparece se estiver marcado

O valor vem sempre como texto?

Os campos de texto vêm como string, inclusive quando o input é de número

Então se tu vai fazer conta, converte antes com Number

const idade = Number(formData.get('idade'))

E arquivos, o FormData pega também?

Pega, quando o input é do tipo file o valor extraído representa o arquivo em si, não um texto simples

É justamente por isso que a instância de FormData costuma ser usada no corpo de uma requisição de upload

Preciso de alguma biblioteca pra isso?

Não, é JavaScript puro

nada de instalar pacote, é built-in mesmo 😀

E depois de extrair, como envio esses dados?

O pulo do gato é que a instância de FormData já nasce pronta pra viajar

Ou seja, tu pode mandar ela direto no corpo de uma requisição, sem transformar em nada antes

form.addEventListener('submit', async (e) => {
e.preventDefault()

const formData = new FormData(form)

await fetch('/sua-rota', {
method: 'POST',
body: formData
})
})

E se a tua API espera JSON, aí sim tu converte antes com aquele Object.fromEntries que vimos lá em cima

body: JSON.stringify(Object.fromEntries(formData))

Dois caminhos, mesma base 🙂