wake-up-neo.com

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

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

Hier ist ein Beispielcode, der das Problem erklärt. Wenn ich den Eingabetyp auf "Text" behalte, funktioniert es problemlos. Das Ändern des Eingabetyps auf "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 ausprobiert, indem ich den Eingabetyp auf "text" gesetzt und dann den Stil "display: none" für das Eingabefeld verwendet habe. Das scheitert aber auch! Es scheint, dass jQuery Probleme hat, versteckte oder unsichtbare Eingabefelder zu setzen.

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

182
texens

:text schlägt bei einer Eingabe mit dem Typwert hidden fehl. Es ist auch viel effizienter, nur zu verwenden:

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

ID-Attribute sollten auf einer Webseite eindeutig sein. Vergewissern Sie sich, dass Ihre Attribute eindeutig sind, da dies zu Problemen führen kann. Die Angabe eines komplizierteren Selektors verlangsamt die Arbeit und sieht nicht so ordentlich aus.

Beispiel unter http://jsbin.com/elovo/edit . Verwenden Sie Ihren Beispielcode unter http://jsbin.com/elovo/2/edit

296
Andy E

Wenn Sie Probleme beim Festlegen des Werts eines ausgeblendeten Felds haben, weil Sie ihm eine ID übergeben, ist dies die Lösung:

Anstelle von $("#hidden_field_id").val(id) nur $("input[id=hidden_field_id]").val(id) ausführen. Nicht sicher, was der Unterschied ist, aber es funktioniert.

60
Chuck Callebs

Schließlich 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.

25
zamber

Ich hatte das gleiche problem seltsamerweise google chrome und möglicherweise andere (nicht sicher) mochten 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 "Saitensache" sein

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

arbeitete für mich, als keiner

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

noch

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

tat.

10
Dirk Seifert

.val hat bei mir nicht funktioniert, weil ich greife nach dem Wert Attribut Server und der Wert nicht immer aktualisiert wurde. Also habe ich benutzt:

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

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

Hoffe es hilft jemandem.

9
Sophie

Eigentlich ist das ein andauerndes Problem. Während Andy mit der heruntergeladenen Quelle recht hat, scheinen .val (...) und .attr ('value', ...) das HTML nicht wirklich zu verändern. Ich denke, das ist ein Javascript-Problem und nicht ein jquery-Problem. Wenn Sie selbst Firebug verwendet hätten, hätten Sie die gleiche Frage. Während es scheint, dass, wenn Sie das Formular mit den geänderten Werten senden, es durchläuft, ändert sich das HTML nicht. Ich bin auf dieses Problem gestoßen, als ich versucht habe, eine Druckvorschau des geänderten Formulars zu erstellen ([form] .html ()). Es kopiert alles in Ordnung, einschließlich aller Änderungen außer Wertänderungen. Daher ist meine modale Druckvorschau ein wenig nutzlos. Meine Problemumgehung könnte darin bestehen, ein verborgenes Formular mit den von ihnen hinzugefügten Werten zu erstellen oder die Vorschau unabhängig zu generieren und bei jeder Änderung, die der Benutzer vornimmt, auch die Vorschau zu ändern. Beide sind inoptimal, aber es sei denn, jemand weiß, warum das Verhalten beim Setzen von Werten das HTML nicht ändert (im DOM nehme ich an), muss es tun.

7
user444777

Ich hatte das gleiche Problem und fand heraus, was nicht stimmte. Ich hatte das HTML 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 die E-Mail leer war. Nachdem ich mir am Kopf gekratzt hatte (und zahlreiche Suchanfragen), wurde mir klar, dass der Fehler darin bestand, die Form/Eingabe nicht richtig zu definieren. Beim Ändern der Eingabe (wie im Folgenden gezeigt) hat es wie ein Zauber gewirkt

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

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

4
Jardalu

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

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

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

Textfeld aktualisieren

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

Bild neben Dateieingabe aktualisieren

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

pdate boolean

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

pdate select (mit Nummer oder Zeichenkette)

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

ID verwenden:

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

Mit Klasse:

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

Ein anderer Fall 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 Auswahl $("#model.thefield[0]") konnten mein verstecktes Feld nicht finden. Das Umbenennen der ID, um die Punkte und Klammern nicht zu verwenden, bewirkte, dass der Selektor zu arbeiten begann. Am Ende erhielt ich stattdessen die ID model_the_field_0, und der Selektor funktionierte einwandfrei.

1
user738048

Verwenden Sie einfach die unten stehende Syntax get und set

GET

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

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

Serverseite

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

SET

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

Wenn Sie nach haml suchen, ist dies die Antwort für ein ausgeblendetes Feld, um einen Wert für ein ausgeblendetes Feld wie festzulegen

%input#forum_id.hidden

Konvertieren Sie in Ihrer jquery einfach den Wert in einen String und hängen Sie ihn mit der Eigenschaft attr in jquery an. hoffe das klappt auch in anderen sprachen auch.

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