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:
$(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:
$(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:
$(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:
<input type="text" value="text">
<p></p>
p {
color: green;
margin: 8px;
}
$('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:
<div>
<button>one</button>
<button>two</button>
<button>three</button>
<button>four</button>
</div>
<input type="text" value="click buttons">
button {
margin: 4px;
cursor: pointer;
}
input {
margin: 4px;
color: green;
}
$('button').click(function() {
let text = $(this).text();
$('input').val(text);
});
