focus problem after alert box. 1

Jacqui1811 · Jun 21, 2004

Can anyone see if I have the following code wrong.
Basically it is meant to pass the focus back to the form field passed in as parameter name.
It is passing the parameter through okay as I have run some debug code to see what value name has and it has the correct value.
If I hard code a form field name in it focuses okay but I need to focus on the form field passed in.
I really would appreciate the help guys.

<script language="javascript">
function updatePhasing(name,value)
{
if(isNaN(value))
{
alert("Invalid data format.\n\nOnly numbers are allowed.");
return ;
name.focus();
}
else
{
window.location='CTRPhasing.asp?name='+name+'&value='+value+'&update=yes&ctrScopeID=<%=ctrScopeID%>&year=<%=filterYearID%>' ;
}
}

</script>

kaht · Jun 21, 2004

if you have the name of the field declared like this: name=blah then use this method:

Code:

document.forms[0].elements[name].focus();

or if you have the field declared like this: id=blah then use this method:

Code:

document.getElementById(name).focus();

-kaht

Jacqui1811 · Jun 21, 2004

I have tried those and no luck with them unfortunately. It still returns focus to the next field along.
Any other ideas ?
J

kaht · Jun 21, 2004

Run your page and post the full "view source" so that I can test it myself. There's probably something screwy going on that you haven't posted so it's hard to guess what could be wrong. What I provided should have worked.

-kaht

adam0101 · Jun 21, 2004

Get rid of the "return ;" or put it after the focus().

Adam
while(ignorance){perpetuate(violence,fear,hatred);life=life-1};

kaht · Jun 21, 2004

ahh.... good eye adam, I didn't even notice that

-kaht

Jacqui1811 · Jun 21, 2004

Here is the full code guys.
I did remove the return but still no go.

<!DOCTYPE html PUBLIC "-//W3C//DTD/ XHTML 1.0 transitional//en""

http://www.w3.org/tr/xhtml1/dtd/transitional.dtd">

<html>
<head>
<title>Budget Update Compilate</title>
<link rel="stylesheet" type="text/css" href="../includes/stylesheet.css" >
</head>
<body>

<script language="javascript">

function updatePhasing(name,value)

{
if(isNaN(value))
{

alert("Invalid data format.\n\nOnly numbers are allowed.");

document.getElementById(name).focus();

}
else
{
window.location='CTRPhasing.asp?name='+name+'&value='+value+'&update=yes&ctrScopeID=1092&year=' ;
}
}

</script>

<script language="javascript">
function setfocus()
{
window.document.phasing.month_10_1.focus() ;
}
</script>

<body onLoad="setfocus();">

<table class="details" align="center" border="0" cellpadding="0" width="90%">
<tr>
<td width="25%"><img src="images/EniGroup2.gif"/></td>
<th class="header">
<table cellpadding="0">
<tr><th class="header">B.U.C.S.</th></tr>
<tr><td class="header">UPDATE PHASING</td></tr>
</table>
</th>
<td width="25%" align="right"><img src="images/budgetCycle.gif" /></td>
</td>
</tr>
</table>
<hr class="login" />

<link rel="stylesheet" type="text/css" href="../includes/stylesheet.css" >

<table align="center" class="fullDetails" cellspacing="4" border ="0" width="85%">
<tr>
<th class="heading" align="right">
System Ref :
</th>
<td>
<fieldset class="unchangeable" style="width:60px">1092</fieldset>
</td>
<th align="right" class="heading">
BU Number :
</th>
<td>

<fieldset class="unchangeable">           </fieldset>

</td>
<th class="heading" align="right">
BU Type :
</th>
<td>
<fieldset class="unchangeable" align="left">PJ</fieldset>
</td>
<th class="heading" align="right">
Description :
</th>
<td colspan="3">
<fieldset class="unchangeable" >Build Island B</fieldset>
</td>
</tr>
<tr>
<td colspan="10">
<table width="75%" align="center">
<tr>
<th class="heading">Inception Date :</th>
<td align="center" ><fieldset class="unchangeable">1 Jun 2004</td>
<td>           </td>
<th class="heading">Completion Date :</th>
<td align="center"><fieldset class="unchangeable">31 Oct 2005</fieldset></td>
</tr>
</table>
</td>
</tr>
</table>
<hr class="seperator" />

