當文本框名稱包含方括號時，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' 屬性保留其方括號。