Das Festlegen des Werts eines ausgeblendeten Felds in einem Formular mithilfe von ".val ()" von jQuery funktioniert nicht

188

Ich habe versucht, den Wert eines ausgeblendeten Felds in einem Formular mit jQuery festzulegen, aber ohne Erfolg.

Hier ist ein Beispielcode, der das Problem erklärt. Wenn ich den Eingabetyp auf "Text" behalte, funktioniert dies ohne Probleme. Das Ändern des Eingabetyps in "versteckt" funktioniert jedoch nicht!

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

Ich habe auch die folgende Problemumgehung versucht, indem ich den Eingabetyp auf "Text" gesetzt und dann einen "Anzeige: Keine" -Stil für das Eingabefeld verwendet habe. Das scheitert aber auch! Es scheint, dass jQuery Probleme beim Festlegen versteckter oder unsichtbarer Eingabefelder hat.

Irgendwelche Ideen? Gibt es eine Problemumgehung dafür, die tatsächlich funktioniert?

jquery set hidden-fields texens
quelle

Antworten:

316

:textschlägt für eine Eingabe mit dem Typwert von fehl hidden. Es ist auch viel effizienter, nur zu verwenden:

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

ID-Attribute sollten auf einer Webseite eindeutig sein. Stellen Sie sicher, dass Ihre Attribute vorhanden sind, da dies zu Problemen führen kann. Wenn Sie einen komplizierteren Selektor angeben, werden die Dinge nur verlangsamt und sehen nicht so ordentlich aus.

Beispiel unter http://jsbin.com/elovo/edit unter Verwendung Ihres Beispielcodes unter http://jsbin.com/elovo/2/edit

Andy E.
quelle
Andy, danke für die schnelle Antwort. Ich habe es tatsächlich zuerst mit den "#texens" und dann mit "#input: hidden # texens" versucht und keiner von beiden schien zu funktionieren. Als ich den Eingabetyp im Formular von "versteckt" in "Text" und "#input: hidden: texens" in "#input: text: texens" änderte, funktionierte dies ohne Probleme. Das "#input: text # texens" war ein Tippfehler oben und sollte "#input: hidden # texens" oder einfach "#texens" sein, wie Sie gerade erwähnt haben. Es scheint also, dass die Werte des versteckten Feldes nicht geändert werden.
Texens
1
@texens: Ich würde vermuten, dass das Problem woanders liegt. Wie Sie dem Beispiel entnehmen können, mit dem ich verlinkt habe, val()funktioniert die versteckte Eingabe einwandfrei, indem der Wert von "nicht geändert" in "geändert" geändert wird. Ich habe das Beispiel so überarbeitet, dass es den oben eingefügten Code enthält, mit einer Warnung zur Bestätigung der Wertänderung: jsbin.com/elovo/2/edit
Andy E.
Andy, vielen Dank für das Beispiel. Ich habe den oben genannten Code ausgeführt und er funktioniert genau so, wie er sein soll. Und die Warnung bestätigt tatsächlich, dass der Wert geändert wurde. Ich habe die Seitenquelle mit der Funktion "Seitenquelle anzeigen" von Firefox geöffnet. In der Seitenquelle wird weiterhin der alte und nicht der neue Wert angezeigt (auch für den oben erwähnten Code im Pastebin). Das Warnfeld bestätigt jedoch den geänderten Wert. Ich gehe also davon aus, dass dies ein Firefox-Problem ist (oder bin ich zu dumm und übersehen etwas Wichtiges?). Nochmals
vielen
2
@texens: kein Problem. Ich würde empfehlen, ein geeignetes Debugging-Tool, Firebug, zu verwenden, wenn Sie Firefox verwenden, anstatt die Quelle anzuzeigen. Das Verhalten von "Quelltext anzeigen" ist in allen Browsern mehr oder weniger gleich und zeigt den heruntergeladenen, unveränderten Quellcode der Seite an.
Andy E
2
Ich glaube nicht, dass das Problem bei Firefox oder einem bestimmten Tool liegt, sondern vielmehr bei der Darstellung und Anzeige von modifiziertem HTML. Ich habe die gleiche Situation wie das OP, außer dass es viel mehr jQuery gibt. In meinem Fall funktioniert der Code wie in diesem Fall ordnungsgemäß - das Klickereignis aktualisiert eine Eingabe vom Typ "versteckt" korrekt -, aber Firebug zeigt die aktualisierten Werte für ausgeblendete Felder nicht an, obwohl sie aktualisiert wurden und jQuery darauf zugreifen kann und obwohl aktualisierte Werte für sichtbare Felder in Firebug korrekt angezeigt werden.
Dave DuPlantis
62

