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:
|
1 |
$(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:
|
1 |
$(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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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:
|
1 2 |
<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:
|
1 2 3 4 5 6 7 8 9 10 11 |
<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:
|
1 2 3 |
<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.
- Detectamos que se haga click en el botón con id = boton02.
- Al input con id = nombre3 se le asigna el valor del input con id = boton2
Obtener el valor de un radio button con jQuery val()
En este post que hice anteriormente explico de varias maneras de cómo obtener el valor de un radio button.
Obtener el valor de un select (option) con jQuery val()
También escribí este post para obtener el valor de un select con jquery.
Selectores de jQuery
Para la detección, control o selección de elementos con jQuery os recomiendo leer este post: