javascript 具有相同“名称”属性的多个表单字段未发布
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9081085/
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
Multiple form fields with same 'name' attribute not posting
提问by Bob FiveThousand
I'm dealing with some legacy HTML/JavaScript. Some of which I have control over, some of which is generated from a place over which I have no control.
我正在处理一些遗留的 HTML/JavaScript。有些是我可以控制的，有些是我无法控制的地方产生的。
There is a dynamically generated form with hidden fields. The form itself is generated via a Velocity template (Percussion Rhythmyx CMS) and JavaScript inserts additional hidden form fields. The end result is hidden form fields generated with the same 'name' attribute. The data is being POSTed to Java/JSP server-side code about which I know very little.
有一个带有隐藏字段的动态生成的表单。表单本身是通过 Velocity 模板（Percussion Rhythmyx CMS）生成的，JavaScript 会插入额外的隐藏表单字段。最终结果是使用相同的“名称”属性生成隐藏的表单字段。数据被发布到 Java/JSP 服务器端代码，我对此知之甚少。
I know that form fields sharing the same 'name' attribute is valid. For some reason the POSTed data is not being recognized the back end. When I examine the POST string, the same-name-keys all contain no data.
我知道共享相同“名称”属性的表单字段是有效的。由于某种原因，后端无法识别 POSTed 数据。当我检查 POST 字符串时，同名键都不包含任何数据。
If I manipulate the code in my dev environment such that only a single input field exists for a given name, the data IS POSTed to the back end correctly. The problem is not consistent, sometimes, it works just fine.
如果我在我的开发环境中操作代码，使得给定名称只存在一个输入字段，则数据将正确发布到后端。问题并不一致，有时，它工作得很好。
Is there something I can do to guarantee that the data will be POSTed? Can anyone think of a reason why it would not be?
我可以做些什么来保证数据会被发布？任何人都可以想出一个不会的原因吗？
I should really update my answer and post code here, because POST requests without
variable strings indicates the problem is on the client side.
采纳答案by Bob FiveThousand
I've worked out a brute-force solution. Note that I'm pretty aware this is a hack. But I'm stuck in the position of having to work around other code that I have no control over.
我已经制定了一个蛮力解决方案。请注意，我很清楚这是一个 hack。但是我陷入了不得不处理我无法控制的其他代码的境地。
Basically, I've created an ONSUBMIT handler which examines the form for the repeated hidden fields and makes sure they are all populated with the correct data. This seems to guarantee that the POST string contains data regardless of how the form gets rendered and the Java back end appears to be happy with it as well.
基本上，我创建了一个 ONSUBMIT 处理程序，它检查表单中重复的隐藏字段并确保它们都填充了正确的数据。这似乎可以保证 POST 字符串包含数据，而不管表单如何呈现，并且 Java 后端似乎也对它感到满意。
I've tested this in the following situations:
我在以下情况下对此进行了测试：
- Code generates single instances of the hidden fields (which does happen sometimes)
- Code generates multiple instances of the hidden fields
- Code generates no instances of the hidden fields (which shouldnever happen, but hey...)
- 代码生成隐藏字段的单个实例（有时会发生）
- 代码生成隐藏字段的多个实例
- 代码不生成隐藏字段的实例（这应该永远不会发生，但是嘿...）
My 'else' condition contains a tiny bit of MooTools magic, but it's otherwise straight-forward stuff.
我的“其他”条件包含一点点 MooTools 魔法，但在其他方面是直接的东西。
Maybe someone else will find this useful one day...
也许有一天其他人会发现这很有用......
Thanks for the help!
谢谢您的帮助！
<form method="post" name="loginform" id="loginform" action="/login" onsubmit="buildDeviceFP(this);">
<script type="text/javascript">
function insertFieldValues( fields, sValue )
{
if ( 'length' in fields )
{
// We got a collection of form fields
for ( var x = 0; x < fields.length; x++ ) {
fields[x].value = sValue;
}
}
else
{
// We got a single form field
fields.value = sValue;
}
}
function buildDeviceFP( oForm )
{
// Get the element collections for Device Fingerprint & Language input fields from the form.
var devicePrintElmts = oForm.elements.deviceprint;
var languageElmts = oForm.elements.language;
// 'devicePrintElmts' & 'languageElmts' *should* always exist. But just in case they don't...
if ( devicePrintElmts) {
insertFieldValues( devicePrintElmts, getFingerprint() );
} else if ( oForm.deviceprint ) {
oForm.deviceprint.value = getFingerprint();
} else {
$('logonbox').adopt(
new Element( 'input', {'type':'hidden', 'name':'deviceprint', 'value':getFingerprint()} )
);
}
if ( languageElmts) {
insertFieldValues( languageElmts, getLanguage() );
} else if ( oForm.language ) {
oForm.language.value = getLanguage();
} else {
$('logonbox').adopt(
new Element( 'input', {'type':'hidden', 'name':'language', 'value':getLanguage()} )
);
}
}
</script>
回答by Travesty3
How about this:
这个怎么样：
<script type="text/JavaScript">
function disableBlankValues()
{
var elements = document.getElementById("form1").elements;
for (var i = 0; i < elements.length; i++)
{
if (elements[i].value == "")
elements[i].disabled = true;
}
}
</script>
<form action="page.php" method="POST" onsubmit="disableBlankValues()" id="form1">
<input type="hidden" name="field1" value="This is field 1."/>
<input type="hidden" name="field1" value=""/>
</form>
EDIT编辑
I now realize the actual problem (multiple variables with the same name should be passed to JSP as an array) and my solution is probably not what the OP is looking for, but I'm leaving it here just in case it happens to help someone else who stumbles upon this post.
我现在意识到实际问题（多个具有相同名称的变量应该作为数组传递给 JSP）并且我的解决方案可能不是 OP 正在寻找的，但我将它留在这里以防万一它碰巧帮助某人其他偶然发现这篇文章的人。
回答by André Al?ada Padez
you could use something like:
你可以使用类似的东西：
var form = document.getElementById('yourformid');
var elements = form.getElementsByName('repeatedName');
var count = 0;
for(var item in elements){
elements[item].name += count++;
}
this way you will get each hiddenfield with the names:
通过这种方式，您将获得每个隐藏字段的名称：
name0
name1
name2
...
