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.

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.

• php
• javascript

Share Improve this question Follow asked Jun 3, 2011 at 12:47 MichaelMichael 23522 gold badges66 silver badges1717 bronze badges 3

• Why you want to set an ID in textarea's name ? Will there be in this form more textareas ? – hsz Commented Jun 3, 2011 at 12:48
• Where does your $area variable e from? – Etienne Marais Commented Jun 3, 2011 at 12:50
• Your suggestion generally works with PHP @Michael and PHP sees Area variable as an array. Check whether your $area['area_id'] contains any invalid character (space, hyphen, etc.) for a good array index. To work with JavaScript, the index must be numeric and (I think) should start with 0 and must be contiguous (0, 1, 2, 3, ...). – Amil Waduwawara Commented Jun 3, 2011 at 12:59

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

Note that you should not add the brackets if you don't need them! It makes it unnecessary plex.

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.

1. Add id to textarea

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

2. Put value by id

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

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/TR/html4/index/attributes.html

I was probably thinking of meta 'name', which is type NAME.

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.