» » Obtener el valor de un campo de texto con jQuery

Obtener el valor de un campo de texto con jQuery

Para obtener el valor de un campo de texto, dentro de las etiquetas Head, tenemos que añadir a nuestro documento el archivo jquery.js


 <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>


Y abrir otra etiqueta Script para escribir todo los scripts.


<script type="text/javascript">
</script>

 

Dentro de las etiquetas Body, colocamos un campo de texto cualquiera y le asignamos una id; también escribiremos un div con su id para ir escribiendo el valor obtenido.


<input type="text" id="campo">
<div id="reflejar"></div>

 

Dentro de las etiquetas Script que acabamos de escribir, escribimos lo siguiente:


$('#campo').on('keyup', function(){
...
 });

 

Con esto le asignamos al objeto con la id "campo” la función .on() de jQuery, que es la que hace que se ejecute una función una vez que se activa el evento que esta entre comillas (en este caso keyup); escribíkeyup ya que, estaremos obteniendo y escribiendo el valor  en el div con id "reflejar” cada vez que la tecla se levante, ya de ahi se puede escribir "click”, "dblclick”, etc.

 

En donde están los puntos suspensivos "…” escribimos:


una variable que contiene el valor del campo con la id "campo” (la función .val() es solo para campos de texto como: inputs y los textarea; si se quiere obtener el valor de un objeto como son los div, span, etc, es con la función .text() sin parámetros)


var valor = $('#campo').val();

 

y enseguida


$('#reflejar').text(valor);

 

al objeto con la id "reflejar” si escribimos el valor de la variable "valor”.

Aquí hay que tener cuidado, porque lo que son las funciones jQuery: .val(), .text(), .html(), si no se les escribe ningún parámetro, dentro del paréntesis, esas funciones obtienen el valor del objeto.

El código completo seria: 

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Incluye texto con jQuery</title>
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('#campo').on('keyup', function(){
            var valor = $('#campo').val();
            $('#reflejar').text(valor);
            //$('#campo').val("Hola mundo");
        });
});
</script>
</head>
<body>
<input type="text" id="campo">
<div id="reflejar"></div>
</body>
</html>

Ver Resulatdo


Categorias: Noticias / jQuery / Tutorial
Etiquetas: jQuery Ejemplo
Añadir Comentario
Información
Usuarios que están en este grupo no pueden dejar comentarios en la página