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

188

Я пытался установить значение скрытого поля в форме, используя 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>

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

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

jquery set hidden-fields

— texens
источник

316

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

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

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

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

— Энди Э
источник

Энди, спасибо за быстрый ответ. На самом деле я сначала попробовал с "#texens", а затем с "#input: hidden # texens", и ни один из них, похоже, не работал. Когда я изменил тип ввода в форме с «скрытого» на «текстовый» и «#input: hidden: texens» на «#input: text: texens», он работал без каких-либо проблем. "#Input: text # texens" был опечаткой выше и должен был быть "#input: hidden # texens" или просто "#texens", как вы только что упомянули. Таким образом, кажется, что значения скрытого поля не изменяются.

— texens

1

@texens: Я подозреваю, что проблема кроется в другом месте. Как вы можете видеть из примера, на который я ссылался, он val()прекрасно работает со скрытым вводом, изменяя значение с «не изменено» на «изменено». Я пересмотрел пример, чтобы включить код, который вы вставили выше, с предупреждением для подтверждения изменения значения: jsbin.com/elovo/2/edit

— Энди Э

Энди, большое спасибо за пример. Я запустил код, упомянутый выше, и он работает именно так, как и должно быть. И предупреждение действительно подтверждает, что значение было изменено. Я открывал исходный код страницы с помощью функции «Просмотр исходного кода» в Firefox. И в исходном коде страницы он по-прежнему показывает старое значение, а не новое значение (даже для кода в указанной выше папке для вставки). Но окно предупреждения подтверждает измененное значение. Итак, я предполагаю, что это проблема Firefox (или я слишком тупой и упускаю из виду что-то важное?). Еще раз спасибо за ваше время :)

— texens

2

@texens: нет проблем. Я бы предложил использовать подходящий инструмент отладки Firebug, если вы используете Firefox вместо просмотра исходного кода. Поведение «просмотра исходного кода» более или менее одинаково во всех браузерах и будет отображать загруженный, неизмененный исходный код страницы.

— Энди Э

2

Я не думаю, что проблема в Firefox или конкретном инструменте, а в том, как измененный HTML отображается и отображается. У меня та же ситуация, что и у OP, за исключением того, что здесь задействовано немного больше jQuery. В моем случае, как и в этом, код работает правильно - событие click корректно обновляет ввод типа «скрытый» - но Firebug не отображает обновленные значения для скрытых полей, даже если они были обновлены и jQuery может получить к ним доступ и даже если обновленные значения для видимых полей отображаются в Firebug правильно

— Dave DuPlantis

62

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

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

— Чак Каллебс
источник

3

Осторожно, это может быть очень медленно в старых браузерах ( learn.jquery.com/using-jquery-core/selecting-elements )

— Алекс Клаус

Не работает для меня, браузер - Chrome 48. Не уверен, почему

— Gurpreet Singh

26

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

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

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

— zamber
источник

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

— Хлонгмор

Вот почему я разместил этот ответ;). Рад, что это помогло. Что касается jQuery, у них есть потенциальное решение здесь github.com/jquery/jquery/blob/… но это только для type="radio". Мне лень сообщать о проблеме, особенно учитывая, что я решил эту проблему 4 года назад. Я также разрываюсь, если это должно быть исправлено в jQuery - возможно, это реализовано таким образом, чтобы защитить детишек jQuery от себя? Кто знает ...

— Замбер

1

Решение jQuery у меня тоже не сработало. Пришлось ехать с Vanilla JS.

— Варун Шарма

17

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

$("#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" />

ИЗМЕНЕНИЯ !!

должно быть "вещь строки"

— mr.zaga
источник

2

Это исправило это и для меня. Я закончил тем .val(' 0'), что использовал мой бэкэнд , который правильно анализируется parseIntв Javascript, а также int()в Python.

— rattray

10

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

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

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

ни

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

сделал.

— Дирк Сейферт
источник

9

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

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

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

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

— Софи
источник

Это ответ, который мне нравится. Использование функции attr позволяет избежать всех упомянутых выше искажений и делает все правильно.

7

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

+1 от меня! Ты прав. Значение и .val () имеют проблемы при обновлении с использованием jQuery. Вы нашли что-нибудь вокруг?

— NullPointer

4

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

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

— Jardalu
источник

3

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

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

— Шон
источник

2

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

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

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

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

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

Обновить булево

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

— Джулиан Манн
источник

1

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

— user738048
источник

Это потому, что ваш селектор $("#model.thefield[0]")интерпретируется как: элемент с idравным model, css classof thefieldи некоторые attributeвызываемые 0... Если вы хотите использовать эти символы в своем idиспользовании, подход, предложенный Чаком Каллебсом в его ответе . В HTML5 idможет быть любая строка, которая не является пустой и не содержит пробелов ( ссылка ).

— Оливер

1

Используя ID:

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

Используя класс:

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

— Арман Н
источник

0

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

%input#forum_id.hidden

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

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

— Yarrabhumi
источник

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

— каролина
источник

-1

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

ПОЛУЧИТЬ

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

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

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

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

УСТАНАВЛИВАТЬ

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

— mzonerz
источник

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

— ProfK

-1

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

— Joyrex
источник