<div align="center">
<form name="phasing" action="addNewDetails.asp?section=phasing&ctrScopeID=1092" method="post">
<input class="phasing" type="submit" name= "submit" value="Save & Add S/M" />
 
<input class="phasing" type="submit" name="submit" value="Save & Home" />
 
<input class="phasing" type="submit" name="submit" value="Save & Add Notes" />
<br /><br />
<table class="details"> <tr><th><a href="CTRPhasing.asp?year=1&ctrScopeID=1092&page=CTRPhasing.asp"/>04</a></th><th><a href="CTRPhasing.asp?year=2&ctrScopeID=1092&page=CTRPhasing.asp"/>05</a></th><th><a href="CTRPhasing.asp?year=3&ctrScopeID=1092&page=CTRPhasing.asp"/>06</a></th><th><a href="CTRPhasing.asp?year=4&ctrScopeID=1092&page=CTRPhasing.asp"/>07</a></th><th><a href="CTRPhasing.asp?year=5&ctrScopeID=1092&page=CTRPhasing.asp"/>08</a></th><th><a href="CTRPhasing.asp?year=6&ctrScopeID=1092&page=CTRPhasing.asp"/>09</a></th></tr></table>

<table valign="top" class="inner" >
<tr class="heading">
<th class="heading">Task<br />No</th>
<th class="heading">Contract<br />No</th>
<th class="heading">Object<br />Code</th>
<th class="heading">Total<br />$k</th>
<th class="heading">$k<BR />To Phase</th>
<th class="heading"> </th>
<th class="heading">Jan<br />04</th>
<th class="heading">Feb<br />04</th>
<th class="heading">Mar<br />04</th>
<th class="heading">Apr<br />04</th>
<th class="heading">May<br />04</th>
<th class="heading">Jun<br />04</th>
<th class="heading">Jul<br />04</th>
<th class="heading">Aug<br />04</th>
<th class="heading">Sep<br />04</th>
<th class="heading">Oct<br />04 </th>
<th class="heading">Nov<br />04</th>
<th class="heading">Dec<br />04 </th>
<th class="heading">Ann<br />Qty</th>
<th class="heading">U.O.M</th>
</tr>
<tr><td>A</td><td>21029</td><td>3002</td><td><input class="phasing" type="text" name="smCost_01" value="14,000" size="3"onchange="javascript:updatePhasing('1', this.value)" /></td><th>14,000</th><th bgcolor="#2A29A8"></th><td class="nospace"><input class="phasing" type="text" name="month_1_1" size="4" value="" disabled=true /></td><td class="nospace"><input class="phasing" type="text" name="month_2_1" size="4" value="" disabled=true /></td><td class="nospace"><input class="phasing" type="text" name="month_3_1" size="4" value="" disabled=true /></td><td class="nospace"><input class="phasing" type="text" name="month_4_1" size="4" value="" disabled=true /></td><td class="nospace"><input class="phasing" type="text" name="month_5_1" size="4" value="" disabled=true /></td><td class="nospace"><input class="phasing" type="text" name="month_6_1" size="4" value="2,000" disabled=true /></td><td class="nospace"><input class="phasing" type="text" name="month_7_1" size="4" value="100" onchange="javascript:updatePhasing('month_7_1', this.value)" /></td><td class="nospace"><input class="phasing" type="text" name="month_8_1" size="4" value="1,000" onchange="javascript:updatePhasing('month_8_1', this.value)" /></td><td class="nospace"><input class="phasing" type="text" name="month_9_1" size="4" value="300" onchange="javascript:updatePhasing('month_9_1', this.value)" /></td><td class="nospace"><input class="phasing" type="text" name="month_10_1" size="4" value="55" onchange="javascript:updatePhasing('month_10_1', this.value)" /></td><td class="nospace"><input class="phasing" type="text" name="month_11_1" size="4" value="200" onchange="javascript:updatePhasing('month_11_1', this.value)" /></td><td class="nospace"><input class="phasing" type="text" name="month_12_1" size="4" value="" onchange="javascript:updatePhasing('month_12_1', this.value)" /></td><th class="nospace"><input class="phasing" type="text" name="qty_01" size="6" maxlength="6" value="1" onchange="javascript:updatePhasing('qty_01', this.value)" /></th><th class="nospace"><select class="phasing" name=unit_01" onchange="javascript:updatePhasing('unit_01', this.value)"><option value="EA">Each</option><option value="JT">Joint</option><option value="KM">Kilometer</option><option value="MT">Mtrc Ton</option><option value="LT">Litres</option><option selected="selected" value="LS">Lmp Sum</option></select></th></tr><tr><td>B</td><td>21026</td><td>3002</td><td><input class="phasing" type="text" name="smCost_02" value="200" size="3"onchange="javascript:updatePhasing('2', this.value)" /></td><th>200</th><th bgcolor="#2A29A8"></th><td class="nospace"><input class="phasing" type="text" name="month_1_2" size="4" value="" disabled=true /></td><td class="nospace"><input class="phasing" type="text" name="month_2_2" size="4" value="" disabled=true /></td><td class="nospace"><input class="phasing" type="text" name="month_3_2" size="4" value="" disabled=true /></td><td class="nospace"><input class="phasing" type="text" name="month_4_2" size="4" value="" disabled=true /></td><td class="nospace"><input class="phasing" type="text" name="month_5_2" size="4" value="" disabled=true /></td><td class="nospace"><input class="phasing" type="text" name="month_6_2" size="4" value="" disabled=true /></td><td class="nospace"><input class="phasing" type="text" name="month_7_2" size="4" value="" onchange="javascript:updatePhasing('month_7_2', this.value)" /></td><td class="nospace"><input class="phasing" type="text" name="month_8_2" size="4" value="" onchange="javascript:updatePhasing('month_8_2', this.value)" /></td><td class="nospace"><input class="phasing" type="text" name="month_9_2" size="4" value="50" onchange="javascript:updatePhasing('month_9_2', this.value)" /></td><td class="nospace"><input class="phasing" type="text" name="month_10_2" size="4" value="" onchange="javascript:updatePhasing('month_10_2', this.value)" /></td><td class="nospace"><input class="phasing" type="text" name="month_11_2" size="4" value="" onchange="javascript:updatePhasing('month_11_2', this.value)" /></td><td class="nospace"><input class="phasing" type="text" name="month_12_2" size="4" value="100" onchange="javascript:updatePhasing('month_12_2', this.value)" /></td><th class="nospace"><input class="phasing" type="text" name="qty_02" size="6" maxlength="6" value="1" onchange="javascript:updatePhasing('qty_02', this.value)" /></th><th class="nospace"><select class="phasing" name=unit_02" onchange="javascript:updatePhasing('unit_02', this.value)"><option value="EA">Each</option><option value="JT">Joint</option><option value="KM">Kilometer</option><option value="MT">Mtrc Ton</option><option value="LT">Litres</option><option selected="selected" value="LS">Lmp Sum</option></select></th></tr><tr><td>F</td><td>21027</td><td>3002</td><td><input class="phasing" type="text" name="smCost_03" value="0" size="3"onchange="javascript:updatePhasing('3', this.value)" /></td><th>0</th><th bgcolor="#2A29A8"></th><td class="nospace"><input class="phasing" type="text" name="month_1_3" size="4" value="" disabled=true /></td><td class="nospace"><input class="phasing" type="text" name="month_2_3" size="4" value="" disabled=true /></td><td class="nospace"><input class="phasing" type="text" name="month_3_3" size="4" value="" disabled=true /></td><td class="nospace"><input class="phasing" type="text" name="month_4_3" size="4" value="" disabled=true /></td><td class="nospace"><input class="phasing" type="text" name="month_5_3" size="4" value="" disabled=true /></td><td class="nospace"><input class="phasing" type="text" name="month_6_3" size="4" value="" disabled=true /></td><td class="nospace"><input class="phasing" type="text" name="month_7_3" size="4" value="" onchange="javascript:updatePhasing('month_7_3', this.value)" /></td><td class="nospace"><input class="phasing" type="text" name="month_8_3" size="4" value="" onchange="javascript:updatePhasing('month_8_3', this.value)" /></td><td class="nospace"><input class="phasing" type="text" name="month_9_3" size="4" value="" onchange="javascript:updatePhasing('month_9_3', this.value)" /></td><td class="nospace"><input class="phasing" type="text" name="month_10_3" size="4" value="" onchange="javascript:updatePhasing('month_10_3', this.value)" /></td><td class="nospace"><input class="phasing" type="text" name="month_11_3" size="4" value="" onchange="javascript:updatePhasing('month_11_3', this.value)" /></td><td class="nospace"><input class="phasing" type="text" name="month_12_3" size="4" value="" onchange="javascript:updatePhasing('month_12_3', this.value)" /></td><th class="nospace"><input class="phasing" type="text" name="qty_03" size="6" maxlength="6" value="1" onchange="javascript:updatePhasing('qty_03', this.value)" /></th><th class="nospace"><select class="phasing" name=unit_03" onchange="javascript:updatePhasing('unit_03', this.value)"><option value="EA">Each</option><option value="JT">Joint</option><option value="KM">Kilometer</option><option value="MT">Mtrc Ton</option><option value="LT">Litres</option><option selected="selected" value="LS">Lmp Sum</option></select></th></tr><tr><th colspan="3">Year Totals k$</th><td>0</td><th>14,200</th><td bgcolor="#2A29A8"></td><td colspan="3"></td><td colspan="3"></td><td colspan="3"></td><td colspan="3"></td><td colspan="2"></td></tr>