Wenn Sie Probleme haben, den Wert eines ausgeblendeten Felds festzulegen, weil Sie ihm eine ID übergeben, ist dies die Lösung:

Anstatt es $("#hidden_field_id").val(id)einfach zu tun $("input[id=hidden_field_id]").val(id). Ich bin mir nicht sicher, was der Unterschied ist, aber es funktioniert.

Chuck Callebs
quelle
3
Achtung, dies kann in älteren Browsern sehr langsam sein ( learn.jquery.com/using-jquery-core/selecting-elements )
Alex Klaus
Funktioniert nicht für mich, Browser - Chrome 48. Ich weiß nicht warum
Gurpreet Singh
26

Endlich habe ich eine Lösung gefunden und es ist eine einfache:

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

Klappt wunderbar. Keine Ahnung, warum jQuery nicht darauf zurückgreift.

Zamber
quelle
Technisch gesehen verwendet dies das DOM nicht jQuery, aber es ist einfach und funktioniert (ich habe hier fast jede Antwort ausprobiert, um den Wert zum Zeitpunkt der Formularübermittlung zu ändern, und sie funktionierten nicht).
Hlongmore
Deshalb habe ich diese Antwort gepostet;). Ich bin froh, dass es geholfen hat. Was jQuery betrifft, haben sie hier eine mögliche Lösung. Github.com/jquery/jquery/blob/…, aber es ist nur für type="radio". Ich bin zu faul, um ein Problem zu melden, insbesondere angesichts der Tatsache, dass ich dieses Problem vor 4 Jahren gelöst habe. Ich bin auch hin und her gerissen, wenn es in jQuery behoben werden sollte - möglicherweise ist es so implementiert, um jQuery-Kinder vor sich selbst zu schützen? Wer weiß ...
Zamber
1
Die jQuery-Lösung hat auch bei mir nicht funktioniert. Musste mit Vanilla JS gehen.
Varun Sharma
17

Ich hatte das gleiche Problem. Seltsamerweise mochten Google Chrome und möglicherweise andere (nicht sicher) nicht

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

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

(Keine Änderung)

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

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

(Keine Änderung)

aber das funktioniert !!!!

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

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

ÄNDERUNGEN!!

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

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

ÄNDERUNGEN!!

muss eine "String-Sache" sein

mr.zaga
quelle
2
Das hat es auch für mich behoben. Am Ende habe ich mein Backend verwendet .val(' 0'), das sowohl parseIntin Javascript als auch int()in Python korrekt analysiert wird .
Rattray
10 
$('input[name=hidden_field_name]').val('newVal');

arbeitete für mich, wenn keiner

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

Noch

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

tat.

Dirk Seifert
quelle
9

.val hat bei mir nicht funktioniert, weil ich die Server-Seite des Wertattributs greife und der Wert nicht immer aktualisiert wurde. Also habe ich verwendet:

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

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

Hoffe es hilft jemandem.

Sophie
quelle
Das ist die Antwort, die ich mag. Die Verwendung der attr-Funktion vermeidet alle oben genannten Verzerrungen und macht das Richtige.
7

Eigentlich ist dies ein anhaltendes Problem. Während Andy mit der heruntergeladenen Quelle Recht hat, scheinen .val (...) und .attr ('value', ...) das HTML nicht wirklich zu ändern. Ich denke, dies ist ein Javascript-Problem und kein JQuery-Problem. Wenn Sie sogar Firebug verwendet hätten, hätten Sie die gleiche Frage gehabt. Wenn Sie das Formular mit den geänderten Werten senden, wird es anscheinend nicht geändert. Ich bin auf dieses Problem gestoßen, als ich versucht habe, eine Druckvorschau des geänderten Formulars zu erstellen (do [form] .html ()). Es kopiert alles in Ordnung, einschließlich aller Änderungen außerWerte ändern sich. Daher ist meine modale Druckvorschau etwas nutzlos. Meine Problemumgehung muss möglicherweise darin bestehen, ein verstecktes Formular mit den hinzugefügten Werten zu erstellen oder die Vorschau unabhängig zu generieren und bei jeder vom Benutzer vorgenommenen Änderung auch die Vorschau zu ändern. Beide sind nicht optimal, aber wenn nicht jemand herausfindet, warum das Verhalten beim Setzen von Werten das HTML nicht ändert (im DOM gehe ich davon aus), muss es dies tun.


