Setzen Sie den Wert des versteckten Feldes in einem Formular mit JQuery's ".val ()" nicht funktioniert

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

  •  24-10-2019
  •  | 
  •  

Frage

Ich habe versucht, den Wert eines versteckten Feldes in einer Form mit JQuery festzulegen, jedoch ohne Erfolg.

Hier ist ein Beispielcode, der das Problem erklärt. Wenn ich den Eingangstyp auf "Text" aufbewahre, funktioniert er ohne Probleme. Wenn Sie jedoch den Eingangstyp in "versteckt" ändern, funktioniert 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" einstellte und dann einen "Display: None" -Stil für das Eingabefeld verwendete. Aber das scheitert auch! Es scheint, dass JQuery Probleme hat, versteckte oder unsichtbare Eingabefelder festzulegen.

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

War es hilfreich?

Lösung

:text fehlschlägt für eine Eingabe mit einem Typwert von 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, da dies möglicherweise zu Problemen beiträgt, die Sie haben, und die Angabe eines komplizierteren Selektors verlangsamt einfach die Dinge und sieht nicht so ordentlich aus.

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

Andere Tipps

Wenn Sie Probleme haben, den Wert eines versteckten Feldes festzulegen, weil Sie eine ID an sie weitergeben, ist dies die Lösung:

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

Schließlich habe ich eine Lösung gefunden und es ist einfach:

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

Klappt wunderbar. Keine Ahnung, warum JQuery nicht darauf zurückfällt.

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

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

.val hat bei mir nicht gearbeitet, weil Ich greife die Value Attribut -Serverseite auf Und der Wert wurde nicht immer aktualisiert. Also habe ich verwendet:

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

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

Hoffe es hilft jemandem.

Tatsächlich ist dies ein fortlaufendes Problem. Während Andy Recht mit der heruntergeladenen Quelle hat .val (...) und .Attr ('Wert', ...) scheint die HTML nicht tatsächlich zu ändern. Ich denke, das ist ein JavaScript -Problem und nicht Ein JQuery -Problem. Wenn Sie Firebug verwendet hätten, hätten Sie die gleiche Frage gehabt. Wenn Sie das Formular mit den geänderten Werten einreichen, die es durchläuft, ändert sich das HTML nicht. Ich bin auf dieses Problem gestoßen und habe versucht, eine Druckvorschau des geänderten Formulars (Ausführung [Form] .html ()) zu erstellen. Es kopiert alles in Ordnung, einschließlich aller Änderungen außer Werte ändert sich. Daher ist meine modale Druckvorschau etwas nutzlos ... meine Problemumgehung muss möglicherweise darin bestehen, ein verborgenes Formular zu erstellen, das die von ihnen hinzugefügten Werte enthält, oder die Vorschau unabhängig voneinander zu generieren und jede Änderung vorzunehmen, die der Benutzer auch die Vorschau vornimmt. Beide sind inoptimal, aber es sei denn, jemand findet heraus, warum das Verhalten des Wertschöpfungsverhaltens die HTML (im DOM, das ich annehme) nicht ändert.

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

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

Das Lesen der Formularwerte auf dem Server führte immer zu E -Mails als leer. Nachdem ich meinen Kopf gekratzt hatte (und zahlreiche Suche), stellte ich fest, dass der Fehler das Formular/die Eingabe nicht richtig definierte. Bei der Änderung der Eingabe (wie als nächstes gezeigt) funktionierte es wie ein Zauber

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

Hinzu kommt zu diesem Thread, falls andere das gleiche Problem haben.

In meinem Fall verwendete ich eine Nicht-String (Ganzzahl) als Parameter von Val (), der nicht funktioniert. Der Trick ist genauso einfach wie

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

Verwendung val() hat für mich nicht gearbeitet. Ich musste benutzen .attr() überall, überallhin, allerorts. Außerdem hatte ich verschiedene Arten von Eingaben und musste bei Kontrollkästchen und Menüs ausgewählt werden.

Textfield aktualisieren

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

Aktualisieren Sie das Bild neben der Dateieingabe

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

BOOLEAN UPDATE

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

Aktualisieren Sie SELECT (mit Nummer oder Zeichenfolge)

$('#model_framerate').children().each(function(i, el){
    var v = $(el).val();
    if (v === String(framerateVal)) { 
        $(el).attr('selected','selected');
    } else {
        $(el).attr('selected',null);
    }
}

Ein anderer Gotcha hier hat einen Teil meiner Zeit verschwendet, also dachte ich, ich würde am Tipp weitergeben. Ich hatte ein verstecktes Feld, das ich einen Ausweis gab, der es hatte. und [] Klammern im Namen (zu verwenden mit Struts2) und dem Selektor $("#model.thefield[0]") würde mein verstecktes Feld nicht finden. Das Umbenennen der ID, um die Perioden und Klammern nicht zu verwenden, führte dazu, dass der Selektor mit der Arbeit beginnt. Am Ende hatte ich also eine ID von model_the_field_0 Stattdessen funktionierte der Selektor gut.

Verwenden von ID:

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

Verwenden der Klasse:

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

Verwenden Sie einfach die Syntax unten und setzen Sie

ERHALTEN

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

Hier hält eine Variable den Wert von Hiddenfield (selektionIndex)

Serverseite

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

EINSTELLEN

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

Wenn Sie nach HAML suchen, ist dies die Antwort auf das versteckte Feld, um den Wert auf ein verstecktes Feld festzulegen 

%input#forum_id.hidden

Konvertieren Sie in Ihrem jQuery den Wert einfach in die Zeichenfolge und enden Sie ihn dann mit Attremobil -Eigenschaft in JQuery an. Ich hoffe, das funktioniert auch in anderen Sprachen.

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

Jeder andere, der damit zu kämpfen hat, gibt es eine sehr einfache "Inline" -Heweg, 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="">

Dies legt den Wert des versteckten Feldes fest, da der Text mithilfe des Onchange -Ereignisses in die sichtbare Eingabe eingegeben wird. Hilfreich (wie in meinem Fall), wo Sie einen Feldwert an ein Formular "erweiterte Suche" weitergeben und den Benutzer nicht zwingen möchten, seine Suchabfrage erneut zu typieren.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top