Advancing to next field

[Claus Mygind]

I am creating a table dynamically adding lines to the table as the user completes each line. I would like the cursor to appear in the second cell of the new row after it has been created, but I seem to have some problems with that. At this point I am not even using the variable cNextLine I am just trying to advance to the 2nd cell in the 2nd line. The focus seems to go to the address box of the browser.


Here is an abbreviated version of the code:

var cNextLine = 1
function addBlankDetailLine()
{
    cNextLine += 1
    var tr, td;
    tbody = document.getElementById('detailLines');
 
    //make new row
    tr = tbody.insertRow(tbody.rows.length);
 
    //make new cell
    td = tr.insertCell(tr.cells.length);
    //fill in content
    td.innerHTML =    '<input '+
                    'type="text" '+
                    'id  ="rLine~'+cNextLine+'" '+
                    'name="rLine~'+cNextLine+'" '+
                    'value="'+cNextLine+'." '+
                    'size ="4" '+
                    'class="InputText" '+
                    'readonly '+
                    'tabindex="-1" '+
                    '/> '
    //make new cell
    td = tr.insertCell(tr.cells.length);
    td.innerHTML =    '<input '+
                    'type="text" '+
                    'id  ="JOBID~'+cNextLine+'" '+
                    'name="JOBID~'+cNextLine+'" '+
                    'class="InputText" '+
                    '/> '
 
    //make new cell
    td = tr.insertCell(tr.cells.length);
 
    td.innerHTML =    '<input '+
                    'type="text" '+
                    'id  ="TOLLS~'+cNextLine+'" '+
                    'name="TOLLS~'+cNextLine+'" '+
                    'class="InputText" '+
                    'size ="8" '+
                    'maxlength="7" '+
                    'onblur ="if (createNext(this)) {addBlankDetailLine();}" +'
                    '/>'    
document.getElementById("JOBID~2").select;
document.getElementById("JOBID~2").focus();
 
}
 
 

[Atli]

You could add the element using createElement and appendChild, rather than using innerHTML.

Then you would have a reference to the element in a variable, which you could use to set the focus.

Like:

input = document.createElement("input");
input.type = "text";
 
cell = row.insertCell(row.cells.length);
cell.appendChild(input);
 
input.focus();
 

[rnd me]

you have "2" hard-coded into the function that sets focus.

remember that you cannot re-use ids, they must be unique.

thus, you are always trying to focus the same input.
since #2 has not been made the first time; cLine= 0 or 1; you are trying to focus an element using a non-existent id.

[Claus Mygind]

you have "2" hard-coded into the function that sets focus.

remember that you cannot re-use ids, they must be unique.

thus, you are always trying to focus the same input.
since #2 has not been made the first time; cLine= 0 or 1; you are trying to focus an element using a non-existent id.

Thank you for your response, but as noted in my initial response I simply hard coded in the 2 for test purposes and was only looking to get focus on the 2nd line, which I could not do.

[Claus Mygind]

Thank you for your reply.

I tried to implement it but came up with two problems.
1) not all the attributes took
2) it still did not advance to the desired field

Here is my code.

 
    td = tr.insertCell(tr.cells.length);
 
    inputX = document.createElement("input");
    inputX.type = "text";
    inputX.id   = "JOBID~"+cNextLine;
    inputX.name = "JOBID~"+cNextLine;
    inputX.class="InputText";
    inputX.size ="7";
    inputX.maxlength="6";
    inputX.onKeyPress="this.value = this.value.toUpperCase();    return loadPhaseCoder(event, this); return isValidCode(event, this);";
    inputX.onchange ="if (cSetLoc(this)) {isNotEmpty(this); getPrjct(this); DataChanged();}";
 
    td.appendChild(inputX);
 
//////////////////////
additional cells inserted
/////////////////
 
 inputX.focus();
 
 

the output should have looked like this

<input id="JOBID~1" class="InputText" type="text" onchange="if (cSetLoc(this)) {isNotEmpty(this); getPrjct(this); DataChanged();}" onkeypress="this.value = this.value.toUpperCase(); return loadPhaseCoder(event, this); return isValidCode(event, this);" maxlength="6" size="7" name="JOBID~1"/>
 

But this is what I got

<input id="JOBID~2" type="text" name="JOBID~2" size="7"/>
 

[Atli]

Ok.

To set the class, you should use the className property. It works on all the major browsers.

For the other properties that don't work, you could try using the setAttribute function.
Like:

elem.setAttribute("maxlength", "6");
 

The events, however, are a little more complex.
You need to add them using the addEventListener function. (Or attachEvent for IE).

That should be done somewhat like this:

// Create the callback function
callback = function() {
    alert("From the onclick event");
};
 
// Add the event
if (window.addEventListener) { // Standard method
    elem.addEventListener("click", callback, true);
}
else if(window.attachEvent) { // IE workaround
    elem.attachEvent("onclick", callback);
}
 

Note the difference between the Standard method and how IE implements it.
IE also requires that the event is prefixed with "on".