Définir la valeur du champ masqué dans un formulaire à l'aide de «.val ()» de jQuery ne fonctionne pas

188

J'ai essayé de définir la valeur d'un champ caché dans un formulaire en utilisant jQuery, mais sans succès.

Voici un exemple de code qui explique le problème. Si je garde le type d'entrée sur "texte", cela fonctionne sans aucun problème. Mais changer le type d'entrée en "caché" ne fonctionne pas!

<html>

    <head>
        <script type="text/javascript" src="jquery.js">
        </script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("button").click(function() {
                    $("input:text#texens").val("tinkumaster");
                });
            });
        </script>
    </head>

    <body>
        <p>
            Name:
            <input type="hidden" id="texens" name="user" value="texens" />
        </p>
        <button>
            Change value for the text field
        </button>
    </body>

</html>

J'ai également essayé la solution de contournement suivante, en définissant le type d'entrée sur "texte", puis en utilisant un style "affichage: aucun" pour la zone de saisie. Mais cela échoue également! Il semble que jQuery a du mal à définir des champs d'entrée masqués ou invisibles.

Des idées? Existe-t-il une solution de contournement qui fonctionne réellement?

jquery set hidden-fields texens
la source

Réponses:

316

:textéchouera pour une entrée avec une valeur de type hidden. Il est également beaucoup plus efficace d'utiliser simplement:

$("#texens").val("tinkumaster");

Les attributs d'ID doivent être uniques sur une page Web, assurez-vous que les vôtres le sont car cela peut contribuer à tout problème que vous rencontrez, et la spécification d'un sélecteur plus compliqué ralentit simplement les choses et n'a pas l'air aussi soigné.

Exemple sur http://jsbin.com/elovo/edit , en utilisant votre exemple de code sur http://jsbin.com/elovo/2/edit

Andy E
la source
Andy, merci pour la réponse rapide. J'ai en fait essayé avec les "#texens" d'abord, puis avec "#input: hidden # texens" et aucun d'eux ne semblait fonctionner. Quand j'ai changé le type d'entrée sous la forme de "hidden" à "text", et "#input: hidden: texens" à "#input: text: texens", cela a fonctionné sans aucun problème. Le "#input: text # texens" était une faute de frappe ci-dessus, et aurait dû être "#input: hidden # texens" ou simplement "#texens" comme vous venez de le mentionner. Il semble donc que les valeurs du champ masqué ne soient pas modifiées.
texens
1
@texens: Je soupçonne que le problème est ailleurs. Comme vous pouvez le voir dans l'exemple auquel j'ai lié, val()fonctionne très bien sur l'entrée masquée, en changeant la valeur de "non modifié" à "modifié". J'ai révisé l'exemple pour inclure le code que vous avez collé ci-dessus, avec une alerte pour confirmer le changement de valeur: jsbin.com/elovo/2/edit
Andy E
Andy, merci beaucoup pour l'exemple. J'ai exécuté le code mentionné ci-dessus et il fonctionne exactement comme il est censé être. Et l'alerte confirme en effet que la valeur a été modifiée. J'avais ouvert la source de la page en utilisant la fonction "Afficher la source de la page" de Firefox. Et dans la source de la page, il affiche toujours l'ancienne valeur et non la nouvelle valeur (même pour le code dans le pastebin mentionné ci-dessus). Mais, la boîte d'alerte confirme la valeur modifiée. Donc, je suppose que c'est un problème de Firefox (ou est-ce que je suis trop stupide et néglige quelque chose d'important?). Encore une fois, merci pour votre temps :)
texens
2
@texens: pas de problème. Je suggérerais d'utiliser un outil de débogage approprié, Firebug si vous utilisez Firefox, au lieu de visualiser la source. Le comportement de "afficher la source" est plus ou moins le même dans tous les navigateurs, et affichera le code source téléchargé et non modifié de la page.
Andy E
2
Je ne pense pas que le problème soit avec Firefox ou un outil spécifique autant que dans la façon dont le HTML modifié est rendu et affiché. J'ai la même situation que l'OP, sauf qu'il y a un peu plus de jQuery impliqué. Dans mon cas, comme dans celui-ci, le code fonctionne correctement - l'événement de clic met correctement à jour une entrée de type «caché» - mais Firebug n'affiche pas les valeurs mises à jour pour les champs cachés, même si elles ont été mises à jour et jQuery peut y accéder , et même si les valeurs mises à jour pour les champs visibles s'affichent correctement dans Firebug.
Dave DuPlantis
62

Si vous rencontrez des difficultés pour définir la valeur d'un champ masqué parce que vous lui transmettez un identifiant, voici la solution:

Au lieu de $("#hidden_field_id").val(id)simplement faire $("input[id=hidden_field_id]").val(id). Je ne sais pas quelle est la différence, mais cela fonctionne.

