Javascript doesn't work when textbox name contains square brackets - php

Question

I've got this script for calculating square area, which works perfect:
<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>
But my problem is that I need the name of the third box to be Area[<?php echo $area['area_id']; ?>]
But I can't get the javascript to work, when I use brackets in the name.

Answer 1

Note that you should not add the brackets if you don't need them! It makes it unnecessary complex.
In your posted code there is no indication that you need those brackets. You normally add them if you have several input fields with the same name and you want PHP to create an array. For more information please refer to Variables From External Sources.
In case you need them, you have to use bracket notation to access the field:
document.autoSumForm['Area[<?php echo $area["area_id"]; ?>]'].value = (one * 1) * (two * 1);
Also I would suggest to not pass a value inside the brackets in the name of the field. This would simplify your code to:
<input size="4" type=text name="Area[]" readonly="true">
and:
document.autoSumForm['Area[]'].value = (one * 1) * (two * 1);
PHP will then create an array with continuous numerical keys starting at 0.

Answer 2

Add id to textarea
<input size="4" type=text name="Area" id="someid" readonly="true">
Put value by id
document.getElementById('someid').value = (one * 1) * (two * 1);

Answer 3

While Felix's answer will work in most (all?) browsers, it should be noted that HTML names and IDs are supposed to be valid identifiers, which cannot contain square brackets. The correct solution is to not use square brackets in your names and IDs.
EDIT: I stand corrected. In HTML 4, The 'id' attribute is type ID, but the 'name' attribute for form elements is type CDATA, so can contain practically anything. See http://www.w3.org/TR/html4/index/attributes.html
I was probably thinking of meta 'name', which is type NAME.

Answer 4

I would add an 'id' attribute to the third box (third input) and give the id a value without square brackets.
Use the 'id' attribute to select the DOM element in your javascript code. And let the 'name' attribute keeps its square brackets.