</table>
<br />

</div>
</form>

</body>
</html>

LFI · Jun 21, 2004

First, when calling updatePhasing from each form element, just send one parameter: this.

Then, in the function, have only one receiving parameter, such as:

function updatePhasing(OBJ)
{
...
}

Then, when you need the name in the function, write:

OBJ.name

When you need the value, write:

OBJ.value

Now, here's the tricky part. Don't ask me why this works, but...

Create a var OUTSIDE the function. Call it (for example) latestObj. Then, inside the function, instead of sending focus right away, do this:

latestObj = OBJ;
setTimeout("latestObj.focus()",100);

It works!

Here's the JavaScript:

Code:

[b]var latestObj;[/b]
function updatePhasing(OBJ)
{ 
 [b]latestObj = OBJ;[/b]
 if(isNaN([b]OBJ.value[/b]))
 {
  alert("Invalid data format.\n\nOnly numbers are allowed.");
           
  [b]setTimeout("latestObj.focus();",100);[/b]
 }
 else
 {
  window.location='CTRPhasing.asp?name='+[b]OBJ.name[/b]+'&value='+[b]OBJ.value[/b]+'&update=yes&ctrScopeID=1092&year=' ;    
 }
} 
</script>

And calling the function looks like:

Code:

<input class="phasing" type="text" name="smCost_01" value="14,000" size="3" onchange="javascript:updatePhasing([b]this[/b])" />

