Установить значение скрытого поля в форме с помощью 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 есть проблемы с настройкой скрытых или невидимых полей ввода.
Есть идеи? Есть ли обходной путь для этого, который действительно работает?
18 ответов
:text потерпит неудачу для входа со значением типа hidden, Также гораздо эффективнее просто использовать:
$("#texens").val("tinkumaster");
Атрибуты идентификатора должны быть уникальными на веб-странице, убедитесь, что они ваши, поскольку это может способствовать возникновению любых проблем, с которыми вы столкнулись, а указание более сложного селектора просто замедляет работу и не выглядит аккуратно.
Пример на http://jsbin.com/elovo/edit, используя пример кода на http://jsbin.com/elovo/2/edit
Если у вас возникают проблемы при установке значения скрытого поля, поскольку вы передаете ему идентификатор, вот решение:
Вместо $("#hidden_field_id").val(id) просто делать $("input[id=hidden_field_id]").val(id), Не уверен, в чем разница, но это работает.
Наконец, я нашел решение, и оно простое:
document.getElementById("texens").value = "tinkumaster";
Работает как шарм. Понятия не имею, почему jQuery не отступает от этого.
У меня была такая же проблема. как ни странно гугл хром и возможно другим (не уверен) не понравился
$("#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" />
ИЗМЕНЕНИЯ!!
должно быть "вещь строки"
$('input[name=hidden_field_name]').val('newVal');
работал на меня, когда ни
$('input[id=hidden_field_id]').val('newVal');
ни
$('#hidden_field_id').val('newVal');
сделал.
.val не работал для меня, потому что я хватаю сторону сервера атрибута значения, и значение не всегда обновлялось. поэтому я использовал:
var counter = 0;
$('a.myClickableLink').click(function(event){
event.preventDefault();
counter++;
...
$('#myInput').attr('value', counter);
}
Надеюсь, это поможет кому-то.
На самом деле, это постоянная проблема. Хотя Энди прав в отношении загруженного источника, .val(...) и.attr('value',...), по-видимому, фактически не изменяют html. Я думаю, что это проблема javascript, а не проблема jquery. Если бы вы использовали Firebug даже у вас был бы тот же вопрос. Хотя кажется, что если вы отправите форму с измененными значениями, она пройдет, HTML не изменится. Я столкнулся с этой проблемой, пытаясь создать предварительный просмотр измененной формы (делая [form].html()), он копирует все в порядке, включая все изменения, кроме изменений значений. Таким образом, мой модальный предварительный просмотр печати несколько бесполезен... Мой обходной путь, возможно, должен заключаться в том, чтобы "создать" скрытую форму, содержащую добавленные значения, или создать предварительный просмотр независимо и вносить каждую модификацию, которую пользователь вносит, также изменяя предварительный просмотр. И то, и другое неоптимально, но если кто-то не выяснит, почему поведение установки значений не меняет html (в DOM, я предполагаю), это придется делать.
У меня была та же проблема, и я узнал, что случилось. 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" />
Добавление в эту ветку на случай, если у других возникнет та же проблема.
В моем случае, я использовал не-строку (целое число) в качестве параметра val(), который не работает, трюк так же просто, как
$("#price").val('' + price);
С помощью 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);
}
}
Используя ID:
$('input:hidden#texens').val('tinkumaster');
Используя класс:
$('input:hidden.many_texens').val('tinkumaster');
Другой гуча здесь потратил впустую часть моего времени, поэтому я думал, что передам чаевые. У меня было скрытое поле, я дал идентификатор, который имел. а также [] скобки в названии (из-за использования с Struts2) и селектор $("#model.thefield[0]") не нашел бы мое скрытое поле. Переименование идентификатора, чтобы не использовать точки и скобки, заставило селектор начать работать. Так что, в конце концов, я получил идентификатор model_the_field_0 вместо этого селектор работал нормально.
If you are searching for haml then this is the answer for hidden field to set value to a hidden field like
%input#forum_id.hidden
In your jquery just convert the value to string and then append it using attr property in jquery. hope this also works in other languages also.
$('#forum_id').attr('val',forum_id.toString());
Заблудившись в бесчисленных ответах на этой странице, ни один из которых на самом деле не работал, я узнал, как это сделать в моем случае.
Почему-то используется
Вот мое решение:
$("[name=something]").val("something");
По сути, выберите любой элемент с именем «что-то». Дать ему шанс.
Попробовав все, devtools показывает, что они изменили идентификатор, это сработало:
$("#form-field-{field_id}").value('free');
<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);
У всех, кто борется с этим, есть очень простой "встроенный" способ сделать это с помощью 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. Полезно (как в моем случае), когда вы хотите передать значение поля в форму "Расширенный поиск" и не заставлять пользователя повторно вводить свой поисковый запрос.
Просто используйте синтаксис ниже получить и установить
ПОЛУЧИТЬ
//Script
var a = $("#selectIndex").val();
здесь переменная будет содержать значение скрытого поля (selectindex)
Серверная сторона
<asp:HiddenField ID="selectIndex" runat="server" Value="0" />
ЗАДАВАТЬ
var a =10;
$("#selectIndex").val(a);