Seleccionar un input type hidden en Jquery

Error al acceder al value de un input oculto

Pongámonos en situación:

Tenemos un script que utiliza los selectores clásicos de un campo de texto y entre ellos está el habitual campo de control:

<script>
     //Este script lanzará "99" en el alert
     alert($('input:text[name=id_pagina]').val());
</script>

<input type="text" id="foo" name="id_pagina" value="99" />

En él almacenamos valores clave durante el desarrollo pero, cuando finaliza, ocultamos el campo para que quede más curioso de cara al usuario… ¡Pero el script deja de funcionar! ¿Qué ha ocurrido? Y más importante, ¿Cómo lo arreglo?

<script>
     //Al cambiar el campo de type="text" a hidden, el alert mostrará "Undefined"
     alert($('input:text[name=id_pagina]').val());
</script>

<input type="hidden" id="foo" name="id_pagina" value="99" />

Selector de type hidden

Jquery tiene un selector específico para estas ocasiones:

$('input:hidden[name=id_pagina]').val();

Que podemos aplicar también a cualquier otro atributo del campo. Por ejemplo, al id:

$('input:hidden#foo').val();

Selectores en base a otros atributos

Si evitamos el selector clásico donde especificamos que es un input:text, no habrá problemas en recoger el valor por el name o el id:

$('input[name=id_pagina]').val();
$('input#foo').val();

Los más populares

O sencillamente añadimos un class al campo y utilizamos los ya archiconocidos:

//Para el class
$('.personaliza').val();

//Para el id
$('#foo').val();

//Donde el input sería:
<input type="hidden" id="foo" name="id_pagina" class="personaliza" value="99" />

¿Te hemos ayudado? ¡Ahora ayúdanos tú a nosotros compartiendo el contenido!