quelle
+1 von mir! Du hast recht. value und .val () haben Probleme beim Aktualisieren mit jQuery. Hast du etwas gefunden?
NullPointer
4

Ich hatte das gleiche Problem und fand heraus, was los war. Ich hatte den HTML-Code definiert als

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

Das Lesen der Formularwerte auf dem Server führte immer dazu, dass E-Mails leer waren. Nachdem ich mich am Kopf gekratzt hatte (und zahlreiche gesucht hatte), stellte ich fest, dass der Fehler darin bestand, das Formular / die Eingabe nicht richtig zu definieren. Beim Ändern der Eingabe (wie im Folgenden gezeigt) funktionierte es wie ein Zauber

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

Hinzufügen zu diesem Thread, falls andere das gleiche Problem haben.

Jardalu
quelle
3

In meinem Fall habe ich eine Nicht-Zeichenfolge (Ganzzahl) als Parameter von val () verwendet, was nicht funktioniert. Der Trick ist genauso einfach wie

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

Verwenden val()hat bei mir nicht funktioniert. Ich musste benutzen.attr() überall verwenden. Außerdem hatte ich verschiedene Arten von Eingaben und musste bei Kontrollkästchen und ausgewählten Menüs ziemlich explizit sein.

Textfeld aktualisieren

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

Aktualisieren Sie das Bild neben der Dateieingabe

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

Booleschen Wert aktualisieren

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

Update auswählen (mit Nummer oder String)

$('#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
quelle
1

Ein anderes Gotcha hier verschwendete einen Teil meiner Zeit, also dachte ich, ich würde die Spitze weitergeben. Ich hatte ein verstecktes Feld, das ich mit einem Ausweis versehen hatte. und []Klammern im Namen (aufgrund der Verwendung mit struts2) und der Selektor $("#model.thefield[0]")würde mein verstecktes Feld nicht finden. Durch das Umbenennen der ID, um die Punkte und Klammern nicht zu verwenden, begann der Selektor zu arbeiten. Am Ende hatte ich model_the_field_0stattdessen eine ID von und der Selektor funktionierte einwandfrei.

user738048
quelle
Das liegt daran, dass Ihr Selektor $("#model.thefield[0]")interpretiert wird als: ein Element mit idgleich model, ein CSS classvon thefieldund einige attributeaufgerufen 0... Wenn Sie diese Zeichen in Ihrem idverwenden möchten, verwenden Sie den von Chuck Callebs in seiner Antwort vorgeschlagenen Ansatz . In HTML5 idkann dies eine beliebige Zeichenfolge sein, die nicht leer ist und keine Leerzeichen ( Referenz ) enthält.
Oliver
1

ID verwenden:

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

Klasse verwenden:

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

Wenn Sie nach haml suchen, ist dies die Antwort für ein verstecktes Feld, um den Wert auf ein verstecktes Feld wie zu setzen 

%input#forum_id.hidden

In Ihrer jquery konvertieren Sie einfach den Wert in einen String und hängen ihn dann mit der attr-Eigenschaft in jquery an. hoffe das funktioniert auch in anderen sprachen auch.

$('#forum_id').attr('val',forum_id.toString());
Yarrabhumi
quelle
-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);

Carolina
quelle
-1

Verwenden Sie einfach die unten stehende Syntax get und set

BEKOMMEN

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

hier enthält eine Variable den Wert von hiddenfield (selectindex)

Serverseite

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

EINSTELLEN

var a =10;
$("#selectIndex").val(a);
mzonerz
quelle
Das OP fragt, warum der Code wie der Ihre für ihn nicht funktioniert, daher ist dies für diese Frage nutzlos.
ProfK
-1

Für alle anderen, die damit zu kämpfen haben, gibt es eine sehr einfache "Inline" -Methode, um dies mit jQuery zu tun:

<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="">

Dadurch wird der Wert des ausgeblendeten Felds festgelegt, wenn Text mithilfe des onChange-Ereignisses in die sichtbare Eingabe eingegeben wird. Hilfreich (wie in meinem Fall), wenn Sie einen Feldwert an ein Formular "Erweiterte Suche" übergeben möchten und den Benutzer nicht zwingen müssen, seine Suchabfrage erneut einzugeben.

Joyrex
quelle