JavaScript <form> 输入字段“关联”数组？答案

【问题标题】：JavaScript <form> input fields "associative" array?JavaScript <form> 输入字段“关联”数组？
【发布时间】：2011-04-26 04:56:36
【问题描述】：

首先我要声明我完全意识到 JavaScript 中没有“真正的”关联数组。话虽这么说，我想要类似的东西......

<form action="javascript:submitSpecial();" name="myForm" >
    <input name="myInput" type="text" />
</form>

具体来说，我不希望此表单直接调用 .php 脚本。我希望它由我的 JavaScript 函数“submitSpecial()”处理并选择具有各自名称的表单输入，并对下一个 .php 脚本进行 AJAX 调用。

document.forms['myForm']['myInput'].name
document.forms['myForm']['myInput'].value

基本上，我想构建或查找包含此信息的数组。我只能使用 JavaScript，不能使用 JQuery 或类似的东西。 elements[] 集合非常接近，但我需要知道值所属的列名。

有什么建议吗？

提前致谢，扎克

【问题讨论】：

+1 我很想找到你的问题的答案，很确定它可能对我有用：D
你不能用getElementsByClassName这样的东西吗？
“属于值的列名”是什么意思？在 Web 浏览器中实现的表单没有列。当您说“我想构建或查找包含此信息的数组”时，您并不清楚“此信息”是什么。我将根据我认为您的意思添加一个答案，但如果事实证明我误解了您的要求，请告诉我，我将删除它。
您不使用 jQuery（或任何 JavaScript 库）的原因是什么？ JavaScript 库是设计来帮助你的。当然，您可以递归地遍历“表单”元素的所有子元素并构建一个包含所有值的对象，一个编写良好的 JavaScript 库可以在一个语句中为您完成，您不必担心不同的不同浏览器的怪癖和 childNodes、children 等的不同语法。例如，如果您使用 Dojo Toolkit，则可以调用 toObject() 函数来创建包含值的对象。

标签： javascript forms dom

【解决方案1】：

我不明白你的困难。看来您了解how to get Javascript form elements。如果没有，请查看链接。这是表单中的how to get elements。

如果您想要一个键值对，请创建一个 JSON 对象。这是technical overview。 Here's a cute example.

...所以，在您的用例中：

var formStuffy = {
   "formName" : [
       { "formElementName" : document.getElementByName(formElementName).value },
   ]
}

或类似的东西（没有测试出 sn-p，但从概念上讲它应该在球场上。）

编辑：根据操作的澄清，他想自动获取表单字段的值，您可以使用这样的元素来询问表单的命名元素和值：

for (i=0; i<theform.elements.length; i++){
  alert("element name is " + theform.elements[i].name + " value " + theform.elements[i].value);
}

【讨论】：

谢谢！您走在正确的轨道上，但我希望能够加载 JSON 对象而不必明确声明“formElementName”。我希望它能够检测到它们并给我.name 和.value 对，就像elements[] 集合会给我一个.value 数组一样。我不介意自己编写一个函数来收集这些数据，但我想知道在哪里可以找到这些信息。

【解决方案2】：

我不确定我是否正确理解了您的问题，我通常建议不要使用古老的（1996 年）forms.elements.blah 语法，但话又说回来，如果它适用于您当前的情况，请选择它。

如果我正确地解释了您的问题，您有一个包含多个字段的表单，如果这些字段存储在关系数据库中，则表示通过呈现该数据库中的表或视图中的许多行而形成的列.在幼稚的实现的情况下，这将导致表单中存在许多同名字段的情况。这不一定是一件坏事，实际上对于诸如一组允许多项选择的复选框之类的情况是必需的。但是，在这些明确定义的情况之外，应尽可能避免此类情况。

无论如何，抛开更重要的问题，让我们假设一个具有以下结构的表格：

<form name="banana" action="bananaform">
    <input name="skin">
    <input name="skin">
    <input name="skin">
</form>

此标记将生成一个包含三个文本输入的表单，每个输入名为“skin”，位于名为“banana”的表单中。然后每个输入的值将作为

document.forms["banana"]["skin"][0],

document.forms["banana"]["skin"][1]，和

document.forms["banana"]["skin"][2].

换句话说，特定形式的同名元素成为类似数组的元素集合，并且可以通过标准数组索引语法访问。

重要的是要注意，由于这些结构是文档对象模型 (DOM) 的一部分，因此任何给定的实现都没有正式要求支持将它们视为原生 JavaScript 数组，因此@987654327 等属性@ 和 sort 等方法可能并非在所有平台上都受支持。

确实，JQuery 等库的主要目的之一是保护开发人员免受此类异常的影响；不幸的是，上述库现在更常用于让开发人员保持对他们工作的真实性质的无知，同时设法创造一种能力的印象。如果您继续使用 JavaScript 和 DOM 并且不使用 JQuery，那么您将很快成为一个更有能力的 Web 开发人员，而不是 99% 急于用快速的“n”脏 JQuery 解决方案回答 Stack Overflow 上的每个 JavaScript 问题的人这既不被寻求也不想要。

我不是唯一一个会立即拒绝任何没有 JQuery 就无法工作的 Web 开发人员职位候选人的人。事实上，我希望任何使用 JQuery 的人都已经阅读并理解了源代码。那些没有的人很容易被识别；例如，他们认为 JQuery 有一种不同于众所周知的技术的魔力。

再一次，有时，那些知道众所周知的技术但没有阅读源代码的人会犯同样的错误，认为这是一种神奇的调味汁，正如 Eric 在这里对我的回答的评论中所看到的那样：Unexpected Caching of AJAX results in IE8（对不起，埃里克 ;-))

【讨论】：

与您一起讨论 jQuery 咆哮，但 elements 表单对象集合到底有什么问题？
+1 表示“所述库现在更常用于让开发人员在设法营造胜任印象的同时，仍然不了解他们所使用的工具的真实性质。”来自利用库并相信“魔法酱”的开发人员。

【解决方案3】：

您正在寻找JavaScript ForEach Equivalent。

for(var elementName in form.elements)
{
    alert("form."+elementName+": "+elements[elementName]);
}

【讨论】：