Can't set focus to new text box after using table.appendChild()

[NeeNee]

I am creating an order entry form which displays the first table row immediately and allows the user to add rows dynamically using a javascript function.

My function works great to add the row, but I cannot set focus to its first input field to allow the user to start entering data. I have to use my mouse to click in the field.

Here is my table HTML Code.
<table width="90%" align="center" id="tblItems" cellpadding="3" cellspacing="1" bgcolor="#003366" border="0">
<tbody>
<tr bgcolor="#D7DFE1">
<td width="12%%"><strong>Qty</strong></td>
<td width="13%%"><strong>Unit</strong></td>
<td width="35%"><strong>Description</strong></td>
<td width="10%" align="center"><strong>GST Exempt</strong></td>
<td width="10%" align="center"><strong>PST Exempt</strong></td>
<td width="10%"><strong>Unit Cost</strong></td>
<td width="10%"><strong>Total Cost</strong></td>
</tr>
<tr bgcolor="#FFFFFF">
<td valign="top">
<input type="text" tabindex=31 name="txtItemQty1" id="txtItemQty1" size="2" value="0" onchange="calculateCost(1);">
</td>
<td valign="top">
<input type="text" tabindex=32 name="txtItemUnit1" id="txtItemUnit1" size="4" maxlength="4">
</td>
<td valign="top">
<textarea tabindex=33 name="txtItemDesc1" id="txtItemDesc1" rows="2" cols="40"></textarea>
</td>
<td valign="top" align="center">
<input type="checkbox" tabindex=34 name="chkGSTExempt1" id="chkGSTExempt1" value="E" onclick="calculateCost(1);">
</td>
<td valign="top" align="center">
<input type="checkbox" tabindex=35 name="chkPSTExempt1" id="chkPSTExempt1" value="N" onclick="calculateCost(1);">
</td>
<td valign="top">
<input type="text" tabindex=36 name="txtItemCost1" id="txtItemCost1" size="6" value="0.00" onchange="calculateCost(1);" onblur="gotoRowButton();">
</td>
<td valign="top">
<input type="hidden" name="txtGSTTotal1" id="txtGSTTotal1" value="0.00">
<input type="hidden" name="txtPSTTotal1" id="txtPSTTotal1" value="0.00">
<input type="text" tabindex=0 name="txtItemTotal1" id="txtItemTotal1" size="6" value="0.00" readonly>
</td>
</tr>
</tbody>
</table>


**************************************************
When adding rows, I have row counter to make sure that each field has a unique name and id.

And here is my javascript addRow function;