Chuck Callebs
la source
3
Attention, cela peut être très lent dans les anciens navigateurs ( learn.jquery.com/using-jquery-core/selecting-elements )
Alex Klaus
Ne fonctionne pas pour moi, navigateur - Chrome 48. Je ne sais pas pourquoi
Gurpreet Singh
26

Enfin, j'ai trouvé une solution et c'est simple:

document.getElementById("texens").value = "tinkumaster";

Fonctionne comme un charme. Aucune idée pourquoi jQuery ne revient pas à cela.

zamber
la source
Techniquement, cela utilise le DOM et non jQuery, mais c'est simple et fonctionne (j'ai essayé presque toutes les réponses ici pour mon cas de modification de la valeur au moment de la soumission du formulaire, et elles ne fonctionnaient pas).
hlongmore
C'est pourquoi j'ai posté cette réponse;). Heureux que cela ait aidé. Quant à jQuery, ils ont un correctif potentiel ici github.com/jquery/jquery/blob/ ... mais ce n'est que pour type="radio". Je suis trop paresseux pour signaler un problème, d'autant plus que j'ai résolu ce problème il y a 4 ans. Je suis également déchiré si cela doit être corrigé dans jQuery - peut-être est-il implémenté de cette façon pour protéger les enfants jQuery d'eux-mêmes? Qui sait ...
zamber
1
La solution jQuery n'a pas non plus fonctionné pour moi. Dû aller avec Vanilla JS.
Varun Sharma le
17

J'ai eu le même problème. curieusement, google chrome et peut-être d'autres (pas sûr) n'ont pas aimé

$("#thing").val(0);

input type="hidden" id="thing" name="thing" value="1" />

(pas de changement)

$("#thing").val("0");

input type="hidden" id="thing" name="thing" value="1" />

(pas de changement)

mais cela fonctionne !!!!

$("#thing").val("no");

input type="hidden" id="thing" name="thing" value="no" />

CHANGEMENTS!!

$("#thing").val("yes");

input type="hidden" id="thing" name="thing" value="yes" />

CHANGEMENTS!!

doit être une "chaîne de caractères"

mr.zaga
la source
2
Cela a aussi résolu le problème pour moi. J'ai fini par utiliser .val(' 0'), qui est correctement analysé par parseInten Javascript ainsi qu'en int()Python, mon backend.
rattray
10 
$('input[name=hidden_field_name]').val('newVal');

travaillé pour moi, quand ni

$('input[id=hidden_field_id]').val('newVal');

ni

$('#hidden_field_id').val('newVal');

fait.

Dirk Seifert
la source
9

.val n'a pas fonctionné pour moi, car je saisis l'attribut de valeur côté serveur et la valeur n'a pas toujours été mise à jour. alors j'ai utilisé:

