2.9 Obteniendo el valor de un campo de texto con el método attr().

El  método attr() nos permite obtener el valor de cualquier atributo de un elemento HTML, en este caso lo usaremos para obtener el valor que se ha introducido en un campo de texto, esto mediante el atributo value.Para mostrar un poco mejor el funcionamiento de este método, supongamos que tenemos un campo de texto con la clase “campoNombre” y que deseamos que al momento de dar click en un botón con la clase “btnMostrar” nos aparezca un mensaje conteniendo el texto ingresado en el campo de texto.

El código HTML necesario sería el siguiente:

<form>
<input type=”text” class=”campoNombre” size=”30”/>
<input type=”button” value=”Mostrar mensaje” class=”btnMostrar”/>
</form>

Ahora, para realizar dicho efecto necesitamos el siguiente código Jquery:

$(document).ready(function(){
    $(“.btnMostrar”).click(function(){
              var cadenaTexto=$(“.campoNombre”).attr(“value”);
                alert(cadenaTexto);
      });
});

El código anterior consta de los siguientes componentes:

• La primera parte $(document).ready(function(){}); indica que el código Jquery se ejecutará una vez que se haya cargado por completo el HTML.
• La segunda parte $(“.btnMostrar”).click(function(){}); índica lo que sucederá una vez que se de click en el botón, esto mediante el evento click().
• La tercera parte var cadenaTexto=$(“.campoNombre”).attr(“value”); nos permite obtener el valor del campo de texto mediante el método attr() y especificando que el atributo del cual se necesita su valor, es el atributo value.
• La última parte alert(cadenaTexto); nos permite mostrar en una ventana emergente el contenido de la variable cadenaTexto.