Valeur de consigne de champ caché sous une forme en utilisant jQuery « .val () » ne fonctionne pas

StackOverflow https://stackoverflow.com/questions/2979772

  •  24-10-2019
  •  | 
  •  

Question

J'ai essayé de définir la valeur d'un champ caché sous une forme 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 « texte », cela fonctionne sans aucun problème. Mais, en changeant le type d'entrée « cachée », 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 aussi essayé la solution suivante, en définissant le type d'entrée « texte », puis en utilisant un « display: none » style pour la zone de saisie. Mais, cela ne fonctionne pas aussi! Il semble jQuery a des réglages cachés ou champs trouble entrée invisible.

Toutes les idées? Y at-il une solution de contournement pour ce qui fonctionne réellement?

Était-ce utile?

La solution

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

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

attributs d'identification doit être unique sur une page Web, assurez-vous que le vôtre sont comme cela peut contribuer à tous les problèmes que vous rencontrez, et en spécifiant un plus sélecteur compliqué ralentit simplement les choses et ne semble pas aussi propre.

Exemple http://jsbin.com/elovo/edit , en utilisant votre code d'exemple à < a href = "http://jsbin.com/elovo/2/edit" rel = "noreferrer"> http://jsbin.com/elovo/2/edit

Autres conseils

Si vous éprouvez des difficultés pour établir la valeur d'un champ caché parce vous passez une carte d'identité à elle, c'est la solution:

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

Enfin, je l'ai trouvé une solution et il est simple: 

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

fonctionne comme un charme. Aucune idée pourquoi jQuery ne tombe pas revenir.

J'ai eu le même problème. assez curieusement google chrome et peut-être d'autres (pas sûr) ne l'ont pas comme 

$("#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 "chose de chaîne" 

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

travaillé pour moi, lorsque ni 

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

ni 

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

fait.

.val ne fonctionnait pas pour moi, parce que je suis preneuse du côté du serveur d'attribut de valeur et la valeur n'a pas été toujours mis à jour. si i utilisé: 

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

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

il aide quelqu'un l'espoir.

En fait, c'est un problème permanent. Alors que Andy est juste sur la source téléchargée, .val (...) et .attr ( « valeur », ...) ne semblent pas réellement modifier le code HTML. Je pense que cela est un problème de javascript et pas un problème jquery. Si vous aviez utilisé Firebug vous même avez eu la même question. Bien qu'il semble que si vous soumettez le formulaire avec les valeurs modifiées, il passera par le html ne change pas. Je suis tombé sur cette question en essayant de créer un aperçu avant impression de la forme modifiée (faisant [former] .html ()) il copie tout d'accord, y compris toutes les modifications sauf valeurs des changements. Ainsi, mon aperçu avant impression modale est un peu inutile ... ma solution de contournement peut devoir être à « construire » une forme cachée contenant les valeurs qu'ils ont ajoutées, ou générer indépendamment l'aperçu et faire chaque modification que l'utilisateur effectue modifier également l'aperçu. Les deux sont inoptimal, mais à moins que les chiffres de quelqu'un pourquoi le comportement mise en valeur ne change pas le html (dans les DOM je suppose), il devra le faire.

Je faisais la même question, et j'ai découvert ce qui était faux. J'avais le code HTML défini comme 

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

La lecture des valeurs forme sur le serveur toujours entraîné par courrier électronique comme vide. Après avoir gratté ma tête (et de nombreuses recherche), je me suis rendu l'erreur n'a pas été définir la forme / entrée correctement. Sur modifing l'entrée (comme indiqué à côté), il a travaillé comme un charme 

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

Ajout à ce fil dans d'autres cas ont le même problème.

Dans mon cas, je travaillais avec un non-string (entier) comme paramètre de val () qui ne fonctionne pas, l'affaire est tout aussi simple que 

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

Utilisation val() ne fonctionne pas pour moi. Je devais utiliser .attr() partout. Aussi j'eu différents types d'intrants et a dû être assez explicite dans le cas des cases à cocher et sélectionner les menus.

Mise à jour textfield 

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

Mise à jour l'image suivante à l'entrée de fichier 

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

Mise à jour booléenne 

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

sélectionnez Mise à jour (avec le numéro ou la 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);
    }
}

Une autre Gotcha ici perdu une partie de mon temps, donc je pensais que je passerais le long de la pointe. J'ai eu un champ caché que j'ai donné une carte d'identité qui avait. et les supports de [] au nom (en raison d'une utilisation avec struts2) et le sélecteur $("#model.thefield[0]") ne trouverait pas mon champ caché. Renommant le id de ne pas utiliser les périodes et entre parenthèses fait le sélecteur pour commencer à travailler. Donc, à la fin je me suis retrouvé avec un id de model_the_field_0 à la place et le sélecteur a bien fonctionné.

En utilisant ID: 

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

En utilisant la classe: 

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

Il suffit de syntaxe ci-dessous l'utilisation get et set

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);

Si vous recherchez haml alors c'est la réponse pour le champ caché à la valeur ensemble à un champ caché comme 

%input#forum_id.hidden

Dans votre jquery simplement convertir la valeur en chaîne, puis append à l'aide d'attr propriété jquery. espère que cela fonctionne aussi dans d'autres langues aussi. 

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

<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);

Quelqu'un d'autre qui a du mal avec cela, il y a un moyen « en ligne » très simple à 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="">

Ceci définit comme le texte est tapé la valeur du champ caché dans l'entrée visible à l'aide de l'événement onChange. Utile (comme dans mon cas) où vous voulez transmettre une valeur de champ à un formulaire « Recherche avancée » et pas forcer l'utilisateur de saisir à nouveau leur requête de recherche.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top