Javascript读取多维表单答案

【问题标题】：Javascript reading multidimensional formJavascript读取多维表单
【发布时间】：2014-02-10 18:34:14
【问题描述】：

这让我今天下午“大吃一惊”！

供应商 (Zaxaa) 使用多维形式，因此：

<form method="post" name="zaxaa" action="xxxx">
<input type="text" name="products[0][prod_name]" value="ABC">
<input type="text" name="products[0][prod_type]" id="pt" value="FRONTEND">
</form>

**这是我对如何设置多维数组的理解，并且似乎可以将变量传递给服务器。

但是，根据测试表单上设置的其他输入，[prod_type]（和其他）可能需要更改为“OTO”这显然是一个 javascript 函数，（但不是在代码行上以“$”开头......无论那种类型是什么！）

我试过了

document.zaxaa.products[0].prod_type.value
document.getElementById('products[0][prod_type]').value
document.getElementsByName('products[0][prod_type]').value

但在任何情况下，我都会得到“未定义产品”。（我已经简化了表格，因为有十个 product[0] 字段）

我已经解决了...主要是我的一个明显错误。 getElementById 工作得很好......除了在我的测试脚本中我使用了 getElementById[xxx] 而不是 getElementById(xxx)！即 "[" 而不是 "(" 如果你的语法正确的话会有帮助！

但我会注意那些其他方法，例如将两个数组参数都包含在 ["xxx"] 中。

【问题讨论】：

以“$”开头的变体抱歉，我笑了。
是的，我仍然对那种类型一无所知。关心开导？我只在服务器端 PERL 脚本上使用“$”，而不是在我的 HTML 代码中。我错过了什么吗？这是一种编写 Javascript 的新方法吗？速记？？
对不起，我不是说你无知。我只是觉得有点好笑。该符号通常由名为 jQuery 的 JavaScript 框架使用。这是它是什么的nice introduction。享受吧。

标签： javascript multidimensional-array forms http-post

【解决方案1】：

getElementById 不起作用，因为其中唯一一个具有 id 的元素是第二个输入，即 id="pt"。

在any modern browser 上，您可以使用querySelector 使用CSS 选择器获取输入列表：

var nameInput = document.querySelector('input[name="products[0][prod_name]"]');
var typeInput = document.querySelector('input[name="products[0][prod_type]"]');

然后使用他们的value 属性。例如，将名称设置为"OTO"：

document.querySelector('input[name="products[0][prod_name]"]').value = "OTO";

如果您需要相关inputs 的列表，请使用querySelectorAll，例如：

var nameInputs = document.querySelectorAll('input[name="products[0][prod_name]"]');

然后根据需要循环遍历它们（列表为length，您可以通过[n] 访问元素，其中n 是0 到length - 1）。

* 这是我对如何设置多维数组的理解...

HTML 所做的只是用name 属性定义input 元素。该名称属性按原样发送到服务器，如果您有多个具有该名称的字段，则根据需要重复。任何将它们变成数组的东西都是服务器端的，与客户端上的 JavaScript 无关。（[0] 不常见，我习惯于简单地看到[]，例如name="products[][prod_name]"。）

【讨论】：

【解决方案2】：

您可以使用以下语法访问它：

document.zaxaa['products[0][prod_name]'].value

【讨论】：

【解决方案3】：

document.zaxaa.products[0].prod_type.value

名称是单个字符串，不构成嵌套结构来访问输入。应该是

document.zaxaa["products[0][prod_type]"].value
// or better:
document.forms.zaxaa.elements["products[0][prod_type]"].value

复杂的名称仅用于在服务器端将数据解析为（多维）数组，但所有数据都将“扁平化”发送。

document.getElementById('products[0][prod_type]').value

您输入的id 是pt，所以这应该也可以：

document.getElementById("pt").value

document.getElementsByName('products[0][prod_type]').value

getElementsByName 确实返回多个元素的集合 - 它本身没有 .value 属性。相反，访问集合中的第一个元素（或完全迭代它）：

document.getElementsByName('products[0][prod_type]')[0].value

【讨论】：