Focus on element not working correctly

  • Thread starter Adrienne Boswell
  • Start date
A

Adrienne Boswell

Here is the scenario. I have an alert that fires if the user has not
filled in a field. What I would like to do is have the browser focus
on the message (div id="message"). That div is generated only if
there is an error, and the server side code is placed within the
head. What I think is happening is the js focus is firing BEFORE the
div is rendered, because I am getting the js error
document.getElementById("") is null or is not an object. This is not
something vital, just something I think would be nice for the user
(especially if the form and message are below the fold). I have
included code and markup below. (no URL - this is stripped down to
what's necessary).

<% option explicit%>
<!--#include file="docheader_inc.asp"-->
<%
dim fname, isget

if request.servervariables("REQUEST_METHOD") = "POST" then
ispost = true
elseif request.servervariables("REQUEST_METHOD") = "GET" then
isget = true
end if

if ispost then %>
if request.form("fname") = "" then
required = "fname"
message = "First name is required"
end if

if message <> "" then
%>
<script type="text/javascript">
alert("<%=message%>");
document.getElementById("message").focus()
</script>
<% message = "<div id=" & chr(034) & "message" & chr(034) &
"><strong>" & message & "</strong></div>"

end if

fname = "Your first name"

end if%>
<style type="text/css">
..required, #required {
font-weight:bold;
color:red;
}
<% if required <> "" then%>
#<%=required%>1 {
font-weight:bold;
background-color: yellow;
color:red
}
#<%=required%> {
background-color: pink;
color: black
}
<% end if%>
</style>
</head>
<body>
<form method="post" action="<%=request.servervariables("script_name")
%>">
<%=message%>
<fieldset><legend>* indicates <span class="required">Required</span>
fields</legend>
<label for="fname" id="fname1" class="required">First Name </label>
<input type="text" name="fname" id="fname" value="<%=fname%>" <%if
isget then%>onfocus="if(this.value == '<%=fname%>') this.value = '';"<
%end if %>><br>
<label for="lname" id="lname1">First Name </label> <input type="text"
name="lname" id="lname" value="<%=lname%>" <%if isget then
%>onfocus="if(this.value == '<%=lname%>') this.value = '';"<%end if
%>><br>
</fieldset>
<p><input type="submit" value="Submit"></p>
</form>
</body>
</html>
 
A

Adrienne Boswell

