PDA

Click to See Complete Forum and Search --> : Gaining focus...

bigkahuna7569
07-16-2004, 01:18 PM
Vladdy and Schizo were gracious enough to help me on a problem. Thanks guys!!!! I now have another one. When creating a dynamic row with:

<script>
function addRow(){

//var listInputs = document.getElementsByName("first").length;

table = document.getElementById("myTable").childNodes[0];
newRow = table.rows[0].cloneNode(true);
table.appendChild(newRow);
}
</script>

I get the new row, but the new row doesn't get the focus in the first field "name='first'". As you can see in the comment, I grab the length of the element to try to get the focus into the new row(s) when it is created. I can't get past this part. What am I doing wrong?

Thanks
Ken
Jona
07-16-2004, 04:44 PM
Hello Ken,

Could you explain, in more detail, what it is you mean by "focus"? Also, could you provide an example web page that I may view, please?
russell
07-16-2004, 05:00 PM
Looking at your Other Post (http://www.webdeveloper.com/forum/showthread.php?threadid=39196) I see that the form element itself isn't included in the solution. In any event, you'll need to either find the name, id, or index of the newly created element in the new row, then you can set the focus.

Let's assume that the new element is the 2nd to last element in the form (the button being the last), as each time the appendChild() method is called, it adds a row to the table with a new input type=text in the row. Building on the solution they gave you, you could do something like this:

document.myForm.elements[myForm.length-1].focus();


You may have to subtract more than 1 from myForm.length if there are other elements after the table, or more than one element created when the new row is appended.
bigkahuna7569
07-20-2004, 02:36 PM
The code is below... Now, I have trouble just creating the row. Now, I get the headers and the new row. Any ideas?

<tr>
<td height="120" align="center" valign="top"><table id="tblAllocate" width="94%" border="1" cellpadding="0" cellspacing="0">
<tr align="center" valign="middle" class="cblackbold">
<td colspan="2" class="cItembold">Employee</td>
<td colspan="2" class="cItembold">Job</td>
<td colspan="2" class="cItembold">Regular</td>
<td colspan="2" class="cItembold">Overtime</td>
</tr>
<tr class="cblack">
<td width="9%" class="cdbclickblack"><div align="center">Emp#</div></td>
<td width="30%" class="TableHeadersm"><div align="center">Name</div></td>
<td width="7%" class="cdbclickblack"><div align="center">Job#</div></td>
<td width="16%" class="TableHeadersm"><div align="center">Description</div></td>
<td width="5%" class="TableHeadersm"><div align="center">Hours</div></td>
<td width="6%" class="TableHeadersm"><div align="center">Mins</div></td>
<td width="5%" class="TableHeadersm"><div align="center">Hours</div></td>
<td width="9%" class="TableHeadersm"><div align="center">Mins</div></td>
</tr>

<tr align="center" valign="middle" class="cblackbold">
<td><div align="center">
<input type="text" name="empNo" id="" value="" onDblClick="" onChange="" onFocus="" onBlur="" size="6" maxlength="12">
</div></td>
<td><div align="center">
<input type="text" name="name" id="" value="" size="25" onFocus="" onBlur="" >
</div></td>
<td><div align="center">
<input type="text" name="jobNo" id="" value="" onDblClick="" size="2" maxlength="5" onChange="" onFocus="" onBlur="">
</div></td>
<td><div align="center">
<input type="text" name="jobDesc" id="" value="" size="12" onFocus="" onBlur="">
</div></td>
<td><div align="center">
<input type="text" name="regularHours" id="" value="" size="2" maxlength="2" onkeypress="return ('0123456789'+(this.value.indexOf('.')>-1?'':'.')).indexOf(String.fromCharCode(event.keyCode))>-1" onFocus="" onBlur="">
</div></td>
<td><div align="center">
<input type="text" name="regularMins" id="" value="" size="2" maxlength="2" onkeypress="return ('0123456789'+(this.value.indexOf('.')>-1?'':'.')).indexOf(String.fromCharCode(event.keyCode))>-1" onFocus="" onBlur="">
</div></td>
<td><div align="center">
<input type="text" name="overHours" id="" value="" size="2" maxlength="2" onkeypress="return ('0123456789'+(this.value.indexOf('.')>-1?'':'.')).indexOf(String.fromCharCode(event.keyCode))>-1" onFocus="" onBlur="">
</div></td>
<td><div align="center">
<input type="text" name="overMins" id="" value="" size="2" maxlength="2" onkeypress="return ('0123456789'+(this.value.indexOf('.')>-1?'':'.')).indexOf(String.fromCharCode(event.keyCode))>-1" onFocus="" onBlur="addRow(empNo)">
</div></td>
</tr>

</table></td>
</tr>

I am using this code to create the new row:
function addRow(control){

table = document.getElementById("tblAllocate").childNodes[0];
newRow = table.rows[0].cloneNode(true);
table.appendChild(newRow);
document.frmAllocate.elements[frmAllocate.length-3].focus();
}
Jona
07-20-2004, 11:43 PM
Do you think you could post a little more HTML -- but just the bare-bones HTML? Also, could you strip the tables and all other formatting out? I need the whole page so I can give you the most feasible solution, otherwise I may have to tweak more code and may provide the wrong solution for you if I'm misunderstanding the situation. Thanks.
bigkahuna7569
07-21-2004, 09:58 AM
I hope this is what you wanted.

<table id="tblAllocate">
<tr>
<td>Employee</td>
<td>Job</td>
<td>Regular</td>
<td>Overtime</td>
</tr>

<tr>
Emp#</div></td>
<td>Name</div></td>
<td>Job#</div></td>
<td>Description</div></td>
<td>Hours</div></td>
<td>Mins</div></td>
<td>Hours</div></td>
<td>Mins</div></td>
</tr>

<tr>
<td><div align="center">
<input type="text" name="empNo" id="empNo" value="">
</div></td>
<td><div align="center">
<input type="text" name="name" id="" value="" size="25" onFocus="" onBlur="" >
</div></td>
<td><div align="center">
<input type="text" name="jobNo" id="" value="" onDblClick="" size="2" maxlength="5" onChange="" onFocus="" onBlur="">
</div></td>
<td><div align="center">
<input type="text" name="jobDesc" id="" value="" size="12" onFocus="" onBlur="">
</div></td>
<td><div align="center">
<input type="text" name="regularHours" id="" value="" size="2" maxlength="2" onkeypress="return ('0123456789'+(this.value.indexOf('.')>-1?'':'.')).indexOf(String.fromCharCode(event.keyCode))>-1" onFocus="" onBlur="">
</div></td>
<td><div align="center">
<input type="text" name="regularMins" id="" value="" size="2" maxlength="2" onkeypress="return ('0123456789'+(this.value.indexOf('.')>-1?'':'.')).indexOf(String.fromCharCode(event.keyCode))>-1" onFocus="" onBlur="">
</div></td>
<td><div align="center">
<input type="text" name="overHours" id="" value="" size="2" maxlength="2" onkeypress="return ('0123456789'+(this.value.indexOf('.')>-1?'':'.')).indexOf(String.fromCharCode(event.keyCode))>-1" onFocus="" onBlur="">
</div></td>
<td><div align="center">
<input type="text" name="overMins" id="" value="" size="2" maxlength="2" onkeypress="return ('0123456789'+(this.value.indexOf('.')>-1?'':'.')).indexOf(String.fromCharCode(event.keyCode))>-1" onFocus="" onBlur="addRow(empNo)">
</div></td>
</tr>

</table></td>
bigkahuna7569
07-21-2004, 10:01 AM
I hope this is what you wanted. This is the table and I need to create a new row of inputs w/ a tab at the end of the first with focus on the beginning input of the new row.

<table id="tblAllocate">
<tr>
<td>Employee</td>
<td>Job</td>
<td>Regular</td>
<td>Overtime</td>
</tr>

<tr>
Emp#</div></td>
<td>Name</div></td>
<td>Job#</div></td>
<td>Description</div></td>
<td>Hours</div></td>
<td>Mins</div></td>
<td>Hours</div></td>
<td>Mins</div></td>
</tr>

<tr>
<td><div align="center">
<input type="text" name="empNo" id="empNo" value="">
</div></td>
<td><div align="center">
<input type="text" name="name" id="" value="" size="25" onFocus="" onBlur="" >
</div></td>
<td><div align="center">
<input type="text" name="jobNo" id="" value="" onDblClick="" size="2" maxlength="5" onChange="" onFocus="" onBlur="">
</div></td>
<td><div align="center">
<input type="text" name="jobDesc" id="" value="" size="12" onFocus="" onBlur="">
</div></td>
<td><div align="center">
<input type="text" name="regularHours" id="" value="" size="2" maxlength="2" onkeypress="return ('0123456789'+(this.value.indexOf('.')>-1?'':'.')).indexOf(String.fromCharCode(event.keyCode))>-1" onFocus="" onBlur="">
</div></td>
<td><div align="center">
<input type="text" name="regularMins" id="" value="" size="2" maxlength="2" onkeypress="return ('0123456789'+(this.value.indexOf('.')>-1?'':'.')).indexOf(String.fromCharCode(event.keyCode))>-1" onFocus="" onBlur="">
</div></td>
<td><div align="center">
<input type="text" name="overHours" id="" value="" size="2" maxlength="2" onkeypress="return ('0123456789'+(this.value.indexOf('.')>-1?'':'.')).indexOf(String.fromCharCode(event.keyCode))>-1" onFocus="" onBlur="">
</div></td>
<td><div align="center">
<input type="text" name="overMins" id="" value="" size="2" maxlength="2" onkeypress="return ('0123456789'+(this.value.indexOf('.')>-1?'':'.')).indexOf(String.fromCharCode(event.keyCode))>-1" onFocus="" onBlur="addRow(empNo)">
</div></td>
</tr>

</table></td>
Jona
07-21-2004, 05:28 PM
I believe this is what you asked for.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JavaScript Test</title>
<script type="text/javascript">
function addRow(control)
{
var tbl = document.getElementById("tblAllocate");
var newRow = tbl.rows[2].cloneNode(true) ;
tbl.appendChild (newRow);
document.frmAllocate.elements[document.frmAllocate.length-3].focus();
}
</script>
<style type="text/css">
#tblAllocate {
border : solid 1px #000;
width : 100% ;
border-collapse:collapse;
}
#tblAllocate th, td {
border : solid 1px #000;
padding : 5px ;
text-align: center;
}
</style>
</head>
<body>
<form action="#" name="frmAllocate">
<table id="tblAllocate">
<tr>
<th colspan="2">Employee</th>
<th>Job</th>
<th>Regular</th>
<th colspan="4">Overtime</th>
</tr>
<tr>
<td>Emp #</td>
<td>Name </td>
<td>Job #</td>
<td>Description</td>
<td>Hours</td>
<td>Mins </td>
<td>Hours</td>
<td>Mins </td>
</tr>
<tr>
<td><input type="text" name="empNo" id="empNo" value=""></td>
<td><input type="text" name="name" id="" value="" size="25" onFocus="" onBlur="" ></td>
<td><input type="text" name="jobNo" id="" value="" onDblClick="" size="2" maxlength="5"

