Como recuperar valores de formulário em JavaScript

Trabalhar com formulários é uma das tarefas mais comuns em desenvolvimento web, e saber como recuperar os valores inseridos pelos usuários usando JavaScript é essencial para validar e manipular esses dados. Neste post, vamos aprender como recuperar valores de formulário em JavaScript.

1. Recuperando valores com getElementById()

O método mais direto de acessar um campo específico de um formulário é utilizando o document.getElementById(), que seleciona o elemento pelo seu ID.

Exemplo:

<form id="meuForm">
    <label for="nome">Nome:</label>
    <input type="text" id="nome" name="nome" />

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" />

    <button type="button" onclick="pegarValores()">Enviar</button>
</form>

<script>
function pegarValores() {
    const nome = document.getElementById('nome').value;
    const email = document.getElementById('email').value;

    console.log("Nome: " + nome);
    console.log("Email: " + email);
}
</script>

• .value: A propriedade .value é usada para obter o valor atual de um campo de entrada.
  
  
• Ao clicar no botão “Enviar”, a função pegarValores() exibe os valores de nome e email no console.

2. Usando querySelector() para selecionar qualquer elemento

Outra forma de selecionar elementos é usando document.querySelector(), que permite selecionar qualquer elemento com um seletor CSS. Isso é útil quando você não quer usar IDs ou está trabalhando com classes.

Exemplo:

<form id="meuForm">
    <label for="nome">Nome:</label>
    <input type="text" class="input-dados" name="nome" />

    <label for="email">Email:</label>
    <input type="email" class="input-dados" name="email" />

    <button type="button" onclick="pegarValores()">Enviar</button>
</form>

<script>
function pegarValores() {
    const nome = document.querySelector('input[name="nome"]').value;
    const email = document.querySelector('input[name="email"]').value;

    console.log("Nome: " + nome);
    console.log("Email: " + email);
}
</script>

• document.querySelector(): Seleciona o primeiro elemento que corresponde ao seletor CSS especificado.
  
  

3. Recuperando todos os valores com FormData

Se o formulário tiver vários campos, uma maneira eficiente de recuperar todos os dados de uma vez é usar a interface FormData, que coleta automaticamente os valores de todos os campos do formulário.

Exemplo:

<form id="meuForm">
    <label for="nome">Nome:</label>
    <input type="text" id="nome" name="nome" />

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" />

    <label for="mensagem">Mensagem:</label>
    <textarea id="mensagem" name="mensagem"></textarea>

    <button type="button" onclick="pegarValores()">Enviar</button>
</form>

<script>
function pegarValores() {
    const form = document.getElementById('meuForm');
    const formData = new FormData(form);

    for (const [name, value] of formData) {
        console.log(`${name}: ${value}`);
    }
}
</script>

• new FormData(form): Cria um objeto FormData a partir do formulário, que contém todos os pares name: value dos campos preenchidos.
  
  
• O for...of permite iterar pelos dados do formulário.

4. Recuperando valores de campos de seleção e Radio Buttons

Para campos de seleção e radio buttons, a lógica é um pouco diferente, pois você precisa verificar qual opção foi selecionada.

Exemplo com Radio Buttons:

<form id="meuForm">
    <label>Gênero:</label>
    <input type="radio" id="masculino" name="genero" value="Masculino">
    <label for="masculino">Masculino</label>
    
    <input type="radio" id="feminino" name="genero" value="Feminino">
    <label for="feminino">Feminino</label>
    
    <button type="button" onclick="pegarValores()">Enviar</button>
</form>

<script>
function pegarValores() {
    const genero = document.querySelector('input[name="genero"]:checked').value;
    console.log("Gênero: " + genero);
}
</script>

• :checked: Esse seletor seleciona o radio button que está marcado no momento.

Exemplo com Select:

<form id="meuForm">
    <label for="pais">Escolha seu país:</label>
    <select id="pais" name="pais">
        <option value="Brasil">Brasil</option>
        <option value="Portugal">Portugal</option>
        <option value="Estados Unidos">Estados Unidos</option>
    </select>
    
    <button type="button" onclick="pegarValores()">Enviar</button>
</form>

<script>
function pegarValores() {
    const pais = document.getElementById('pais').value;
    console.log("País: " + pais);
}
</script>

5. Validando os valores do formulário

Você pode adicionar verificações de validação simples antes de processar os dados do formulário.

Exemplo de validação:

function pegarValores() {
    const nome = document.getElementById('nome').value;
    const email = document.getElementById('email').value;

    if (nome === '' || email === '') {
        alert('Por favor, preencha todos os campos!');
    } else {
        console.log("Nome: " + nome);
        console.log("Email: " + email);
    }
}

Esse código impede o envio do formulário se os campos estiverem vazios.

Outro exemplo prático

//Código Javascript para recuperar valores dos campos

  <script language="javascript">

  function enviaInfo() {
  
   var codigo = document.forms["fEnvia"].codigo.value;
   var nome = document.forms["fEnvia"].nome.value;
   document.forms["fEnvia"].submit(); 
  } 

  </script>

Obs.:

forms[“fEnvia”]: nome do formulário HTML;
codigo.value: especifica o nome do campo que contém o valor a ser recuperado.

Para chamar a função Javascript acima, basta especificar o nome da mesma no evento “onClick” do botão do formulário:

<input type='submit' onClick='enviaInfo();' name='enviar' value='Enviar informações' />

Recuperar valores de formulários em JavaScript é uma tarefa comum e pode ser realizada de várias maneiras, desde o uso de getElementById() para campos individuais até a interface FormData para coletar todos os dados de uma vez.

Além de recuperar esses valores, você pode aplicar validações e tratamentos específicos para garantir que os dados recebidos sejam adequados.

Dúvidas ou sugestões sobre como recuperar valores de formulário em Java Script? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits

Tags: form javascript