Método val
El método val permite obtener y cambiar
el valor actual de un elemento.
Sintaxis
Así podemos obtener el valor actual del primer elemento en el conjunto:
$(selector).val();
El método val se utiliza principalmente para
obtener valores de elementos de formulario, tales como:
input,
select
y textarea. Si
se llama en una colección vacía, devolverá undefined.
Al trabajar con select con el atributo
multiple establecido, el método devolverá un array de valores de cada
option seleccionado. Si ninguno de ellos está seleccionado,
se devolverá un array vacío. Así podemos establecer
el valor de cada elemento en el conjunto. Como parámetro se puede
pasar una cadena, un array o un número:
$(selector).val(valor);
Aplicación de una función a cada elemento del conjunto. La función acepta como primer parámetro el índice actual en el conjunto, y como segundo - su valor actual:
$(selector).val(nombre del atributo, function(índice en el conjunto, valor actual));
Ejemplo
En el siguiente ejemplo, obtengamos los valores introducidos en el input y mostrémoslos debajo en un párrafo:
<input type="text" value="text">
<p></p>
p {
color: green;
margin: 8px;
}
$('input').keyup(function() {
let value = $(this).val();
$('p').text(value);
}).keyup();
Ejemplo
Y ahora con el método val vamos a
escribir los valores de los botones que
pulsemos, en el input ubicado debajo:
<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);
});
