Como recuperar campos do Formulário em Javascript?

#JavaScript

Vou demonstrar de uma forma simples como recuperar o valor dos campos de um formulário em Javascript.

Antes de mais nada nos exemplos abaixo vou utilizar as arrows functions que irão facilitar bastante o nosso trabalho.

Vamos capturar usando o atributo “name” do campo, puramente com o Javascript sem a utilização de alguma biblioteca externa.

Nos comentários dos scripts estão alguns detalhes da implementação.

1 – Crie um arquivo index.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <title>Como Recuperar Formulário em Javascript?</title>
  <meta charset="utf-8">
  <meta name="description" content="Página como Recuperar Formulário em Javascript">
  <meta name="keywords" content="html, css, js, site, worker">
  <meta name="robots" content="index">
  <link href="formulario.css" rel="stylesheet">
</head>
<body>
<form id="form-envio">
  <div class="grupo-campo">
      <label>Select Simples: </label>
      <select name="select-simples">
          <option value="1">Valor 1</option>
          <option value="2">Valor 2</option>
          <option value="3">Valor 3</option>
      </select>
  </div>
  <div class="grupo-campo">
      <label>Select Multiple: </label>
      <select name="select-multiple" multiple>
          <option value="1">Valor 1</option>
          <option value="2">Valor 2</option>
          <option value="3">Valor 3</option>
      </select>
  </div>
  <div class="grupo-campo">
      <label>Input Simples: </label>
      <input value="" name="input_simples" type="text" />
  </div>
  <div class="grupo-campo">
      <label><input type="checkbox" name="lista_checked[]" value="check1"/> Check 1</label>
      <label><input type="checkbox" name="lista_checked[]" value="check2"/> Check 2</label>
  </div>
  <div class="grupo-campo">
      <label><input type="radio" name="radio_padrao" value="sim"/> Sim</label>
      <label><input type="radio" name="radio_padrao" value="não"/> Não</label>
  </div>
  <div class="grupo-campo">
      <label>Input File</label>
      <input name="arquivo" type="file" />
  </div>

  <div class="grupo-campo">
      <button id="btn-enviar">Enviar</button>
  </div>
</form>
<div id="app"></div>
  <script src="scripts.js"></script>
</body>
</html>

2 – Crie um arquivo CSS apenas para estilizar um pouco o visual

.grupo-campo {
  padding: 10px;
}

.grupo-campo > label {
  display: block;
  margin-bottom: 10px;
}

.grupo-campo > input, select {
  padding: 10px;
  border: 1px solid #DADADAFF;
}

.grupo-campo button {
  padding: 10px;
}

3 – Crie um arquivo scripts.js

const formulario = document.getElementById('form-envio'),
    btn_enviar = document.getElementById('btn-enviar');


// ouviente do botão clicar
btn_enviar.addEventListener('click', function (e) {
  e.preventDefault();

  // Recuperamos os elementos
  let select_simples = formulario.querySelector('select[name="select-simples"]'),
      select_multiple = formulario.querySelector('select[name="select-multiple"]'),
      input_simples = formulario.querySelector('input[name="input_simples"]'),
      lista_checkbox = formulario.querySelectorAll('input[name="lista_checked[]"]'),
      radio_padrao = formulario.querySelectorAll('input[name="radio_padrao"]'),
      input_arquivo = formulario.querySelector('input[name="arquivo"]');

  /**
   * Agora Capturamos os valores, perceba que utilizamos as arrows funtions nos campos
   * que são multiplos e campos de lista
   * @type {number}
   */

  let valor_select_simples = parseInt(select_simples.options[select_simples.selectedIndex].value),
      valor_input_simples = input_simples.value,
      valor_input_arquivo = input_arquivo.files[0],


      // Aqui utilizamos as arrows funcitons, que salvam nossas vidas.
      valor_radio_padrao = Array.from(radio_padrao).filter(value => value.checked).map(({value}) => value).join(''),
      valores_select_multiple = Array.from(select_multiple.selectedOptions).map(({ value }) => value),
      valores_checkbox = Array.from(lista_checkbox).filter(value => value.checked).map(({value}) => value);


      // Por fim fazemos a impressão dos campos apenas para verificação
      console.log(valor_select_simples);
      console.log(valor_input_simples);
      console.log(valor_input_arquivo);
      console.log(valor_radio_padrao);
      console.log(valores_select_multiple);
      console.log(valores_checkbox);
});

Vejamos os Resultados:

Incluímos praticamente todos tipos de campos, temos outras variações no campo do tipo “input”, mas é só replicar o mesmo conceito, se for uma lista de inputs veja como eu fiz o campo do tipo checkbox.

Por fim, temos o resultado dos campos recuperados

Enfim, nesse tutorial você aprendeu em como voce poderá recuperar em uma abordagem moderna do Javascript os campos do formulário.

Link dos arquivos

https://github.com/joantoniopn