Valeur masquée d'entrée d'accès jQuery

174

Comment puis-je accéder à <input type="hidden">l' valueattribut de la balise en utilisant jQuery?

javascript jquery IM-JM
la source
3
Double

Réponses:

347

Vous pouvez accéder aux valeurs des champs masqués avec val(), comme vous pouvez le faire sur n'importe quel autre élément d'entrée:

<input type="hidden" id="foo" name="zyx" value="bar" />

alert($('input#foo').val());
alert($('input[name=zyx]').val());
alert($('input[type=hidden]').val());
alert($(':hidden#foo').val());
alert($('input:hidden[name=zyx]').val());

Tout cela signifie la même chose dans cet exemple.

Tatu Ulmanen
la source
11
alert ($ ('input [type = hidden] #foo'). val ()); Cela trouve la variable cachée avec l'id foo. Cette recherche est plus spécifique.
Mohammed Rafeeq
6
@MohammedRafeeq alert ($ ('# foo'). Val ()); Est tout aussi spécifique. Parce qu'un identifiant est unique dans le DOM. Par conséquent, il ne trouvera toujours qu'un seul élément si le html respecte les normes. Sauf si vous utilisez l'instruction pour vérifier si l'élément est masqué ou non.
Edwin Stoteler
1
qu'est-ce qui est plus rapide? $ ('# foo') ou $ ('input: hidden # foo')? Je soupçonne la seconde depuis que plus d'informations de recherche ont été données mais je ne sais pas comment elles sont implémentées, donc je ne sais pas si mon sentiment est correct. EDIT: ok j'ai ma réponse grâce au commentaire d'Abel, id seulement, c'est à dire #foo est plus rapide.
comte
15

Il existe un sélecteur jQuery pour cela:

// Get all form fields that are hidden
var hidden_fields = $( this ).find( 'input:hidden' );

// Filter those which have a specific type
hidden_fields.attr( 'text' );

Vous donnera tous les champs de saisie masqués et filtrera par ceux avec un type="".

kaiser
la source
2
Notez que cela correspondra également aux éléments qui ont une valeur d'affichage CSS nulle, aux éléments dont la largeur et la hauteur sont définies sur 0 et aux éléments qui ont un ancêtre caché ( api.jquery.com/hidden-selector )
Daniel Liuzzi
6

Pour obtenir de la valeur, utilisez:

$.each($('input'),function(i,val){
    if($(this).attr("type")=="hidden"){
        var valueOfHidFiled=$(this).val();
        alert(valueOfHidFiled);
    }
});

ou:

var valueOfHidFiled=$('input[type=hidden]').val();
alert(valueOfHidFiled);

Pour définir la valeur, utilisez: 

$('input[type=hidden]').attr('value',newValue);
la racine
la source
4

Il n'y a rien de spécial <input type="hidden">:

$('input[type="hidden"]').val()
Maxim Sloyko
la source
3

Si vous souhaitez sélectionner un champ masqué individuel, vous pouvez le sélectionner via les différents sélecteurs de jQuery:

<input type="hidden" id="hiddenField" name="hiddenField" class="hiddenField"/> 


$("#hiddenField").val(); //by id
$("[name='hiddenField']").val(); // by name
$(".hiddenField").val(); // by class
Rodrigo Longo
la source
L'entrée masquée n'a pas de propriété de classe de style
Philip Puthenvila
3

Si vous avez un asp.net HiddenField, vous devez:

Pour accéder à la valeur HiddenField:

$('#<%=HF.ClientID%>').val()  // HF = your hiddenfield ID

Pour définir HiddenFieldValue 

$('#<%=HF.ClientID%>').val('some value')   // HF = your hiddenfield ID
Bruno Ferreira
la source
1

Attention si vous souhaitez récupérer une valeur booléenne à partir d'un champ caché!

Par exemple:

<input type="hidden" id="SomeBoolean" value="False"/>

(Une entrée comme celle-ci sera rendue par ASP MVC si vous l'utilisez @Html.HiddenFor(m => m.SomeBoolean).)

Ensuite, ce qui suit renverra une chaîne 'False', pas un booléen JS!

var notABool = $('#SomeBoolean').val();

Si vous souhaitez utiliser le booléen pour une logique, utilisez plutôt ce qui suit:

var aBool = $('#SomeBoolean').val() === 'True';
if (aBool) { /* ...*/ }
Georg Patscheider
la source
-1

La manière la plus universelle est de prendre la valeur par son nom. Peu importe si son entrée ou sélectionnez le type d'élément de formulaire.

var value = $('[name="foo"]');
Marcin Żurek
la source