function addRow() {

//check that quantity above has been entered
if ( document.forms['frmPOReqEntry'].elements['txtItemQty' + itemCount].value == 0 ) {
alert("You must enter a quantity in the previous line before adding a new row.");
return false;
}

itemCount = parseInt(itemCount) + 1;

if (itemCount >= 100) {
alert("The maximum number of items per purchase requisition cannot exceed 99.");
return false;
}
else {
document.getElementById('frmPOReqEntry').txtItemCount.value = itemCount;
}

var table = document.getElementById("tblItems").getElementsByTagName("TBODY")[0];

var row = document.createElement("tr");
row.setAttribute('bgColor','#FFFFFF');
var td1 = document.createElement("td");
td1.setAttribute('vAlign','top');
var input1 = document.createElement("input");
input1.setAttribute('type','text');
input1.setAttribute('id','txtItemQty' + itemCount);
input1.setAttribute('name','txtItemQty' + itemCount);
input1.setAttribute('size', '2');
input1.setAttribute('value','0');

//if NN6 then OK to use the standard setAttribute
if ((!document.all)&&(document.getElementById)){
input1.setAttribute("onchange","calculateCost(" + itemCount + ")");
}
//workaround for IE 5.x
if ((document.all)&&(document.getElementById)){
input1["onchange"]=new Function("calculateCost(" + itemCount + ")");
}

var td2 = document.createElement("td");
td2.setAttribute('vAlign','top');
var input2 = document.createElement("input");
input2.setAttribute('type','text');
input2.setAttribute('id','txtItemUnit' + itemCount);
input2.setAttribute('name','txtItemUnit' + itemCount);
input2.setAttribute('size','4');
input2.setAttribute('maxLength','4');
var td4 = document.createElement("td");
td4.setAttribute('vAlign','top');
var input4 = document.createElement("textarea");
input4.setAttribute('id','txtItemDesc' + itemCount);
input4.setAttribute('name','txtItemDesc' + itemCount);
input4.setAttribute('cols','40');
input4.setAttribute('rows','2');
var td5 = document.createElement("td");
td5.setAttribute('vAlign','top');
td5.setAttribute('align','center');
var input5 = document.createElement("input")
input5.setAttribute('type','checkbox');
input5.setAttribute('id','chkGSTExempt' + itemCount);
input5.setAttribute('name','chkGSTExempt' + itemCount);
input5.setAttribute('value','T');

//if NN6 then OK to use the standard setAttribute
if ((!document.all)&&(document.getElementById)){
input5.setAttribute("onclick","calculateCost(" + itemCount + ")");
}
//workaround for IE 5.x
if ((document.all)&&(document.getElementById)){
input5["onclick"]=new Function("calculateCost(" + itemCount + ")");
}

var td6 = document.createElement("td");
td6.setAttribute('align','center');
td6.setAttribute('vAlign','top');
var input6 = document.createElement("input")
input6.setAttribute('type','checkbox');
input6.setAttribute('id','chkPSTExempt' + itemCount);
input6.setAttribute('name','chkPSTExempt' + itemCount);
input6.setAttribute('value','Y');

//if NN6 then OK to use the standard setAttribute
if ((!document.all)&&(document.getElementById)){
input6.setAttribute("onclick","calculateCost(" + itemCount + ")");
}
//workaround for IE 5.x
if ((document.all)&&(document.getElementById)){
input6["onclick"]=new Function("calculateCost(" + itemCount + ")");
}

var td7 = document.createElement("td");
td7.setAttribute('vAlign','top');
var input7 = document.createElement("input");
input7.setAttribute('type','text');
input7.setAttribute('id','txtItemCost' + itemCount);
input7.setAttribute('name','txtItemCost' + itemCount);
input7.setAttribute('size','6');
input7.setAttribute('value','0.00');

//if NN6 then OK to use the standard setAttribute
if ((!document.all)&&(document.getElementById)){
input7.setAttribute("onchange","calculateCost(" + itemCount + ")");
input7.setAttribute("onblur","gotoRowButton()");
}
//workaround for IE 5.x
if ((document.all)&&(document.getElementById)){
input7["onchange"]=new Function("calculateCost(" + itemCount + ")");
input7["onblur"]=new Function("gotoRowButton()");
}

var td8 = document.createElement("td");
td8.setAttribute('vAlign','top');
var input8 = document.createElement("input");
input8.setAttribute('type','text');
input8.setAttribute('id','txtItemTotal' + itemCount);
input8.setAttribute('name','txtItemTotal' + itemCount);
input8.setAttribute('size','6');
input8.setAttribute('readOnly','true');
input8.setAttribute('value','0.00');
var input9 = document.createElement("input");
input9.setAttribute('type','hidden');
input9.setAttribute('name','txtGSTTotal' + itemCount);
input9.setAttribute('id','txtGSTTotal' + itemCount);
input9.setAttribute('value','0.00');
var input10 = document.createElement("input");
input10.setAttribute('type','hidden');
input10.setAttribute('name','txtPSTTotal' + itemCount);
input10.setAttribute('id','txtPSTTotal' + itemCount);
input10.setAttribute('value','0.00');

td1.appendChild(input1);
td2.appendChild(input2);
//td3.appendChild(input3);
td4.appendChild(input4);
td5.appendChild(input5);
td6.appendChild(input6);
td7.appendChild(input7);
td8.appendChild(input8);
td8.appendChild(input9);
td8.appendChild(input10);
row.appendChild(td1);
row.appendChild(td2);
//row.appendChild(td3);
row.appendChild(td4);
row.appendChild(td5);
row.appendChild(td6);
row.appendChild(td7);
row.appendChild(td8);
table.appendChild(row);

document.getElementById("txtItemQty"+ itemCount).focus;

}

I don't get a javascript error when adding the row, so I know my syntax is correct. I am using IE 6.0. I also tried with Firefox and it also did not work.

What am I doing wrong?


Everything works great, but its almost as if


Denis
Programmer, Canada

 

[monksnake]

I see you have this:

itemCount = parseInt(itemCount) + 1;

Where does itemCount get first initialized at?

If the code that I have selected is it, then at least one of your problems is you are creating more than one item with the same ID. To fix this, outside of your function in your script tag put something the following:

var itemCount = 0;

and I recommend the increase of itemCount be placed at the bottom of your function and like this:

itemCount++;

[small]"There's an old saying in Tennessee — I know it's in Texas, probably in Tennessee — that says, fool me once, shame on — shame on you. Fool me — you can't get fooled again." - George W. Bush[/small]
<.

 

[JoelCohen]

The error is a simple one that I make all the time.

The focus method needs the parentheses after it.

so your line:

document.getElementById("txtItemQty"+ itemCount).focus;

should read (see parentheses at the end of the line):

document.getElementById("txtItemQty"+ itemCount).focus();

But be warned: In IE, for some reason, when you dyamically create a table, it won't let you set the focus. I've been looking for a fix to this other than putting a static area in my HTML that I can point to. If you know the answer to this, please let me know.

Good luck.

Joel Cohen

 

[DannyAtPolonious]

Hi Joel,

I met the same problem,and got here by google.
now I got a workaround.I'd liked to share it with you.

To fix this problem,you need create a form to wrap this text box.

Danny at Polonious

 

[NeeNee]

Thanks to all who helped. The error was the missing quotes at the end of the function.

thanks.

Denis
Programmer, Canada

 

[leseb]

Hi NeeNee, I still don't get it.
What quotes are you talking about?
Did you mean the parentheses as advised above?

If not, can you paste the line containing the error and then the corrected line.

Thank you.