dynamic writing of forms

[charlesb]

I am working on a web site page that has me stopped over something I think should work. I am creating some parts of form dynamically, using the script below:

<script language="javascript" type="text/javascript">

for (j=0; j<numberOtherItems; j++)
{ var pitem = "otherPart" + j;
var iitem = "otherItem" + j;
var ditem = "otherPrice" + j;
var qitem = "otherQuantity" + j;
var sitem = "otherSubTotal" + j;

document.write("<tr>");
document.write("<td><input type='text' name='" + pitem + "'size='5' onfocus='blur()' /></td>");
document.write("<td><input type='text' name='" + iitem + "' size='20' onfocus='blur()' /></td>");
document.write("<td><input type='text' name='" + ditem + "' size='11' onfocus='blur()' /></td>");
document.write("<td align='center'><input type='text' name='" + qitem + "' size='5' onchange='calcAmount()' /></td>");
document.write("<td><input type='text' name='" + sitem + "' size='11' onfocus='blur()' /></td>");
document.write("</tr>");
} //end for
</script>

As you can see, this will create a set of cells five wide by the number of rows set by the variable numberOtherItems. It will also give each cell a unique identifier of the form "otherPart0" for the first cell, and so on.

What I want to do is to be able to unwind an array of values into the cells using a loop structure. I have tried code of the format below:

for (i=0; i<numberOtherItems; i++)
{
var pitem = "otherPart" + i;
var iitem = "otherItem" + i;
var ditem = "otherPrice" + i;
var qitem = "otherQuantity" + i;
var sitem = "otherSubTotal" + i;

document.OTDSupply.pitem.value=others[i].itemPartNum;

}

(The value is coming from an array of custom objects, and itemPartNum is a numerical property of that object. A simular asignment statement works fine when it is coded for each individual cell ID in a bunch of assignment statements.)

As you can see, this largly reflects the code I wrote to create the form structure, and I know that code works. However, this piece of code above doesn't work, giving me an error on the "pitem" variable in the document.OTDSupply.pitem.value=others[i].itemPartNum; line of code.

Any ideas on where I'm going wrong here??

[charlesb]

Thanks for the great forum! By looking over some of the other postings, I managed to figure out how to make my problem resolve.

<script language="javascript" type="text/javascript">

for (j=0; j<others.length; j++)

//this loop create the spaces for the other items display

{ var pitem = "otherPart" + j;
var iitem = "otherItem" + j;
var ditem = "otherPrice" + j;
var qitem = "otherQuantity" + j;
var sitem = "otherSubTotal" + j;
//create cells
document.write("<tr>");
document.write("<td><input type='text' name='" + pitem + "' size='5' onfocus='blur()' /></td>");
document.write("<td><input type='text' name='" + iitem + "' size='20' onfocus='blur()' /></td>");
document.write("<td><input type='text' name='" + ditem + "' size='11' onfocus='blur()' /></td>");
document.write("<td align='center'><input type='text' name='" + qitem + "' size='5' onchange='calcAmount()' /></td>");
document.write("<td><input type='text' name='" + sitem + "' size='11' onfocus='blur()' /></td>");
document.write("</tr>");
//populate cells
document.getElementById(pitem).value=others[j].itemPartNum;
document.getElementById(iitem).value=others[j].itemName;
document.getElementById(ditem).value="$" + others[j].itemPrice;
document.getElementById(qitem).value=0;
document.getElementById(sitem).value="$" + 0 + ".00";
} //end for
</script>

As you can see, the first part is the same as before. Using the getElementById() method then allows me to 'unwind' my array holding the data into the cells for display.

[mwinter]

<script language="javascript" type="text/javascript">

The language attribute has long been deprecated. Omit it.

document.write("<td><input type='text' name='" + pitem + "' size='5' onfocus='blur()' /></td>");

[...]

document.getElementById(pitem).value=others[j].itemPartNum;

If you tested that in Firefox, you should find that it errors-out. The document.getElementById method, as its name suggests, obtains an element reference according to the id attribute, but none exists in your code. IE is broken in this regard.

Your code also assumes that the blur method will be in the scope chain of your focus event listeners. There is no reason for this to be the case. Use the this operator to obtain a reference to the control, then call its blur method:

onfocus="this.blur();"

In answer to your previous question, use bracket notation instead of the dot operator. The former allows expressions to be used, so one may construct a property name at run-time, or use a variable or function return value to provide one.

document.forms.OTDSupply.elements['otherPart' + j].value = others[j].itemPartNum;

Mike

[charlesb]

Thanks for bringing me up-to-date on several issues. I was still using the methods I had been taught in college several years ago, and missed out on the depreciation of the language attribute. The comment about using the "this." operator also helps, and is a good code practice I need to incorporate.

As to the comment about the mis-use of the .getElementById method, I think I picked that up from a book somewhere. Just goes to show even authors don't always check carefully enough. So if I was to use a statment like this:

document.write("<td><input type='text' id='" + pitem + "' size='5' onfocus='blur()' /></td>");

that might have less of a chance of breaking than assigning pitem to the name attribute?

Finally, in using bracket notation, I see you went to the elements array of the document. The bracket, then contains the value for the item in the elements array, rather than using the .getElementById method to find the item referance. Do I understand that correctly?

[mwinter]

As to the comment about the mis-use of the .getElementById method, I think I picked that up from a book somewhere. Just goes to show even authors don't always check carefully enough.

Many books on browser scripting are badly written. The comp.lang.javascript Usenet group only currently recommends one.

So if I was to use a statment like this:

document.write("<td><input type='text' id='" + pitem + "' size='5' onfocus='blur()' /></td>");

that might have less of a chance of breaking than assigning pitem to the name attribute?

If you intend to submit that control, then you have no choice but to use the name attribute. Accessing form controls contained within a form element by name is preferred anyway as it will work on more browsers.

Finally, in using bracket notation, I see you went to the elements array of the document.

The elements object is a collection, not an array. The only similarity between the two is that both are object, and have properties with numeric names between 0 and (obj.length - 1). They're completely different, otherwise.

Bracket notation is a form of property accessor, so it can be used with any object, not just arrays.

The bracket, then contains the value for the item in the elements array, rather than using the .getElementById method to find the item referance. Do I understand that correctly?

I'm not sure. It's not always obvious what someone knows until they try to explain it in detail to someone else. Or until they try to use a feature and have problems.

The brackets surround an expression. This expression is evaluated and the result is converted to a string (this even happens with numbers). This string is used as a property name.

The elements collection contains all form controls within a form object as properties. Each control is included using its name and id attribute values (if it has them), and its ordinal number (so the first control in source order is property 0, the second is 1, and so on).

The code I posted previously will create a property name that will match the name attributes for one of the form controls. This name will be looked up within the elements collection, yielding a reference to that control.

If that's what you understood from my previous post, then I don't think there are any problems.

By coincidence, I posted a fairly detailed explanation regarding this sort of thing on Usenet this morning. Read it if you like.

Mike