Using Javascript, how do I give focus to a form text box on page load without using the <body> tag?
Thanks!
9  7169  pbmods 5,821
Recognized Expert Expert
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: -
<input id="theInput" type="text" value="" />
-
<script type="text/javascript">
-
document.getElementById('theInput').focus();
-
</script>
-
But this won't: -
<script type="text/javascript">
-
document.getElementById('theInput').focus();
-
</script>
-
<input id="theInput" type="text" value="" />
-
make a function
call it on
event -
document.getElementById(text_field_name).focus()
or - document.form_name.text_field_name.focus()
shoonya
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|Col or-Code|4".
Q: How can I focus on this text box? Possible?
Thanks for any suggestions!
-Tomcadman
pbmods 5,821
Recognized Expert Expert
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.
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
 pbmods 5,821
Recognized Expert Expert
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:
-
document.getElementsByName('option|Color-Code|4')[0].focus();
-
- 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: -
if((! elementFocused) && (elementFocused = document.getElementById('option|Color-Code|4')))
-
elementFocused.focus();
-
-
// Or...
-
if((! elementFocused) && (elementFocused = document.getElementsByName('option|Color-Code|4')) && (elementFocused = elementFocused[0]))
-
elementFocused.focus();
-
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.
I tried using the simpler code (figuring I will add the 'if exists' code after I get simple to work.) - <script type="text/javascript">
-
document.getElementsByName('option|Color-Code|4')[0].focus();
-
</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
Checking back in on this...
Anybody have a suggestion for above code challenge?
Thanks!
-tomcadman
kovik 1,044
Recognized Expert Top Contributor
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.
Sign in to post your reply or Sign up for a free account.
Similar topics | |
by: Starry Gordon |
last post by:
I've been running some small test programs which seem to indicate
something noticed in a larger script, that a function called from
onLoad() in the <body> tag will not succeed in creating a window
(i.e. successfully executing window.open() in Mozilla 1.5; however,
I've observed it to work a few times in IE 6.0 and Opera 5.something.
It does not seem to be a timing thing -- if I re-call the function
somewhat later using setTimeout it still...
|
by: Dung Ping |
last post by:
For instance, one set is:
<body onload="blinking_header()" onunload="stoptimer()">
Another set is:
<body onload="writemsg()" onunload="stoptimer()">
They represent two functions. How to place them in the <body> tag?
Thanks.
|
by: bmgz |
last post by:
I need to execute a JavaScript function "onload". The only problem is I
don not have access to the <body> tag as it is a part of the standard
page-header include (a separate file). How could I have certain pages
execute my function() onLoad?
The function basically just sets the original values of fields so that I
can determine if a field has been changed or not, which aleviates unnec.
sql update on the backend..
|
by: francescomoi |
last post by:
Hi.
I'm trying to insert some text between <head> and <body> but I'm
not able.
I try with:
--------
bodyPoint = document.getElementsByTagName('body');
var myLink = document.createElement("a");
|
by: mickey0 |
last post by:
HI,
is it possible to do this? I'd like at first execute the ONE and then the TWO. Will it work?
<body onload="func1()","func2()"> </body>
| | |
by: Prisoner at War |
last post by:
Another weekend, another project, another problem....
Why should a perfectly fine function work only half-way through when
called through onClick in an anchor tag??
The text fade-in script below works when called through onLoad in the
<bodytag, but it "hangs" when called through onClick in <a
href="#">, as follows:
<script language="JavaScript1.2">
|
by: Xah |
last post by:
Here's a interesting case of invalid html 4 strict file.
In summary, if you have <body></bodywithout any content, the file
would be invalid under html 4 strict. Valid if html 4 lose.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=utf-8">
|
by: PYG |
last post by:
Hi everybody
I have a simple question :
If i use this code :
<body style="font-size:24px;color:blue;">
Text in body
<table>
<tr><td>
Text in table
|
by: flydev |
last post by:
Hello,
Thanks for taking the time to help. I'm having a problem with GMap and IE7 (could be occurring in earlier versions). First let me give you a link to the problem:
problem
The problem seems to manifest itself initially when you mouse over the "Choose a different route >>" link (which has onmouseover event to change font styles). It seems that having two functions in the onload command of the <body> tag is causing the map to...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
| | |
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
| | |
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| |
