Установите значение скрытого поля в форме с помощью jQuery ".val()" не работает

Я пытался установить значение скрытого поля в форме с помощью jQuery, но безуспешно.

вот пример кода, который объясняет проблему. Если я сохраняю тип ввода "текст", он работает без каких-либо проблем. Но, изменяя тип ввода на "скрытый", не работает !

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

Я также попробовал следующее обходное решение, установив тип ввода в "текст", а затем используя стиль "display:none" для поля ввода. Но, это также терпит неудачу ! Кажется, jQuery имеет некоторые проблемы с настройкой скрытых или невидимых полей ввода.

какие идеи? Есть ли обходной путь для этого, который действительно работает?

163
hidden-fields jquery set

15 ответов

:text не удастся для ввода со значением типа hidden. Также гораздо эффективнее просто использовать:

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

атрибуты ID должны быть уникальными на веб-странице, убедитесь, что ваши, поскольку это может способствовать любым проблемам, которые у вас возникли, и указание более сложного селектора просто замедляет работу и не выглядит так аккуратно.

пример в http://jsbin.com/elovo/edit, используя Ваш пример кода на http://jsbin.com/elovo/2/edit

263

Если у вас возникли проблемы с установкой значения скрытого поля, потому что вы передаете ему идентификатор, это решение:

вместо $("#hidden_field_id").val(id) просто делать $("input[id=hidden_field_id]").val(id). Не знаю, в чем разница, но это работает.

60

наконец, я нашел решение и оно очень простое:

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

работает как шарм. Понятия не имею, почему jQuery не возвращается к этому.

22

у меня была такая же проблема. как ни странно, google chrome и, возможно, другие (не уверены) не понравились

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

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

(без изменений)

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

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

(без изменений)

но это работает!!!!

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

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

изменения!!

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

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

изменения!!

должно быть, "струнная штука"

17

.вал не работала на меня, потому что Я беру значение атрибута на стороне сервера и значение не всегда обновлялось. поэтому я использовал:

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

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

надеюсь, это кому-то поможет.

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

работал на меня, когда ни один

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

, ни

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

сделал.

9

на самом деле, это постоянная проблема. Хотя Энди прав насчет скачанного источника .вал.(..) и. attr ('value',...) не похоже, что на самом деле изменить html. Я думаю, что это проблема JavaScript и не проблема jquery. Если бы вы использовали firebug, даже у вас был бы тот же вопрос. Хотя кажется, что если вы отправите форму с измененными значениями, она пройдет, html не изменится. Я столкнулся с этой проблемой, пытаясь создать печатью измененная форма (выполнение [форма].html ()) копирует все в порядке, включая все изменения за исключением значения изменения. Таким образом, мой модальный предварительный просмотр печати несколько бесполезен... мой обходной путь может быть "построить" скрытую форму, содержащую значения, которые они добавили, или создать предварительный просмотр независимо и сделать каждое изменение пользователь делает также изменить предварительный просмотр. Оба inoptimal, но если кто-то выяснит почему значение поведения не меняет HTML (в дом я предполагая), это должно будет сделать.

7

у меня была та же проблема, и я узнал, что был неправ. У меня был HTML, определенный как

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

чтение значений формы на сервере всегда приводило к электронной почте как пустой. После почесывания головы (и многочисленных поисков) я понял, что ошибка не определяла форму/ввод правильно. При изменении ввода (как показано ниже) он работал как шарм

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

добавление в этот поток в случае, если другие имеют ту же проблему.

4

используя val() не работает для меня. Мне пришлось использовать .attr() везде. Также у меня были разные типы входов и должны были быть довольно явными в случае флажков и выбора меню.

обновить текстовое поле

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

обновить изображение рядом с вводом файла

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

обновить boolean

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

обновление выберите (число или строка)

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

в моем случае я использовал не-строку (целое число) в качестве параметра val (), который не работает, трюк так же прост, как

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

другой получил Вас здесь впустую потратил часть моего времени, поэтому я подумал, что передам чаевые. У меня было скрытое поле, которое я дал id . и [] скобки в названии (из-за использования с struts2) и селектором $("#model.thefield[0]") не найдет мое скрытое поле. Переименование идентификатора, чтобы не использовать точки и скобки, привело к началу работы селектора. Так что в конце концов я получил идентификатор model_the_field_0 вместо этого и селектор работал нормально.

1

использование ID:

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

использование класса:

$('input:hidden.many_texens').val('tinkumaster');
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);

0

просто используйте синтаксис ниже get и set

GET

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

здесь переменная будет содержать значение hiddenfield(selectindex)

сервер

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

SET

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

любой, кто борется с этим, есть очень простой "встроенный" способ сделать это с помощью 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="">

это задает значение скрытого поля, поскольку текст вводится в видимый вход с помощью события onChange. Полезно (как в моем случае), когда вы хотите передать значение поля в форму "расширенный поиск" и не заставлять пользователя повторно вводить свой поисковый запрос.

0