Here is the scenario. I have an alert that fires if the user has not
filled in a field. What I would like to do is have the browser focus
on the message (div id="message"). That div is generated only if
there is an error, and the server side code is placed within the
head. What I think is happening is the js focus is firing BEFORE the
div is rendered, because I am getting the js error
document.getElementById("") is null or is not an object. This is not
something vital, just something I think would be nice for the user
(especially if the form and message are below the fold). I have
included code and markup below. (no URL - this is stripped down to
what's necessary).

<% option explicit%>
<!--#include file="docheader_inc.asp"-->
<%
dim fname, isget
Click to expand...

forgot to dim lname as well, would have in real life
 
A

Adrienne Boswell

Here is the scenario. I have an alert that fires if the user has not
filled in a field. What I would like to do is have the browser focus
on the message (div id="message"). That div is generated only if
there is an error, and the server side code is placed within the
head. What I think is happening is the js focus is firing BEFORE the
div is rendered, because I am getting the js error
document.getElementById("") is null or is not an object. This is not
something vital, just something I think would be nice for the user
(especially if the form and message are below the fold). I have
included code and markup below. (no URL - this is stripped down to
what's necessary).

<% option explicit%>
<!--#include file="docheader_inc.asp"-->
Click to expand...

(docheader_inc.asp has a lot of frequently used variables already
dimmed (like required))
 
D

David Mark

Here is the scenario. I have an alert that fires if the user has not
filled in a field. What I would like to do
Click to expand...
is have the browser focus

Bad idea. Validate on submission. At the very least, leave the focus
alone during input.
on the message (div id="message"). That div is generated only if
Click to expand...

Why do you want to focus the div? It won't work at all in some
browsers and you don't have a tabIndex on it anyway.
there is an error, and the server side code is placed within the
head. What I think is happening is the js focus is firing BEFORE the
div is rendered, because I am getting the js error
document.getElementById("") is null or is not an object. This is not
Click to expand...

document.getElementById("") is obviously wrong.
something vital, just something I think would be nice for the user
(especially if the form and message are below the fold). I have
included code and markup below. (no URL - this is stripped down to
what's necessary).

<% option explicit%>
<!--#include file="docheader_inc.asp"-->
Click to expand...

Don't post server side code. Post the output of the ASP.
 
R

RobG

Here is the scenario. I have an alert that fires if the user has not
filled in a field. What I would like to do is have the browser focus
on the message (div id="message").
Click to expand...

Div element's don't necessarly support the focus method, calling it
may well result in an error in some browsers. In those that do
support it, what do you expect to happen? It does nothing useful in
either Firefox or IE as far as I can tell.

That div is generated only if
there is an error, and the server side code is placed within the
head.
Click to expand...

As far as I can tell, the html for the div is generated by the server
and placed in the body, but the focus code is in the head of your HTML
page as global code - it will be called as soon as it is loaded. That
means that when the code is run, the div can't exist yet.

What I think is happening is the js focus is firing BEFORE the
div is rendered, because I am getting the js error
document.getElementById("") is null or is not an object. This is not
Click to expand...

That seems a reasonable conclusion.

something vital, just something I think would be nice for the user
(especially if the form and message are below the fold). I have
included code and markup below. (no URL - this is stripped down to
what's necessary).
Click to expand...

If your validation is creating the div, then you already have a
reference to it, you don't need getElementById.
<% option explicit%>
<!--#include file="docheader_inc.asp"-->
Click to expand...

This is a javascript news group, don't expect anyone to be able to
debug asp code. Post what is actually received by the page, how you
get it there is not relevant here.


[...]
<script type="text/javascript">
alert("<%=message%>");
document.getElementById("message").focus()
Click to expand...

This appears to run before the div exists. To make it run when the
page loads and prevent errors:


// Declare a function to do the work
function doFocus(id){
if (!document.getElementById ||
typeof id != 'string') {
return;
}
var x = document.getElementById(id);
if (x && x.focus) x.focus();
}

// Call it when the page has finished loading
window.onload = function(){
doFocus('message');
}


But it does nothing useful as far as I can tell.
 
N

Noah Sussman

What I think is happening is the js focus is firing BEFORE the
div is rendered, because I am getting the js error
document.getElementById("") is null or is not an object.
Click to expand...

You are correct. In your document's head, you have:
<script type="text/javascript">
document.getElementById("message").focus()
</script>
Click to expand...

Which executes as soon as that script element loads -- before anything
in the body (including your div) has loaded. Try
 
A

Adrienne Boswell

You are correct. In your document's head, you have:


Which executes as soon as that script element loads -- before anything
in the body (including your div) has loaded. Try
Click to expand...

Thank you so much, will give it go in the morning.
 
A

Adrienne Boswell

Div element's don't necessarly support the focus method, calling it
may well result in an error in some browsers. In those that do
support it, what do you expect to happen? It does nothing useful in
either Firefox or IE as far as I can tell.
Click to expand...

It moves the page to the specified DIV, similar to a page fragment, <a
href="#message">, etc.
As far as I can tell, the html for the div is generated by the server
and placed in the body, but the focus code is in the head of your HTML
page as global code - it will be called as soon as it is loaded. That
means that when the code is run, the div can't exist yet.



That seems a reasonable conclusion.



If your validation is creating the div, then you already have a
reference to it, you don't need getElementById.


This is a javascript news group, don't expect anyone to be able to
debug asp code. Post what is actually received by the page, how you
get it there is not relevant here.
Click to expand...

Actually, it's a cross post to client and server side groups.
[...]
<script type="text/javascript">
alert("<%=message%>");
document.getElementById("message").focus()
Click to expand...

This appears to run before the div exists. To make it run when the
page loads and prevent errors:


// Declare a function to do the work
function doFocus(id){
if (!document.getElementById ||
typeof id != 'string') {
return;
}
var x = document.getElementById(id);
if (x && x.focus) x.focus();
}

// Call it when the page has finished loading
window.onload = function(){
doFocus('message');
}
Click to expand...

Thank you, that's what I was looking for. This is something I'll be
putting into my master page so any form page can use it.
But it does nothing useful as far as I can tell.
Click to expand...

It moves the page to the specified DIV, almost like a page fragment.
It's a nice thing when a form is below the fold.
Rob, thanks so much for your help.
 
E

Erwin Moller

Adrienne said:
Here is the scenario. I have an alert that fires if the user has not
filled in a field. What I would like to do is have the browser focus
on the message (div id="message"). That div is generated only if
there is an error, and the server side code is placed within the
head. What I think is happening is the js focus is firing BEFORE the
div is rendered, because I am getting the js error
document.getElementById("") is null or is not an object. This is not
something vital, just something I think would be nice for the user
(especially if the form and message are below the fold). I have
included code and markup below. (no URL - this is stripped down to
what's necessary).

<% option explicit%>
<!--#include file="docheader_inc.asp"-->
<%
dim fname, isget

if request.servervariables("REQUEST_METHOD") = "POST" then
ispost = true
elseif request.servervariables("REQUEST_METHOD") = "GET" then
isget = true
end if

if ispost then %>
if request.form("fname") = "" then
required = "fname"
message = "First name is required"
end if

if message <> "" then
%>
<script type="text/javascript">
alert("<%=message%>");
document.getElementById("message").focus()
Click to expand...


Hi,

I cannot find an element in your form that has the id "message".
Only a div that goes by that name.

Focus() is not a method of a div as far as I know.

If you want to the attention of the client focussed on that div, I
suggest you cange its background or something. You don't need javascript
for that.
Just spit out the right HTML/CSS from VB.


Regards,
Erwin Moller

PS: VB stinks, consider switching to PHP if that is an option. ;-)
 
B

Bob Barrows [MVP]

David said:
is have the browser focus

Bad idea. Validate on submission. At the very least, leave the focus
alone during input.
Click to expand...
Why not do both? Just because she's attempting to do it client-side does not
mean she is failing to do it server-side.
Don't post server side code. Post the output of the ASP.
Click to expand...

Yes, the initial focus should be writing the html that produces the desired
outcome. Then write the asp code that produces that html.
 
B

Bob Barrows [MVP]

RobG said:
This is a javascript news group,
Click to expand...
Oh wait - the crosspost got lost somewhere, probably due to crossposting
between different news servers
 
V

Vaxius

Here is the scenario. I have an alert that fires if the user has not
filled in a field. What I would like to do is have the browser focus
on the message (div id="message"). That div is generated only if
there is an error, and the server side code is placed within the
head. What I think is happening is the js focus is firing BEFORE the
div is rendered, because I am getting the js error
document.getElementById("") is null or is not an object. This is not
something vital, just something I think would be nice for the user
(especially if the form and message are below the fold). I have
included code and markup below. (no URL - this is stripped down to
what's necessary).

<% option explicit%>
<!--#include file="docheader_inc.asp"-->
<%
dim fname, isget

if request.servervariables("REQUEST_METHOD") = "POST" then
ispost = true
elseif request.servervariables("REQUEST_METHOD") = "GET" then
isget = true
end if

if ispost then %>
if request.form("fname") = "" then
required = "fname"
message = "First name is required"
end if

if message <> "" then
%>
<script type="text/javascript">
alert("<%=message%>");
document.getElementById("message").focus()
</script>
<% message = "<div id=" & chr(034) & "message" & chr(034) &
"><strong>" & message & "</strong></div>"

end if

fname = "Your first name"

end if%>
<style type="text/css">
.required, #required {
font-weight:bold;
color:red;}

<% if required <> "" then%>
#<%=required%>1 {
font-weight:bold;
background-color: yellow;
color:red}

#<%=required%> {
background-color: pink;
color: black
}
<% end if%>
</style>
</head>
<body>
<form method="post" action="<%=request.servervariables("script_name")
%>">
<%=message%>
<fieldset><legend>* indicates <span class="required">Required</span>
fields</legend>
<label for="fname" id="fname1" class="required">First Name </label>
<input type="text" name="fname" id="fname" value="<%=fname%>" <%if
isget then%>onfocus="if(this.value == '<%=fname%>') this.value = '';"<
%end if %>><br>
<label for="lname" id="lname1">First Name </label> <input type="text"
name="lname" id="lname" value="<%=lname%>" <%if isget then
%>onfocus="if(this.value == '<%=lname%>') this.value = '';"<%end if
%>><br>
</fieldset>
<p><input type="submit" value="Submit"></p>
</form>
</body>
</html>
Click to expand...

If I understand right, what you want to do is focus on the input field
the user left blank. There's no need to try to draw attention to the
message, because it's already displayed in a pop-up alert box.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Script to send email not working 1
Uhhhhh, What can I do next? 6
Login form no longer working 2
HCaptcha - How to stop page from refreshing on submit if captcha is not checked/validated 1
I dont get this. Please help me!! 2
Working on mobile css menu with plenty of frustration! 2
Check forms With JavaScript 1
Page do not work, when adding php code 1

Members online

No members online now.
Total: 39 (members: 0, guests: 39)
Robots: 463

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,054
Latest member
TrimKetoBoost

Latest Threads

Top