By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,516 Members | 1,126 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,516 IT Pros & Developers. It's quick & easy.

Onload focus to form element w/o using <body> tag.

P: 5
Using Javascript, how do I give focus to a form text box on page load without using the <body> tag?

Thanks!
Jun 21 '07 #1
Share this Question
Share on Google+
9 Replies


pbmods
Expert 5K+
P: 5,821
Heya, tomcadman. Welcome to TSDN!

You can call the element's focus() method anytime after you define it in the script.
E.g., this works:

Expand|Select|Wrap|Line Numbers
  1. <input id="theInput" type="text" value="" />
  2. <script type="text/javascript">
  3. document.getElementById('theInput').focus();
  4. </script>
  5.  
But this won't:

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. document.getElementById('theInput').focus();
  3. </script>
  4. <input id="theInput" type="text" value="" />
  5.  
Jun 22 '07 #2

shoonya
100+
P: 161
make a function
call it on
Expand|Select|Wrap|Line Numbers
  1. onload
event
Expand|Select|Wrap|Line Numbers
  1. document.getElementById(text_field_name).focus()
or

Expand|Select|Wrap|Line Numbers
  1. document.form_name.text_field_name.focus()
shoonya
Jun 22 '07 #3

P: 5
The plot thickens... what is the chance I an use such code on page that is dynamically generated?

Details: Client hired an e-cart, wants changes. But limited access to code- i.e. via code templates. I can code one header for all pages, one footer, one body tag, etc. and I change the in-between code for specific pages.

The page content in question is dynamically repeated for the number of products the client has to list (i.e. I make one block of code to present all products).

See next page after this link http://www.king-cart.com/TVtest/frontpage=yes by pressing "Federal Standard Colors Products" button. Then view source.

The specific text box (labled 'COLOR-CODE') to be refocused with every load is in the 4th product down the list and it too is dynamically generated. I know its name from doing a 'view source' on the generated page- i.e "option|Color-Code|4".

Q: How can I focus on this text box? Possible?

Thanks for any suggestions!

-Tomcadman
Jun 22 '07 #4

pbmods
Expert 5K+
P: 5,821
Heya, Tomcadman.

It sounds like the easiest solution will be to hand-code the focus() call into each page. Not all pages are going to have a form, and the element you want to have focused is likely to change depending on the page.
Jun 22 '07 #5

P: 5
If you view source at page after link as ref'd above, you can see where I attempted to do this but no go. (ref. lines 371 and 381).

371 is where text box is generated. 381 is where I put code to focus.

What am I missing?

Ever-learning,
-tomcadman
Jun 22 '07 #6

pbmods
Expert 5K+
P: 5,821
Heya, Tomcadman.

Alrightey. Now that I've actually looked at the source code (:P), here's some goodies:
  • Unrelated, but in your scripts1.js file, you have <script> tags, which are unnecessary (and in fact generate errors) in .js files.
  • You have no element whose id is 'option|Color-Code|4'. You have one element whose name is 'option|Color-Code|4', but that's not the same thing. You'd need to specifically set the element's ID. If you absolutely have no choice and must use name instead of ID, try calling this instead:

Expand|Select|Wrap|Line Numbers
  1. document.getElementsByName('option|Color-Code|4')[0].focus();
  2.  
  • Your code is attempting to call the 'option|Color-Code|4' focuser once for every product on the page. This is bad because there are situations where there is no element with ID/name 'option|Color-Code|4' when some of those statements are executed, and in some browsers, this means that your JavaScript will stop getting executed.

Ok, so it's a template; this is understandable. If it's possible to put this code somewhere else in your content so that it goes only on that page, but doesn't end up in the product listings, this would be preferable. Otherwise, you'll need to change your code slightly to only call focus() if the element exists:

Expand|Select|Wrap|Line Numbers
  1. if((! elementFocused) && (elementFocused = document.getElementById('option|Color-Code|4')))
  2.     elementFocused.focus();
  3.  
  4. //    Or...
  5. if((! elementFocused) &&    (elementFocused = document.getElementsByName('option|Color-Code|4')) && (elementFocused = elementFocused[0]))
  6.     elementFocused.focus();
  7.  
This code will check for a global variable named elementFocused. If it is unset, then the the script will attempt to find the element whose ID (or name, depending on which set you use) is 'option|Color-Code|4'.

If the element doesn't exist, elementFocused will be set to null, which evaluates to false, so we won't try to focus the element. And the next time we reach this set of statements, elementFocused will still be null (false), so we'll try to focus the element again.

If the element exists, we'll focus it, and then the next time we try to focus the element, elementFocused will be a reference to an element, which evaluates to true, so we'll skip trying to focus the element (since it's already been focused).

Note that in the second set, we have to additionally make sure that there are any elements named 'option|Color-Code|4' before we try to get the 0th one.
Jun 22 '07 #7

P: 5
I tried using the simpler code (figuring I will add the 'if exists' code after I get simple to work.)

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. document.getElementsByName('option|Color-Code|4')[0].focus();
  3. </script>
Text box only gets focus once (on page load.)

Apparently, the cart's response (when "Add to Cart" is pressed) is not enough to trigger the focus again. I have to 'View Cart' or another page. Then when I return to products, the text box gets focus again.

Also, doesn't matter where I place it- i.e. in footer or inline on page.

So how do I create a trigger to focus on this text on page refresh (or whatever is happening after cart's code responds.)?

Any suggestions would be appreciated,

Thanks!

-tomcadman
Jun 23 '07 #8

P: 5
Checking back in on this...

Anybody have a suggestion for above code challenge?

Thanks!
-tomcadman
Jul 3 '07 #9

kovik
Expert 100+
P: 1,044
Well, it will only occur when you tell it to. JavaScript is an event-driven language and can only respond to events, or be called when manually invoked. If you want it to focus, you have to tell it to focus. That's as simple as it gets.

If it won't focus, you're calling it incorrectly.
Jul 3 '07 #10

Post your reply

Sign in to post your reply or Sign up for a free account.