focus() not working when within div id tag 1

[timmbo]

Hi All,

I have a webpage that has some controls enclosed within div id tags. My problem is when I try to set focus() on a control withing that tag, I get null or not an object error. focus() works fine when not using div id tag. Do I have to reference the id name? If so, how do I do that?

HTML Code:

	<div id="amountRange">
		<table>
			<tr>
				<td><span class="style4"><input type="checkbox" name="amountRange">
				  Amount Range:</span></td>
				<td><span class="style4">&nbsp;&nbsp;&nbsp;Minimum:</span></td>
				<td></td>				
				<td><input name="amtFrom" onchange="chkMinAmount('ACHCustomRptForm')" size="13" maxlength="13" 
				  style="HEIGHT: 22px; WIDTH: 133px" value="0.00"></td>		
			</tr>
		</table>
	</div>

JS Code:

function chkMinAmount(frmName) {
	var tempNum = eval('document.' + frmName + '.amtFrom.value');
	if (amountCheck(tempNum)) {
		alert("Enter positive numbers only.");
		eval('document.' + frmName + '.amtFrom.focus()');
	}else {
		var newValue = formatNumber(tempNum);
		eval('document.' + frmName + '.amtFrom.value = newValue');
	}
}

Any help would be appreciated.

TIA,
Tim

 

[jemminger]

make sure the formName you're passing exists on the page exactly as spelled.

you can avoid using eval() like so, which will have less overhead:

function chkMinAmount(frmName) {
    var tempNum = document.forms[frmName].amtFrom.value;
    if (amountCheck(tempNum)) {
        alert("Enter positive numbers only.");
        document.forms[frmName].amtFrom.focus();
    }else {
        var newValue = formatNumber(tempNum);
        document.forms[frmName].amtFrom.value = newValue;
    }
}

=========================================================
-jeff

http://www.jeffemminger.com

try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }

 

[timmbo]

Thanks for the help Jeff.

I added your comments to my code. I still have the same issue. I checked my form name - it's good.

JS Code:

function chkMinAmount(frmName) {
	var tempNum = document.forms[frmName].amtFrom.value;
	if (amountCheck(tempNum)) {
		alert("Enter positive numbers only.");
		document.forms[frmName].amtFrom.focus();
	}else {
		var newValue = formatNumber(tempNum);
		document.forms[frmName].amtFrom.value = newValue;
	}
}

HTML Code:

	<FORM name="ACHCustomRptForm" METHOD="POST" action="<%= request.getContextPath() %>../isc/ApplicationServlet">
	  <INPUT type="hidden" name="function1" value="ACHCustom_ref">
...

	<div id="amountRange">
		<table>
			<tr>
				<td><span class="style4"><input type="checkbox" name="amountRange">
				  Amount Range:</span></td>
				<td><span class="style4">&nbsp;&nbsp;&nbsp;Minimum:</span></td>
				<td></td>				
				<td><input name="amtFrom" onchange="chkMinAmount('ACHCustomRptForm')" size="13" maxlength="13" 
				  style="HEIGHT: 22px; WIDTH: 133px" value="0.00"></td>
			</tr>
		</table>
	</div>
...

</form>

Any other ideas would be most welcome.

TIA,
Tim

 

[KevinAr18]

I tested your new code on both Firefox and IE and was unable to get an error message. However, the focus on the input field did not work in IE.
I did make some changes to the code, however, I doubt that is the reason for the difference.

Is there any additional details that you could provide, or perhaps an online page displaying the javascript error?

 

[timmbo]

Thanks for the reply Kevin.

I got the error message issue resolved. But still can't get focus() to work in IE. Not sure what to try next besides removing the id tags.

What changes did you make on your test?

TIA,
Tim

 

[KevinAr18]

Mostly changes to the javascript to make it work for me, but I did change the onchange trigger to onChange, and in another version (not this one), I added the closing </FORM> tag (which I later figured you probably do have in your code as well) and tried other things.

<!--Credits to/code from: [URL unfurl="true"]http://www.tek-tips.com/viewthread.cfm?qid=1031791&page=1[/URL] -->
<script>

function chkMinAmount(frmName) {
    //var tempNum = document.forms[frmName].amtFrom.value;
    //if (amountCheck(tempNum)) {
        alert("Enter positive numbers only.");
        document.forms[frmName].amtFrom.focus();
    //}else {
        var newValue = 123;
        document.forms[frmName].amtFrom.value = newValue;
    //}
}
</script>



    <FORM name="ACHCustomRptForm" METHOD="POST" action="../isc/ApplicationServlet">
      <INPUT type="hidden" name="function1" value="ACHCustom_ref">
...

    <div id="amountRange">
        <table>
            <tr>
                <td><span class="style4"><input type="checkbox" name="amountRange">
                  Amount Range:</span></td>
                <td><span class="style4">&nbsp;&nbsp;&nbsp;Minimum:</span></td>
                <td></td>                
                <td><input name="amtFrom" onChange="chkMinAmount('ACHCustomRptForm')" size="13" maxlength="13"
                  style="HEIGHT: 22px; WIDTH: 133px" value="0.00"></td>
            </tr>
        </table>
    </div>

 

[timmbo]

Thanks again Kevin. I guess I'm going to remove the id tags.

 

[KevinAr18]

Actually that doesn't seem to help.
It appears that Internet Explorer may not allow you to bring the textbox into focus from the onchange or onblur trigger.

 

[KevinAr18]

On the other hand, this little bit of code does work:

http://216.239.63.104/search?q=cach...cus()+javascript+input&hl=en&client=firefox-a

It is triggered using load.

 

[timmbo]

It's that awesome!!! Can you recommend a work around.

 

[timmbo]

Thanks again for your help Kevin...

 

[KevinAr18]

Well the problem is that piece of code cannot be used for your purposes. It is triggered using "onload" which is not what you want. I just check whether you could use onsubmit, and it does appear to work.

So... what you can do, is for Internet Explorer perform a check when the user attempts to submit the form, or I can keep looking for some method for it to work after they've edited the data...

For non-IE browsers, just use the code you have above.

 

[timmbo]

Kevin,

Okay, will do that then. Have a good one!

Tim

 

[KevinAr18]

Solution:

With the help of some code from this page:
(

http://216.239.63.104/search?q=cach...cus()+javascript+input&hl=en&client=firefox-a

and

http://www.jguru.com/faq/view.jsp?EID=289856)

and the events listed here:

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/events.asp

it seems that there is a workaround.

You can use onblur (instead of onchange) in both IE and Firefox to trigger the function. However, this will not test whether the value has changed; if you need that ability, you will have to add in the programming for it.

Also, if you haven't already, keep in mind that both onchange and onblur are not triggered until the textbox loses focus.
However, there is a new specification in the works that someone told me about called "oninput" that will be triggered whenever the value changes even before focus is lost.

 

[timmbo]

Cool!!!!

You got a star for that Kevin.

Tim