Ustaw wartość ukrytego pola w formularzu za pomocą „.val ()” jQuery nie działa

188

Próbowałem ustawić wartość ukrytego pola w formularzu przy użyciu jQuery, ale bez powodzenia.

Oto przykładowy kod wyjaśniający problem. Jeśli zachowam typ wejściowy jako „tekst”, działa to bez żadnych problemów. Ale zmiana typu danych wejściowych na „ukryty” nie działa!

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

Próbowałem także zastosować następujące obejście, ustawiając typ wprowadzania na „tekst”, a następnie używając stylu „display: none” dla pola wprowadzania. Ale to też się nie udaje! Wygląda na to, że jQuery ma pewne problemy z ustawieniem ukrytych lub niewidocznych pól wprowadzania.

Jakieś pomysły? Czy istnieje obejście tego problemu, które faktycznie działa?

jquery set hidden-fields

— texens
źródło

316

:textzakończy się niepowodzeniem dla danych wejściowych o wartości typu hidden. Znacznie bardziej wydajne jest po prostu użycie:

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

Atrybuty identyfikatora powinny być unikalne na stronie internetowej, upewnij się, że masz, ponieważ może to przyczynić się do problemów, a określenie bardziej skomplikowanego selektora po prostu spowalnia rzeczy i nie wygląda na schludne.

Przykład na stronie http://jsbin.com/elovo/edit , używając przykładowego kodu na stronie http://jsbin.com/elovo/2/edit

— Andy E.
źródło

Andy, dziękuję za szybką odpowiedź. Próbowałem najpierw z „#texens”, a potem z „#input: hidden # texens” i żadne z nich nie działało. Kiedy zmieniłem typ wprowadzania w formie z „ukryty” na „tekst” i „#input: hidden: texens” na „#input: text: texens”, zadziałało bez żadnych problemów. „#Input: text # texens” było literówką powyżej i powinno być „#input: hidden # texens” lub po prostu „#texens”, jak właśnie wspomniałeś. Wygląda więc na to, że wartości ukrytego pola nie ulegają zmianie.

— texens

1

@texens: Podejrzewam, że problem leży gdzie indziej. Jak widać z przykładu, do którego podłączyłem, val()działa dobrze na ukrytym wejściu, zmieniając wartość z „niezmieniony” na „zmieniony”. Zmieniłem

— Andy E

Andy, wielkie dzięki za przykład. Uruchomiłem wspomniany wyżej kod i działa on dokładnie tak, jak powinien. Ostrzeżenie rzeczywiście potwierdza, że wartość została zmieniona. Otworzyłem źródło strony za pomocą przeglądarki Firefox „Zobacz źródło strony”. A w źródle strony nadal pokazuje starą wartość, a nie nową wartość (nawet dla kodu we wspomnianym wyżej pastebinie). Ale okno ostrzeżenia potwierdza zmienioną wartość. Zakładam, że to problem z Firefoksem (czy jestem zbyt głupi i nie dostrzegam czegoś ważnego?). Jeszcze raz dziękuję za

— poświęcony

2

@texens: nie ma problemu. Sugeruję użycie odpowiedniego narzędzia do debugowania, Firebug, jeśli używasz Firefoksa, zamiast przeglądania źródła. Zachowanie „źródła widoku” jest mniej więcej takie samo we wszystkich przeglądarkach i pokazuje pobrany, niezmodyfikowany kod źródłowy strony.

— Andy E,

2

Nie sądzę, że problem dotyczy Firefoksa lub konkretnego narzędzia w takim samym stopniu, w jakim jest renderowany i wyświetlany zmodyfikowany HTML. Mam taką samą sytuację jak OP, z tym, że wiąże się to z nieco większą ilością jQuery. W moim przypadku, podobnie jak w tym przypadku, kod działa poprawnie - zdarzenie click poprawnie aktualizuje dane wejściowe typu „ukryte” - ale Firebug nie wyświetla zaktualizowanych wartości ukrytych pól, nawet jeśli zostały one zaktualizowane i jQuery może uzyskać do nich dostęp , i mimo że zaktualizowane wartości widocznych pól są poprawnie wyświetlane w Firebug.

