Método val

O método val permite obter e alterar o valor atual de um elemento.

Sintaxe

Assim podemos obter o valor atual do primeiro elemento no conjunto:

javascript$(seletor).val();

O método val é usado principalmente para obter valores de elementos de formulário, como: input, select e textarea. Se ele for chamado em uma coleção vazia, retornará undefined. Ao trabalhar com select com o atributo multiple definido, o método retornará um array com os valores de cada option selecionada. Se nenhuma estiver selecionada, será retornado um array vazio. Assim podemos definir o valor de cada elemento no conjunto. Como parâmetro podemos passar uma string, um array ou um número:

javascript$(seletor).val(valor);

Aplicação de uma função a cada elemento no conjunto. A função recebe como primeiro parâmetro o índice atual no conjunto e como segundo - seu valor atual:

javascript$(seletor).val(nome do atributo, function(índice no conjunto, valor atual));

Exemplo

No próximo exemplo, vamos obter os valores inseridos no input e exibi-los abaixo em um parágrafo:

html<input type="text" value="text">
<p></p>

cssp {
  color: green;
  margin: 8px;
}

javascript$('input').keyup(function() {
  let value = $(this).val();
  $('p').text(value);
}).keyup();

Exemplo

E agora com o método val vamos inserir os valores dos botões que clicarmos no input localizado abaixo:

html<div>
  <button>one</button>
  <button>two</button>
  <button>three</button>
  <button>four</button>
</div>
<input type="text" value="click buttons">

cssbutton {
  margin: 4px;
  cursor: pointer;
}

input {
  margin: 4px;
  color: green;
}

javascript$('button').click(function() {
  let text = $(this).text();
  $('input').val(text);
});

Veja também