使用jQuery“.val（）”在表单中设置隐藏字段的值不起作用

Set value of hidden field in a form using jQuery's “.val()” doesn't work

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

下面是解释问题的示例代码。如果我将输入类型保持为"文本"，它就不会有任何问题。但是，将输入类型更改为"隐藏"不起作用！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<html>

<head>
<script type="text/javascript" src="jquery.js">

<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("input:text#texens").val("tinkumaster");
});
});

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

有什么想法吗？是否有一个实际可行的解决方案？

对于类型值为hidden的输入，:text将失败。它还可以更高效地使用：

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

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

示例位于http://jsbin.com/elovo/edit，使用示例代码位于http://jsbin.com/elovo/2/edit

相关讨论

安迪，谢谢你的快速反应。实际上，我先尝试了"Texens"，然后尝试了"input:hidden Texens"，两个都不起作用。当我将表单中的输入类型从"hidden"更改为"text"，并将"input:hidden:texens"更改为"input:text:texens"时，它毫无问题地工作。上面的"input:text texens"是一个打字错误，应该是"input:hidden texens"或者正如您刚才提到的"texens"。因此，似乎隐藏字段的值没有被更改。
@特森斯：我怀疑问题出在别的地方。从我链接到的示例中可以看到，val()在隐藏的输入上工作得很好，将值从"not changed"更改为"changed"。我已经修改了示例，将上面粘贴的代码包括在内，并发出一个确认值更改的警报：jsbin.com/elovo/2/edit
安迪，非常感谢你举的例子。我运行了上面提到的代码，它的工作方式和预期的完全一样。警报确实证实了数值已经改变。我一直在使用火狐的"查看页面源代码"功能打开页面源代码。在页面源代码中，它仍然显示旧值，而不是新值(即使对于上述Pastebin中的代码也是如此)。但是，警报框会确认更改的值。所以，我假设这是一个火狐问题(或者我是不是太笨了，忽略了一些重要的东西？)再次感谢您的时间：)
@泰森斯：没问题。我建议使用适当的调试工具Firebug，如果您使用的是Firefox，而不是查看源代码。在所有浏览器中，"查看源代码"的行为或多或少都是相同的，并且将显示页面下载的未修改的源代码。
我不认为问题出在火狐或特定工具上，而在于修改后的HTML是如何呈现和显示的。我和OP有相同的情况，只不过涉及了更多的jquery。在我的例子中，与本例中一样，代码工作正常-单击事件正确地更新了"hidden"类型的输入-但是firebug不显示隐藏字段的更新值，即使它们已经更新并且jquery可以访问它们，并且即使可见字段的更新值正确地显示在firebug中。
Firebug更新值很好，在其他地方你可能会遇到Dave Duplantis的问题。
如何使用jquery设置隐藏字段值并在表单提交时传递给控制器，并访问在控制器端设置的相同值？

如果您在设置隐藏字段的值时遇到问题，因为您要向其传递一个ID，那么这就是解决方案：

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

相关讨论

最后，我找到了一个简单的解决方案：

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

。

很有魅力。不知道jquery为什么不回到这个问题上。

相关讨论

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

1
2
3

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

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

号

(无变化)

1
2
3

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

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

(无变化)

但这是可行的！！！！

1
2
3

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

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

。

变化！！

1
2
3

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

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

变化！！

必须是"字符串"

相关讨论

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

为我工作，但两者都不是

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

。

也不

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

号

做。

.val不适合我，因为我正在获取值属性服务器端，并且该值并不总是更新的。所以我用了：

1
2
3
4
5
6
7
8

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

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

。

希望它能帮助别人。

相关讨论

实际上，这是一个持续存在的问题。虽然安迪对下载的源代码是正确的，.val(…)和.attr("value"，…)似乎并没有真正修改HTML。我认为这是一个javascript问题，而不是jquery问题。如果你用过萤火虫，你也会有同样的问题。虽然看起来，如果您提交的表单中包含了修改后的值，那么HTML不会改变。我在尝试创建修改过的表单的打印预览时遇到了这个问题(执行[Form].html())它可以复制所有内容，包括除值更改之外的所有更改。因此，我的模式打印预览有些无用…我的解决方法可能是"构建"一个包含添加值的隐藏表单，或者独立生成预览，并对用户所做的每一项修改也进行修改。这两种方法都是不合适的，但是除非有人知道为什么值设置行为不会改变HTML(在我假设的DOM中)，否则必须这样做。

相关讨论

我也有同样的问题，我发现了问题所在。我把HTML定义为

1
2
3
4
5
6
7
8

<form action="url" method="post">
<input type="hidden" id="email" />
<form>

function onsomeevent()
{
$("#email").val("[email protected]");
}

。

读取服务器上的表单值总是导致电子邮件为空。在我挠头(和无数次搜索)之后，我意识到错误在于没有正确定义表单/输入。在修改输入时(如下图所示)，它的工作方式很有魅力。

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

添加到此线程，以防其他线程有相同的问题。

在我的例子中，我使用了一个非字符串(整数)作为val()的参数，但这个参数不起作用，技巧和

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

号

使用val()对我来说不起作用。我必须到处使用.attr()。另外，我有不同类型的输入，在复选框和选择菜单的情况下必须非常明确。

更新文本字段

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

号

更新文件输入旁边的图像

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

号

更新布尔值

1
2
3
4
5

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

号

更新选择(带数字或字符串)

1
2
3
4
5
6
7
8

$('#model_framerate').children().each(function(i, el){
var v = $(el).val();
if (v === String(framerateVal)) {
$(el).attr('selected','selected');
} else {
$(el).attr('selected',null);
}
}

号

这里的另一个哥查浪费了我的一些时间，所以我想我会通过小费。我有一个隐藏的领域，我给了一个身份证。名称中的[]括号(由于与struts2一起使用)和选择器$("#model.thefield[0]")将找不到我的隐藏字段。将ID重命名为不使用句点和括号，导致选择器开始工作。所以最后我得到了一个ID为model_the_field_0的文件，而选择器工作得很好。

相关讨论

只需使用get和set下面的语法

得到

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

号

在这里，变量将保存hiddenfield的值(selectindex)

服务器端

集合

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

。

使用ID:

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

号

使用类：

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

号

任何其他正在为此挣扎的人，都有一种非常简单的"内联"方式来使用jquery：

1	<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事件将文本键入可见输入时设置隐藏字段的值。如果您想将字段值传递给"高级搜索"表单，而不是强制用户重新键入其搜索查询，那么这是很有用的(就像我的例子)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<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] + '

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

号