That 'setTimeout' function has gotten me out of more trouble...

'hope that helps!

--Dave

kaht · Jun 21, 2004

I figured out that the problem lies with the fact that you're calling onchange instead of onblur or some other event handler. It seems that onchange triggers before the field has lost focus. So this is what happens:
1. you type letters in the text fields
2. you press tab or click on another field
3. before the field loses focus, the function fires setting focus back to the field itself (like it should)
4. onchange completes, and browser moves focus to whatever field you tabbed to/clicked on

You can fix this one of 2 ways. First, use the setTimeout function like dave shows above, or use an event handler different from onchange (onblur comes immediately to mind)

-kaht

tviman · Jun 21, 2004

or if you have the field declared like this: id=blah then use this method:

document.getElementById(name).focus();

None of your fields are declared with id="blah" so use kaht's other suggestion:

document.forms[0].elements[name].focus();

There's always a better way. The fun is trying to find it!

Jacqui1811 · Jun 21, 2004

Thanks for all your help guys.
The solution that worked was the select timeout from Dave.
Thanks although I wish I understood why it worked a bit more as I would like to be able to transfer the lesson from this to other issues I may have in the future. I will look into that a bit more when I have the time.
Once again you are all great !!
Jxxx
[2thumbsup]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

focus problem after alert box. 1

Jacqui1811

Programmer

kaht

Programmer

Jacqui1811

Programmer

kaht

Programmer

adam0101

Programmer

kaht

Programmer

Jacqui1811

Programmer

LFI

Programmer

kaht

Programmer

tviman

Programmer

Jacqui1811

Programmer

Similar threads

Part and Inventory Search

Sponsor