当文本框名称包含方括号时，Javascript 不起作用

Question

我有这个计算正方形面积的脚本，它非常有效：

<script language="javascript" type="text/javascript">
function startCalc(){
  interval = setInterval("calc()",1);
}
function calc(){
  one = document.autoSumForm.firstBox.value;
  two = document.autoSumForm.secondBox.value; 
  document.autoSumForm.Area.value = (one * 1) * (two * 1);
}
function stopCalc(){
  clearInterval(interval);
}
</script>

<form name="autoSumForm">
<input  size="3"  type=text name="firstBox" value="" onFocus="startCalc();" onBlur="stopCalc();">
<input  size="3"  type=text name="secondBox" value="" onFocus="startCalc();" onBlur="stopCalc();">
<input  size="4"  type=text name="Area" readonly="true">
</form>

但我的问题是我需要第三个框的名称是Area[<?php echo $area['area_id']; ?>] Area[<?php echo $area['area_id']; ?>]

但是当我在名称中使用括号时，我无法让 javascript 工作。

Answer 1

请注意，如果不需要括号，则不应添加括号！ 它使它变得不必要的复杂。

在您发布的代码中，没有迹象表明您需要这些括号。 如果您有多个具有相同名称的输入字段并且您希望 PHP 创建一个数组，则通常添加它们。 有关更多信息，请参阅来自外部来源的变量。

如果您需要它们，您必须使用括号表示法来访问该字段：

document.autoSumForm['Area[<?php echo $area["area_id"]; ?>]'].value = (one * 1) * (two * 1);

另外我建议不要在字段名称的括号内传递值。 这会将您的代码简化为：

<input  size="4"  type=text name="Area[]" readonly="true">

和：

document.autoSumForm['Area[]'].value = (one * 1) * (two * 1);

然后 PHP 将创建一个数组，其中包含从0开始的连续数字键。

Answer 2

虽然 Felix 的答案适用于大多数（所有？）浏览器，但应注意 HTML 名称和 ID 应该是有效标识符，不能包含方括号。 正确的解决方案是不要在您的姓名和 ID 中使用方括号。

编辑：我的立场得到纠正。 在 HTML 4 中，“id”属性是类型 ID，但表单元素的“名称”属性是 CDATA 类型，因此几乎可以包含任何内容。 见http://www.w3.org/TR/html4/index/attributes.html

我可能在想 meta 'name'，它是 NAME 类型。

Answer 3

1. 将 id 添加到 textarea

   <input size="4" type=text name="Area" id="someid" readonly="true">

2. 按 id 放置值

   document.getElementById('someid').value = (one * 1) * (two * 1);

Answer 4

我会在第三个框（第三个输入）中添加一个“id”属性，并给 id 一个不带方括号的值。

将“id”属性用于 select javascript 代码中的 DOM 元素。 并让 'name' 属性保留其方括号。