var counter = 0;
$('a.myClickableLink').click(function(event){
   event.preventDefault();
   counter++;

   ...
   $('#myInput').attr('value', counter);
}

J'espère que ça aide quelqu'un.

Sophie
la source
C'est la réponse que j'aime. L'utilisation de la fonction attr évite toutes les contorsions mentionnées ci-dessus et fait ce qu'il faut.
7

En fait, c'est un problème permanent. Alors qu'Andy a raison à propos de la source téléchargée, .val (...) et .attr ('value', ...) ne semblent pas modifier réellement le code HTML. Je pense que c'est un problème javascript et non un problème jquery. Si vous aviez utilisé Firebug, vous auriez même eu la même question. Bien qu'il semble que si vous soumettez le formulaire avec les valeurs modifiées, il passera, le html ne change pas. J'ai rencontré ce problème en essayant de créer un aperçu avant impression du formulaire modifié (en faisant [form] .html ()) il copie tout correctement, y compris toutes les modifications sauf valeurs changent. Ainsi, mon aperçu avant impression modal est quelque peu inutile ... ma solution de contournement peut être de `` créer '' un formulaire caché contenant les valeurs qu'ils ont ajoutées, ou de générer l'aperçu indépendamment et de faire chaque modification que l'utilisateur fait également modifier l'aperçu. Les deux ne sont pas optimaux, mais à moins que quelqu'un ne comprenne pourquoi le comportement de définition des valeurs ne change pas le code HTML (dans le DOM, je suppose), il devra le faire.


la source
+1 de moi! Vous avez raison. value et .val () a des problèmes lors de sa mise à jour à l'aide de jQuery. Avez-vous trouvé quelque chose aux alentours?
NullPointer
4

J'avais le même problème et j'ai découvert ce qui n'allait pas. J'ai eu le HTML défini comme

<form action="url" method="post">
    <input type="hidden" id="email" />
<form>
<script>
    function onsomeevent()
    {
       $("#email").val("[email protected]");
    }
</script>

La lecture des valeurs du formulaire sur le serveur aboutissait toujours à un e-mail vide. Après m'être gratté la tête (et de nombreuses recherches), j'ai réalisé que l'erreur ne définissait pas correctement le formulaire / l'entrée. En modifiant l'entrée (comme indiqué ci-dessous), cela a fonctionné comme un charme

<input type="hidden" id="email" name="email" />

Ajout à ce fil au cas où d'autres auraient le même problème.

Jardalu
la source
3

Dans mon cas, j'utilisais une non-chaîne (entier) comme paramètre de val () qui ne fonctionne pas, l'astuce est aussi simple que

$("#price").val('' + price);
Shawn
la source
2

L'utilisation val()n'a pas fonctionné pour moi. J'ai dû utiliser .attr()partout. J'avais également différents types d'entrées et je devais être assez explicite dans le cas des cases à cocher et des menus de sélection.

Mettre à jour le champ de texte

$('#model_name').attr('value',nameVal);

Mettre à jour l'image à côté de l'entrée du fichier

$('#img-avatar').attr('src', avatarThumbUrl);

Mettre à jour le booléen

if (isActive) {
    $('#model_active').attr('checked',"checked");
} else {
    $('#model_active').attr('checked', null) ;
}

Mettre à jour la sélection (avec un nombre ou une chaîne)

$('#model_framerate').children().each(function(i, el){
    var v = $(el).val();
    if (v === String(framerateVal)) { 
        $(el).attr('selected','selected');
    } else {
        $(el).attr('selected',null);
    }
}
Julian Mann
la source
1

Un autre attrape ici a gaspillé un peu de mon temps, alors j'ai pensé que je passerais le bout. J'avais un champ caché que j'avais donné un identifiant. et des []crochets dans le nom (en raison de l'utilisation avec struts2) et le sélecteur $("#model.thefield[0]")ne trouverait pas mon champ caché. Le changement de nom de l'ID pour ne pas utiliser les points et les crochets a fait que le sélecteur a commencé à fonctionner. Donc, à la fin, je me suis retrouvé avec un identifiant de à la model_the_field_0place et le sélecteur a bien fonctionné.

utilisateur738048
la source
C'est parce que votre sélecteur $("#model.thefield[0]")est interprété comme: un élément avec idégal à model, un css classde thefieldet certains attributeappelés 0... Si vous souhaitez utiliser ces caractères dans votre idutilisation de l'approche suggérée par Chuck Callebs dans sa réponse . En HTML5, il idpeut s'agir de n'importe quelle chaîne qui n'est pas vide et ne contient aucun caractère d'espace ( référence ).
Oliver
1

Utilisation de l'ID:

$('input:hidden#texens').val('tinkumaster');

Utilisation de la classe:

$('input:hidden.many_texens').val('tinkumaster');
Arman H
la source
0

Si vous recherchez haml, c'est la réponse pour un champ caché pour définir une valeur sur un champ caché comme 

%input#forum_id.hidden

Dans votre jquery, convertissez simplement la valeur en chaîne, puis ajoutez-la en utilisant la propriété attr dans jquery. espérons que cela fonctionne également dans d'autres langues.

$('#forum_id').attr('val',forum_id.toString());
Yarrabhumi
la source
-1 
<javascript>


slots=''; hidden=''; basket = 0;

    cost_per_slot = $("#cost_per_slot").val();
    //cost_per_slot = parseFloat(cost_per_slot).toFixed(2)

    for (i=0; i< check_array.length; i++) {
        slots += check_array[i] + '\r\n';
        hidden += check_array[i].substring(0, 8) + '|';
        basket = (basket + parseFloat(cost_per_slot));
    }

    // Populate the Selected Slots section
    $("#selected_slots").html(slots);

    // Update hidden slots_booked form element with booked slots
    $("#slots_booked").val(hidden);     

    // Update basket total box
    basket = basket.toFixed(2);
    $("#total").html(basket);

Caroline
la source
-1

Utilisez simplement la syntaxe ci-dessous get and set

AVOIR

//Script 
var a = $("#selectIndex").val();

ici une variable contiendra la valeur de hiddenfield (selectindex)

Du côté serveur

<asp:HiddenField ID="selectIndex" runat="server" Value="0" />

ENSEMBLE

var a =10;
$("#selectIndex").val(a);
mzonerz
la source
L'OP demande pourquoi le code comme le vôtre ne fonctionne pas pour lui, c'est donc inutile pour cette question.
ProfK
-1

Quiconque a du mal avec cela, il existe un moyen très simple de le faire avec jQuery:

<input type="search" placeholder="Search" value="" maxlength="256" id="q" name="q" style="width: 300px;" onChange="$('#ADSearch').attr('value', $('#q').attr('value'))"><input type="hidden" name="ADSearch" id="ADSearch" value="">

Cela définit la valeur du champ masqué lorsque le texte est tapé dans l'entrée visible à l'aide de l'événement onChange. Utile (comme dans mon cas) lorsque vous souhaitez transmettre une valeur de champ à un formulaire "Recherche avancée" et ne pas forcer l'utilisateur à retaper sa requête de recherche.

Joyrex
la source