使用 jQuery 的“.val()”在表单中设置隐藏字段的值不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2979772/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set value of hidden field in a form using jQuery's ".val()" doesn't work
提问by texens
I've been trying to set the value of a hidden field in a form using jQuery, but without success.
我一直在尝试使用 jQuery 在表单中设置隐藏字段的值，但没有成功。
Here is a sample code that explains the problem. If I keep the input type to "text", it works without any trouble. But, changing the input type to "hidden", doesn't work !
这是解释问题的示例代码。如果我将输入类型保持为“文本”，则它可以毫无问题地工作。但是，将输入类型更改为“隐藏”是行不通的！
<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>
I also tried the following workaround, by setting the input type to "text" and then using a "display:none" style for the input box. But, this also fails ! It seems jQuery has some trouble setting hidden or invisible input fields.
我还尝试了以下解决方法，将输入类型设置为“文本”，然后对输入框使用“显示：无”样式。但是，这也失败了！jQuery 似乎在设置隐藏或不可见的输入字段时遇到了一些麻烦。
Any ideas? Is there a workaround for this that actually works?
有任何想法吗？是否有实际可行的解决方法？
回答by Andy E
:textwill fail for a input with a type value of hidden. It's also much more efficient to just use:
:text对于类型值为 的输入将失败hidden。使用以下命令也更有效率：
$("#texens").val("tinkumaster");
ID attributes should be unique on a web page, make sure yours are as this may contribute to any problems you're having, and specifying a more complicated selector just slows things down and doesn't look as neat.
ID 属性在网页上应该是唯一的，确保您的属性是唯一的，因为这可能会导致您遇到的任何问题，并且指定一个更复杂的选择器只会减慢速度并且看起来不那么整洁。
Example at http://jsbin.com/elovo/edit, using your example code at http://jsbin.com/elovo/2/edit
例如在http://jsbin.com/elovo/edit，使用示例代码在http://jsbin.com/elovo/2/edit
回答by Chuck Callebs
If you're having trouble setting the value of a hidden field because you're passing an ID to it, this is the solution:
如果您因为将 ID 传递给隐藏字段而在设置隐藏字段的值时遇到问题，这是解决方案：
Instead of $("#hidden_field_id").val(id)just do $("input[id=hidden_field_id]").val(id). Not sure what the difference is, but it works.
而不是$("#hidden_field_id").val(id)仅仅做$("input[id=hidden_field_id]").val(id)。不确定有什么区别，但它有效。
回答by zamber
Finally, I have found a solution and it's a simple one:
最后，我找到了一个解决方案，这是一个简单的解决方案：
document.getElementById("texens").value = "tinkumaster";
Works like a charm. No clue why jQuery does not fall back to this.
奇迹般有效。不知道为什么 jQuery 不会回到这一点。
回答by mr.zaga
I had same problem. oddly enough google chrome and possibly others (not sure) did not like
我有同样的问题。奇怪的是谷歌浏览器和可能其他人（不确定）不喜欢
$("#thing").val(0);
input type="hidden" id="thing" name="thing" value="1" />
(no change)
（没变）
$("#thing").val("0");
input type="hidden" id="thing" name="thing" value="1" />
(no change)
（没变）
but this works!!!!
但这有效！！！！
$("#thing").val("no");
input type="hidden" id="thing" name="thing" value="no" />
CHANGES!!
变化！！
$("#thing").val("yes");
input type="hidden" id="thing" name="thing" value="yes" />
CHANGES!!
变化！！
must be a "string thing"
必须是“字符串”
回答by Dirk Seifert
$('input[name=hidden_field_name]').val('newVal');
worked for me, when neither
为我工作，当两者都没有
$('input[id=hidden_field_id]').val('newVal');
nor
也不
$('#hidden_field_id').val('newVal');
did.
做过。
回答by Sophie
.val didnt work for me, because i'm grabbing the value attribute server sideand the value wasn't always updated. so i used :
.val 对我不起作用，因为我正在获取值属性服务器端并且该值并不总是更新。所以我用了：
var counter = 0;
$('a.myClickableLink').click(function(event){
event.preventDefault();
counter++;
...
$('#myInput').attr('value', counter);
}
Hope it helps someone.
希望它可以帮助某人。
回答by Sophie
Actually, this is an ongoing problem. While Andy is right about the downloaded source, .val(...) and .attr('value',...) don't seem to actually modify the html. I think this is a javascript problem and nota jquery problem. If you had used firebug even you would have had the same question. While it seems that if you submit the form with the modified values it will go through, the html does not change. I ran into this issue trying to create a print preview of the modified form (doing [form].html()) it copies everything okay, including all changes exceptvalues changes. Thus, my modal print preview is somewhat useless... my workaround may have to be to 'build' a hidden form containing the values they have added, or generate the preview independently and make each modification the user makes also modify the preview. Both are inoptimal, but unless someone figures out why the value-setting behavior does not change the html (in the DOM i'm assuming) it will have to do.
实际上，这是一个持续存在的问题。虽然安迪对下载的源代码是正确的，但 .val(...) 和 .attr('value',...) 似乎并没有真正修改 html。我认为这是一个 javascript 问题而不是jquery 问题。如果您使用过萤火虫，您也会有同样的问题。虽然看起来如果您提交带有修改值的表单，它将通过，但 html 不会更改。我在尝试创建修改后的表单的打印预览时遇到了这个问题（执行 [form].html()）它可以复制所有内容，包括所有更改，除了值变化。因此，我的模态打印预览有点没用……我的解决方法可能是“构建”一个包含他们添加的值的隐藏表单，或者独立生成预览并使用户所做的每次修改也修改预览。两者都不是最优的，但除非有人弄清楚为什么值设置行为不会改变 html（在我假设的 DOM 中），否则它必须这样做。
回答by Jardalu
I was having the same issue, and I found out what was wrong. I had the HTML defined as
我遇到了同样的问题，我发现出了什么问题。我将 HTML 定义为
<form action="url" method="post">
<input type="hidden" id="email" />
<form>
<script>
function onsomeevent()
{
$("#email").val("[email protected]");
}
</script>
Reading the form values on server always resulted in email as empty. After scratching my head (and numerous search), I realized the mistake was not defining the form/input correctly. On modifing the input (as shown next), it worked like a charm
在服务器上读取表单值总是导致电子邮件为空。在挠头（和大量搜索）之后，我意识到错误没有正确定义表单/输入。在修改输入（如下所示）时，它就像一个魅力
<input type="hidden" id="email" name="email" />
Adding to this thread in case others have the same issue.
添加到此线程以防其他人遇到相同的问题。
回答by Shawn
In my case, I was using a non-string (integer) as the parameter of val() which doesn't work, the trick is just as simple as
在我的例子中，我使用了一个非字符串（整数）作为 val() 的参数，它不起作用，这个技巧就像
$("#price").val('' + price);
回答by Julian Mann
Using val()didn't work for me. I had to use .attr()everywhere. Also I had different types of inputs and had to be pretty explicit in the case of check boxes and select menus.
使用val()对我不起作用。我不得不.attr()到处使用。此外，我有不同类型的输入，并且在复选框和选择菜单的情况下必须非常明确。
Update textfield
更新文本字段
$('#model_name').attr('value',nameVal);
Update image next to file input
更新文件输入旁边的图像
$('#img-avatar').attr('src', avatarThumbUrl);
Update boolean
更新布尔值
if (isActive) {
$('#model_active').attr('checked',"checked");
} else {
$('#model_active').attr('checked', null) ;
}
Update select(with number or string)
更新选择（带数字或字符串）
$('#model_framerate').children().each(function(i, el){
var v = $(el).val();
if (v === String(framerateVal)) {
$(el).attr('selected','selected');
} else {
$(el).attr('selected',null);
}
}
