使用jQuery's ".val()"并# 39;t工作

我一直在尝试使用jQuery在表单中设置隐藏字段的值，但没有成功。

下面是解释该问题的示例代码。如果我保持输入类型为“文本”，它工作起来没有任何麻烦。但是，将输入类型更改为“hidden”，却不起作用!

<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在设置隐藏或不可见输入字段时遇到了一些问题

什么好主意吗?有没有可行的解决办法?

700406 次浏览
小开
最佳答案

对于类型值为hidden的输入，:text将失败。只使用以下语句也会更有效率:

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

ID属性在网页上应该是唯一的，确保你的ID属性是唯一的，因为这可能会导致你遇到的任何问题，指定一个更复杂的选择器只会减慢速度，看起来不那么整洁。

http://jsbin.com/elovo/edit的示例，使用您在http://jsbin.com/elovo/2/edit的示例代码

小开

实际上，这是一个持续存在的问题。虽然Andy对下载的源代码是正确的，但.val(…)和.attr('value'，…)似乎并没有实际修改html。我认为这是一个javascript问题和不一个jquery问题。如果你使用firebug，你也会有同样的问题。虽然看起来如果您提交了修改过的值的表单，它就会通过，但html并没有改变。我在尝试创建修改后的表单的打印预览时遇到了这个问题(执行[form].html())，它会复制所有内容，包括除了值的所有更改。因此，我的模式打印预览有点无用…我的解决方法可能是“构建”一个包含他们添加的值的隐藏表单，或者独立生成预览，并使用户所做的每次修改也修改预览。这两者都不是最优的，但是除非有人弄清楚为什么值设置行为不改变html(我假设是在DOM中)，否则它将不得不这样做。

小开

我也有同样的问题。奇怪的是谷歌铬和可能其他人(不确定)不喜欢

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

改变! !

一定是“字符串的东西”

小开

如果你在设置一个隐藏字段的值时遇到了麻烦，因为你传递了一个ID给它，这是解决方案:

只做$("input[id=hidden_field_id]").val(id)而不是$("#hidden_field_id").val(id)。不知道有什么区别，但确实有效。

小开

又有人在这里抓你了，浪费了我的时间，所以我想我应该把这个建议给你。我有一个隐藏字段，我给了一个id。名称中的[]括号(由于与struts2一起使用)和选择器$("#model.thefield[0]")将不会找到我的隐藏字段。将id重命名为不使用句号和括号会导致选择器开始工作。所以最后我用model_the_field_0的id代替，选择器工作得很好。

小开

.val不能为我工作，因为我正在抓取值属性服务器端和值并不总是更新。所以我用了:

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


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

希望它能帮助到别人。

小开

我也有同样的问题，我找到了问题所在。我把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" />

添加到这个线程，以防其他人有同样的问题。

小开

最后，我找到了一个解决方案，很简单:

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

效果非常好。不知道为什么jQuery没有退回到这一步。

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

为我工作，其实两者都不是

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

也不

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

所做的。

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

小开

使用ID:

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

使用类:

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

使用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);
}
}
小开

简单地使用get和set下面的语法

< em >得到< / em >

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

这里一个变量将保存hiddenfield(selectindex)的值

服务器端

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

< em > < / em >设置

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

任何人谁是与此斗争，有一个非常简单的“内联”方法来做到这一点与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事件将文本输入可见输入时，设置隐藏字段的值。如果你想把字段值传递给“高级搜索”表单，而不是强迫用户重新输入他们的搜索查询，这是很有用的(就像在我的例子中)。

小开

在我的情况下，我使用了一个非字符串(整数)作为val()的参数，这并不管用，技巧就像

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

如果你正在搜索haml，那么这是隐藏字段的答案，将值设置为一个隐藏字段，如

%input#forum_id.hidden

在jquery中，只需将值转换为字符串，然后使用jquery中的attr属性附加它。希望这也适用于其他语言。

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

在迷失在这个页面上无数的答案之后，没有一个真正有效，我找到了如何在我的情况下做到这一点。

出于某种原因，在选择器中使用input并没有做到这一点。我在表单元素上没有ID，所以我不能为选择器使用任何ID。即使我做了，我也肯定不会成功。

以下是我的解决方案:

$("[name=something]").val("something");

基本上，选择名称为“something”的任何元素。试试看吧。

小开

在尝试了一切之后，devtools显示他们改变了id，这是有效的:

$("#form-field-{field_id}").value('free');

提交答案