Categorías: jQuery

jQuery val(): Asignar y obtener valores de los input, select y textarea

Con jQuery val() podemos asignar u obtener valores de ciertos elementos del DOM de una web, estos elementos son los inputs de formularios y las etiquetas select y textarea.

Anteriormente hablé sobre cómo obtener el valor de un radio button y cómo obtener el valor de un select, otras unciones de jQuery interesantes son:

Sintaxis de jQuery val()

Vamos a ver las diferentes sintaxis de esta función extraída de su web oficial:

La 1º es para obtener el valor de un elemento:

$(elemento).val()

Esta opción no requiere más parámetros que el del elemento seleccionado.

La 2º para asignar un valor a un elemento:

$(elemento).val(valor)

Se elige el elemento seleccionado.
Se pasa el valor que queremos asignarle.

Ejemplo para asignar y obtener el valor de un input text con jQuery val()

Vamos a ver cómo podemos asignar y obtener el valor de un input text en este primer ejemplo, primero os pongo el código jQuery de obtención del valor.

<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function()
 {
 $("#boton01").click(function () {
 //saco el valor accediendo a un input de tipo text y name = nombre
 alert($('input:text[name=nombre]').val());
 //saco el valor accediendo al id del input = nombre
 alert($("#nombre").val());
 //saco el valor accediendo al class del input = nombre   
 alert($(".nombre").val());
 });
});
</script>

Y aquí los 2 botones:

<input type="text" name="nombre" id="nombre" class="nombre" value="">
<input type="button" name="boton01" id="boton01" value="Sacar el valor del input text">

Os explico el código jQuery donde he obtenido el valor de 3 maneras diferentes.

Detectamos que se haga click en el botón con id = boton01.
Saco un primer alert accediendo al valor del input texto con name = nombre.
Un segundo alert accediendo al valor del input texto con id = nombre.
Termino con otro alert accediendo al valor del input texto con class = nombre.

Ahora os pongo el código para asignar valores al input text, también lo podéis probar en el primer ejemplo:

<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function()
 {
 $("#boton02").click(function () {
 //saco el valor accediendo a un input de tipo text y name = nombre2 y lo asigno a uno con name = nombre3 
 $("#nombre3").val($("#nombre2").val());
 });  
});
</script>

También os pongo el código de los botones:

<input type="text" name="nombre2" id="nombre2" class="nombre2" value=""> 
<input type="text" name="nombre3" id="nombre3" class="nombre3" value="">
<input type="button" name="boton02" id="boton02" value="Asginar al input 2 el valor del primero">

Os explico el código jQuery para la asignación de valores.