web-dev-qa-db-fra.com

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

J'ai essayé de définir la valeur d'un champ masqué dans un formulaire à l'aide de jQuery, mais sans succès.

Voici un exemple de code qui explique le problème. Si je garde le type d'entrée à "texte", cela fonctionne sans 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 suivante en définissant le type de saisie sur "texte", puis en utilisant un style "display: none" pour la zone de saisie. Mais cela échoue aussi! Il semble que jQuery rencontre des difficultés pour configurer les champs de saisie cachés ou invisibles.

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

jquerysethidden-fields
182
texens

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

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

Les attributs d'ID doivent être uniques sur une page Web. Assurez-vous que les vôtres le sont, car cela pourrait contribuer à vos problèmes, et la spécification d'un sélecteur plus complexe ralentit les choses et n'a pas l'air aussi soignée.

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

296
Andy E

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

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

60
Chuck Callebs

Enfin, j'ai trouvé une solution simple:

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

Fonctionne comme un charme. On ne sait pas pourquoi jQuery ne retombe pas sur cela.

25
zamber

J'ai eu le même problème. bizarrement, google chrome et éventuellement d’autres (pas sûr) n’a 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 ça marche !!!!

$("#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 "ficelle"

18
mr.zaga
$('input[name=hidden_field_name]').val('newVal');

a travaillé pour moi, quand ni

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

ni

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

fait.

10
Dirk Seifert

.val n'a pas fonctionné pour moi, car je récupère l'attribut value côté serveur et la valeur n'a pas toujours été mise à jour. donc 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.

9
Sophie

En fait, c'est un problème persistant. Alors que Andy a raison sur la source téléchargée, .val (...) et .attr ('value', ...) ne semblent pas réellement modifier le code HTML. Je pense que ceci 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. Il semble que si vous soumettez le formulaire avec les valeurs modifiées, le code 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 ()), tout est correct, y compris tous les changements sauf les changements. Ainsi, mon aperçu d’impression modal est quelque peu inutile… Ma solution de contournement pourrait consister à "construire" un formulaire masqué contenant les valeurs qu’ils ont ajoutées, ou à générer l’aperçu de manière indépendante et à apporter chaque modification de la part de l’utilisateur. Les deux ne sont pas optimaux, mais à moins que quelqu'un ne détermine pourquoi le comportement de définition des valeurs ne modifie pas le code HTML (dans le DOM, je suppose), il devra le faire.

7
user444777

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>

En lisant les valeurs du formulaire sur le serveur, le courrier électronique était toujours 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/la saisie. Lors de la modification de l'entrée (comme indiqué ci-après), cela a fonctionné comme un charme

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

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

4
Jardalu

Dans mon cas, j’utilisais une valeur non-string (entier) comme paramètre de val (), ce qui ne fonctionne pas, le truc est aussi simple que

$("#price").val('' + price);
3
Shawn

Utiliser val() n'a pas fonctionné pour moi. Je devais utiliser .attr() partout. De plus, j'avais différents types d'entrées et devais être assez explicite dans le cas des cases à cocher et des menus sélectionnés.

Mise à jour du champ

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

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

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

Mise à jour booléenne

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

Mise à jour sélectionner (avec un numéro 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);
    }
}
2
Julian Mann

Utilisation de l'ID:

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

Utilisation de la classe:

$('input:hidden.many_texens').val('tinkumaster');
1
Arman H

Un autre casse-tête ici m'a fait perdre un peu de mon temps, alors j'ai pensé transmettre le pourboire. J'ai eu un champ caché, j'ai donné un identifiant qui avait. et [] entre crochets dans le nom (à utiliser avec struts2) et le sélecteur $("#model.thefield[0]") ne trouverait pas mon champ caché. Renommer l'id pour ne pas utiliser les points et les crochets a amené le sélecteur à commencer à fonctionner. Donc au final, je me suis retrouvé avec un identifiant de model_the_field_0 à la place et le sélecteur a bien fonctionné.

1
user738048

tilisez simplement la syntaxe ci-dessous pour obtenir et définir

GET

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

ici une variable contiendra la valeur de hiddenfield (selectindex)

côté serveur

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

SET

var a =10;
$("#selectIndex").val(a);
0
mzonerz

Si vous recherchez haml, c’est la réponse du champ masqué pour définir la valeur sur un champ masqué tel que

%input#forum_id.hidden

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

$('#forum_id').attr('val',forum_id.toString());
0
Yarrabhumi