onChange="" onFocus="" onBlur=""></td>
<td><input type="text" name="jobDesc" id="" value="" size="12" onFocus="" onBlur=""></

td>
<td><input type="text" name="regularHours" id="" value="" size="2" maxlength="2"

onkeypress="return ('0123456789'+(this.value.indexOf('.')>-1?'':'.')).indexOf(String.

fromCharCode(event.keyCode))>-1" onFocus="" onBlur=""></td>
<td><input type="text" name="regularMins" id="" value="" size="2" maxlength="2"

onkeypress="return ('0123456789'+(this.value.indexOf('.')>-1?'':'.')).indexOf(String.

fromCharCode(event.keyCode))>-1" onFocus="" onBlur=""></td>
<td><input type="text" name="overHours" id="" value="" size="2" maxlength="2"

onkeypress="return ('0123456789'+(this.value.indexOf('.')>-1?'':'.')).indexOf(String.

fromCharCode(event.keyCode))>-1" onFocus="" onBlur=""></td>
<td><input type="text" name="overMins" id="" value="" size="2" maxlength="2" onkeypress

="return ('0123456789'+(this.value.indexOf('.')>-1?'':'.')).indexOf(String.fromCharCode(

event.keyCode))>-1" onFocus="" onBlur="addRow()"></td>
</tr>
</form>
</table>
</body>
</html>