Установить значение скрытого поля в форме с помощью 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 имеет некоторые проблемы с установкой скрытых или невидимых полей ввода.

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

ОТВЕТЫ

Ответ 1

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

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

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

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

Ответ 2

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

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

Ответ 3

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

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

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

Ответ 4

У меня была такая же проблема. как ни странно, 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" />

ИЗМЕНЕНИЙ!!

должна быть "строкой"

Ответ 5

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

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

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

ни

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

сделал.

Ответ 6

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

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

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

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

Ответ 7

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

Ответ 8

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

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

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

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

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

Ответ 9

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

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

Ответ 10

Использование 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);
    }
}

Ответ 11

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

Ответ 12

Использование идентификатора:

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

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

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

Ответ 13

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

GET

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

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

Серверная сторона

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

SET

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

Ответ 14

Если вы ищете haml, то это ответ для скрытого поля, чтобы установить значение для скрытого поля, например

%input#forum_id.hidden

В вашем jquery просто преобразуйте значение в строку, а затем добавьте его, используя свойство attr в jquery. надеюсь, что это также работает и на других языках.

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

Ответ 15

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

Ответ 16

Любой, кто борется с этим, существует очень простой "встроенный" способ сделать это с помощью 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. Полезно (например, в моем случае), где вы хотите передать значение поля форме "Расширенный поиск", а не заставлять пользователя повторно вводить свой поисковый запрос.