— Dave DuPlantis

62

Jeśli masz problem z ustawieniem wartości ukrytego pola, ponieważ przekazujesz mu identyfikator, oto rozwiązanie:

Zamiast po $("#hidden_field_id").val(id)prostu zrobić $("input[id=hidden_field_id]").val(id). Nie jestem pewien, jaka jest różnica, ale działa.

— Chuck Callebs
źródło

3

Uwaga, może to być bardzo wolne w starszych przeglądarkach ( learn.jquery.com/using-jquery-core/selecting-elements )

— Alex Klaus

Nie działa dla mnie przeglądarka - Chrome 48. Nie jestem pewien, dlaczego

— Gurpreet Singh

26

Wreszcie znalazłem rozwiązanie, które jest proste:

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

Działa jak marzenie. Nie ma pojęcia, dlaczego jQuery do tego nie wraca.

— zamber
źródło

Technicznie używa to DOMa, a nie jQuery, ale jest proste i działa (próbowałem tutaj prawie każdej odpowiedzi w przypadku zmiany wartości w czasie przesyłania formularza, a one nie działały).

— hlongmore

Dlatego opublikowałem tę odpowiedź;). Cieszę się, że pomogło. Jeśli chodzi o jQuery, mają potencjalną poprawkę tutaj github.com/jquery/jquery/blob/…, ale to tylko dla type="radio". Jestem zbyt leniwy, aby zgłosić problem, zwłaszcza że rozwiązałem ten problem 4 lata temu. Jestem również rozdarty, jeśli należy to naprawić w jQuery - być może jest to zaimplementowane w taki sposób, aby chronić dzieci jQuery przed sobą? Kto wie ...

— zamber

1

Rozwiązanie jQuery też nie działało dla mnie. Musiałem iść z Vanilla JS.

— Varun Sharma

17

Miałem ten sam problem. co dziwne, Google Chrome i być może inni (nie pewni) nie lubili

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

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

(brak zmiany)

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

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

(brak zmiany)

ale to działa !!!!

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

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

ZMIANY!!

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

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

ZMIANY!!

musi być „sznurkiem”

— mr.zaga
źródło

2

To również mnie naprawiło. Skończyło się na tym .val(' 0'), że został poprawnie przeanalizowany przez parseIntJavaScript, a także int()Python, mój backend.

— rattray

10

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

pracował dla mnie, kiedy żaden

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

ani

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

zrobił.

— Dirk Seifert
źródło

9

.val nie działał dla mnie, ponieważ chwytam atrybut serwera wartości i wartość nie zawsze jest aktualizowana. więc użyłem:

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

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

Mam nadzieję, że to komuś pomoże.

— Zofia
źródło

To odpowiedź lubię. Użycie funkcji attr pozwala uniknąć wszystkich wyżej wymienionych skręceń i robi właściwą rzecz.

7

W rzeczywistości jest to ciągły problem. Podczas gdy Andy ma rację co do pobranego źródła, .val (...) i .attr ('wartość', ...) nie wydają się tak naprawdę modyfikować HTML. Myślę, że to problem z javascript, a nie problem z jquery. Gdybyś użył buga ognia, nawet ty miałbyś to samo pytanie. Chociaż wydaje się, że jeśli prześlesz formularz ze zmodyfikowanymi wartościami, przejdzie on, ale HTML nie zmieni się. Natknąłem się na ten problem, próbując utworzyć podgląd wydruku zmodyfikowanego formularza (robiąc [form] .html ()) kopiuje wszystko w porządku, w tym wszystkie zmiany opróczwartości się zmieniają. Tak więc mój modalny podgląd wydruku jest nieco bezużyteczny ... moim obejściem może być „zbudowanie” ukrytego formularza zawierającego wartości, które dodali, lub wygenerowanie podglądu niezależnie i wprowadzanie każdej modyfikacji przez użytkownika również modyfikuje podgląd. Oba są nieoptymalne, ale chyba, że ktoś zorientuje się, dlaczego zachowanie ustalające wartości nie zmienia html (zakładam, że w DOM) musi to zrobić.

