206 votes

Définir la valeur d'un champ caché dans un formulaire en utilisant ".val()" de jQuery ne fonctionne pas

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 "text", cela fonctionne sans problème. Mais si je change le type d'entrée en "hidden", ça 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 suivante, en définissant le type de saisie comme "texte" et en utilisant un style "display:none" pour la zone de saisie. Mais, cela ne fonctionne pas non plus ! Il semble que jQuery ait des difficultés à définir des champs de saisie cachés ou invisibles.

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

345voto

Andy E Points 132925

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

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

Les attributs ID doivent être uniques sur une page Web. Assurez-vous que les vôtres le sont, car cela peut contribuer aux problèmes que vous rencontrez, et spécifier un sélecteur plus compliqué ne fait que ralentir les choses et ne donne pas un aspect aussi soigné.

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

0 votes

Andy, merci pour la réponse rapide. J'ai d'abord essayé avec le "#texens", puis avec "#input:hidden#texens" et aucun des deux n'a semblé fonctionner. Lorsque j'ai changé le type d'entrée dans le formulaire 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 caché ne soient pas modifiées.

1 votes

@texens : Je soupçonne que le problème est ailleurs. Comme vous pouvez le voir dans l'exemple que j'ai cité, val() fonctionne très bien sur l'entrée caché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

0 votes

Andy, merci beaucoup pour l'exemple. J'ai exécuté le code mentionné ci-dessus et il fonctionne exactement comme il est censé l'être. Et l'alerte confirme effectivement que la valeur a été modifiée. J'avais ouvert la source de la page en utilisant la fonction "View Page Source" de Firefox. Et dans la source de la page, l'ancienne valeur est toujours affichée et non la nouvelle (même pour le code dans le pastebin mentionné ci-dessus). Mais, la boîte d'alerte confirme la valeur modifiée. Je suppose donc qu'il s'agit d'un problème lié à Firefox (ou suis-je trop stupide et ai-je oublié quelque chose d'important ?) Encore une fois, merci pour votre temps :)

65voto

Chuck Callebs Points 8084

Si vous avez des difficultés à définir la valeur d'un champ caché parce que vous lui transmettez un ID, voici la solution :

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

3 votes

Attention, cela peut être très lent dans les anciens navigateurs ( learn.jquery.com/using-jquery-core/selecting-elements )

0 votes

Cela ne fonctionne pas pour moi, navigateur - Chrome 48. Je ne sais pas pourquoi

27voto

zamber Points 344

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

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

Fonctionne comme un charme. Je ne comprends pas pourquoi jQuery ne se rabat pas sur cette méthode.

0 votes

Techniquement, cela utilise le DOM et non jQuery, mais c'est simple et cela fonctionne (j'ai essayé presque toutes les réponses ici pour mon cas de changement de valeur au moment de la soumission du formulaire, et elles ne fonctionnaient pas).

0 votes

C'est pourquoi j'ai posté cette réponse ;). Heureux que cela ait aidé. Pour ce qui est de jQuery, ils ont une solution potentielle ici github.com/jquery/jquery/blob/ mais c'est seulement pour type="radio" . Je suis trop paresseux pour signaler un problème, surtout que j'ai résolu ce problème il y a 4 ans. Je ne sais pas non plus si ce problème devrait être corrigé dans jQuery - il est peut-être implémenté de cette façon pour protéger les enfants de jQuery contre eux-mêmes ? Qui sait...

1 votes

La solution jQuery n'a pas fonctionné pour moi non plus. J'ai dû opter pour Vanilla JS.

18voto

mr.zaga Points 81

J'ai eu le même problème. Curieusement, Google Chrome et peut-être d'autres (je ne suis 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 un "truc de cordes"

2 votes

Cela a réglé le problème pour moi aussi. J'ai fini par utiliser .val(' 0') qui est correctement interprété par parseInt en Javascript ainsi que int() en Python, mon backend.

7voto

riverc Points 71

En fait, c'est un problème permanent. Bien qu'Andy ait raison au sujet de la source téléchargée, .val(...) et .attr('value',...) ne semblent pas modifier réellement le html. Je pense que c'est un problème de javascript et pas un problème de jquery. Si vous aviez utilisé firebug même vous auriez eu la même question. Bien qu'il semble que si vous soumettez le formulaire avec les valeurs modifiées, il passe, le html ne change pas. Je me suis heurté à ce problème en essayant de créer un aperçu avant impression du formulaire modifié (en utilisant [form].html()) ; tout est bien copié, y compris les modifications. sauf les changements de valeurs. Ainsi, mon aperçu modal d'impression est quelque peu inutile... Ma solution de contournement pourrait être de 'construire' un formulaire caché contenant les valeurs qu'ils ont ajoutées, ou de générer l'aperçu indépendamment et de faire en sorte que chaque modification apportée par l'utilisateur modifie également l'aperçu. Ces deux solutions ne sont pas optimales, mais à moins que quelqu'un ne trouve pourquoi le comportement de définition des valeurs ne modifie pas le html (dans le DOM, je suppose), il faudra s'en contenter.

0 votes

+1 de ma part ! Vous avez raison. value et .val() ont un problème lors de leur mise à jour avec jQuery. Avez-vous trouvé une solution ?

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X