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>

Re: Focus on element not working correctly by Adrienne

Adrienne
Wed Oct 03 16:44:42 PDT 2007

On Oct 3, 4:43 pm, Adrienne Boswell <arb...@yahoo.com> wrote:
> 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

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


>
> 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>



Re: Focus on element not working correctly by Adrienne

Adrienne
Wed Oct 03 16:46:18 PDT 2007

On Oct 3, 4:43 pm, Adrienne Boswell <arb...@yahoo.com> wrote:
> 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"-->

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

> <%
> 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>



Re: Focus on element not working correctly by David

David
Wed Oct 03 18:11:55 PDT 2007

On Oct 3, 7:43 pm, Adrienne Boswell <arb...@yahoo.com> wrote:
> 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

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

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

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"-->

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


Re: Focus on element not working correctly by RobG

RobG
Wed Oct 03 18:49:39 PDT 2007

On Oct 4, 9:43 am, Adrienne Boswell <arb...@yahoo.com> wrote:
> 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").

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.

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

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).

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"-->

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()

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.


--
Rob


Re: Focus on element not working correctly by Noah

Noah
Wed Oct 03 19:25:45 PDT 2007

On Oct 3, 7:43 pm, Adrienne Boswell <arb...@yahoo.com> wrote:
> 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.

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

> <script type="text/javascript">
> document.getElementById("message").focus()
> </script>

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

> <script type="text/javascript">
window.onload = function (){
> document.getElementById("message").focus()
}
> </script>



Re: Focus on element not working correctly by Adrienne

Adrienne
Wed Oct 03 23:20:40 PDT 2007

Gazing into my crystal ball I observed Noah Sussman <blinkdog@gmail.com>
writing in news:1191464745.415718.164210@50g2000hsm.googlegroups.com:

> On Oct 3, 7:43 pm, Adrienne Boswell <arb...@yahoo.com> wrote:
>> 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.
>
> You are correct. In your document's head, you have:
>
>> <script type="text/javascript">
>> document.getElementById("message").focus()
>> </script>
>
> Which executes as soon as that script element loads -- before anything
> in the body (including your div) has loaded. Try
>
>> <script type="text/javascript">
> window.onload = function (){
>> document.getElementById("message").focus()
> }
>> </script>
>
>
>

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

--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share


Re: Focus on element not working correctly by Adrienne

Adrienne
Wed Oct 03 23:26:06 PDT 2007

Gazing into my crystal ball I observed RobG <rgqld@iinet.net.au> writing
in news:1191462579.164831.15460@o80g2000hse.googlegroups.com:

> On Oct 4, 9:43 am, Adrienne Boswell <arb...@yahoo.com> wrote:
>> 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").
>
> 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.

It moves the page to the specified DIV, similar to a page fragment, <a
href="#message">, etc.

>
>
>> That div is generated only if
>> there is an error, and the server side code is placed within the
>> head.
>
> 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
>
> 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).
>
> 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"-->
>
> 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.

Actually, it's a cross post to client and server side groups.

>
>
> [...]
>> <script type="text/javascript">
>> alert("<%=message%>");
>> document.getElementById("message").focus()
>
> 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');
> }
>

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.

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.

--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share


Re: Focus on element not working correctly by Erwin

Erwin
Thu Oct 04 03:00:19 PDT 2007

Adrienne Boswell wrote:
> 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()


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. ;-)

> </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>
>

Re: Focus on element not working correctly by Bob

Bob
Thu Oct 04 04:00:07 PDT 2007

David Mark wrote:
> On Oct 3, 7:43 pm, Adrienne Boswell <arb...@yahoo.com> wrote:
>> 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
>
> Bad idea. Validate on submission. At the very least, leave the focus
> alone during input.
>
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.

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

--
Microsoft MVP - ASP/ASP.NET
Please reply to the newsgroup. This email account is my spam trap so I
don't check it very often. If you must reply off-line, then remove the
"NO SPAM"



Re: Focus on element not working correctly by Bob

Bob
Thu Oct 04 04:02:07 PDT 2007

RobG wrote:
>
> This is a javascript news group,

Huh? look again :-)

The rest of your points are certainly valid though.

--
Microsoft MVP - ASP/ASP.NET
Please reply to the newsgroup. This email account is my spam trap so I
don't check it very often. If you must reply off-line, then remove the
"NO SPAM"



Re: Focus on element not working correctly by Bob

Bob
Thu Oct 04 04:03:38 PDT 2007

RobG wrote:
> This is a javascript news group,
Oh wait - the crosspost got lost somewhere, probably due to crossposting
between different news servers

--
Microsoft MVP - ASP/ASP.NET
Please reply to the newsgroup. This email account is my spam trap so I
don't check it very often. If you must reply off-line, then remove the
"NO SPAM"



Re: Focus on element not working correctly by Neredbojias

Neredbojias
Thu Oct 04 08:54:08 PDT 2007

Well bust mah britches and call me cheeky, on Wed, 03 Oct 2007 23:43:08
GMT Adrienne Boswell scribed:

> 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>
>

document.getElementById... must always be used in <body> not <head>
(basically).

--
Neredbojias
Half lies are worth twice as much as whole lies.

Re: Focus on element not working correctly by Vaxius

Vaxius
Thu Oct 04 16:40:58 PDT 2007

On Oct 3, 6:43 pm, Adrienne Boswell <arb...@yahoo.com> wrote:
> 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>

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.