+1 ode mnie! Masz rację. wartości i .val () mają problem z aktualizacją przy użyciu jQuery. Znalazłeś coś w pobliżu?

— NullPointer

4

Miałem ten sam problem i dowiedziałem się, co było nie tak. Miałem HTML zdefiniowany jako

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

Odczyt wartości formularza na serwerze zawsze powodował, że e-mail był pusty. Po podrapaniu się w głowę (i licznych poszukiwaniach) zdałem sobie sprawę, że błędem było nieprawidłowe zdefiniowanie formy / danych wejściowych. Po zmodyfikowaniu wejścia (jak pokazano poniżej) działało to jak urok

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

Dodanie do tego wątku na wypadek, gdyby inni mieli ten sam problem.

— Jardalu
źródło

3

W moim przypadku jako parametr val () nie użyłem łańcucha (liczba całkowita), co nie działa, sztuczka jest tak prosta jak

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

— Shawn
źródło

2

Korzystanie val()nie działało dla mnie. Musiałem używać .attr()wszędzie. Miałem też różne typy danych wejściowych i musiałem być dość wyraźny w przypadku pól wyboru i wybranych menu.

Zaktualizuj pole tekstowe

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

Zaktualizuj obraz obok pliku wejściowego

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

Zaktualizuj wartość logiczną

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

Zaktualizuj wybór (z numerem lub ciągiem)

$('#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
źródło

1

Kolejna gotcha tutaj zmarnowała trochę czasu, więc pomyślałem, że przekażę wskazówkę. Miałem ukryte pole, które podałem. i []nawiasy w nazwie (ze względu na użycie z struts2), a selektor $("#model.thefield[0]")nie znalazłby mojego ukrytego pola. Zmiana nazwy id, aby nie używać kropek i nawiasów, spowodowała, że selektor zaczął działać. Więc w końcu skończyłem z identyfikatorem model_the_field_0zamiast i selektor działał dobrze.

— użytkownik738048
źródło

To dlatego, że selektor $("#model.thefield[0]")jest interpretowane jako: element z idrównym model, a css classod thefielda niektóre attributenazywa 0... Jeśli chcesz używać tych znaków w idużyciu podejście zaproponowane przez Chucka Callebs w jego odpowiedzi . W HTML5 idmoże to być dowolny ciąg znaków, który nie jest pusty i nie zawiera żadnych spacji ( odniesienie ).

— Oliver,

1

Za pomocą identyfikatora:

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

Korzystanie z klasy:

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

— Arman H.
źródło

0

Jeśli szukasz Haml, to jest to odpowiedź na ukryte pole, aby ustawić wartość na ukryte pole, takie jak

%input#forum_id.hidden

W jquery wystarczy przekonwertować wartość na ciąg, a następnie dołączyć ją za pomocą właściwości attr w jquery. mam nadzieję, że działa to również w innych językach.

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

— Yarrabhumi
źródło

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

— Karolina
źródło

-1

Po prostu użyj składni poniżej get i set

DOSTAĆ

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

tutaj zmienna będzie przechowywać wartość pola ukrytego (selectindex)

Po stronie serwera

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

ZESTAW

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

— mzonerz
źródło

OP pyta, dlaczego kod taki jak twój nie działa dla niego, więc nie ma to sensu w przypadku tego pytania.

— ProfK

-1

Każdy, kto ma z tym problem, ma bardzo prosty „wbudowany” sposób, aby to zrobić za pomocą 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="">

To ustawia wartość ukrytego pola, gdy tekst jest wpisywany do widocznego wejścia za pomocą zdarzenia onChange. Pomocne (jak w moim przypadku), gdy chcesz przekazać wartość pola do formularza „Wyszukiwanie zaawansowane” i nie zmuszać użytkownika do ponownego wpisania zapytania.

— Joyrex
źródło