Next form element

[Christoph]

I'm trying to make it so that if the user sets focus to a form element
(text), it automatically sets focus to the very next form element. This
will, in effect, prevent the user from modifying the value. I know I can do
this by setting the form element to 'readonly' but that's not possible as
I'll need to modify that value elsewhere in my JS. Anyway...

I know I can do something like this:

document.forms[1].elements[4].focus().

Only problem for me with the above method is that I'm generating my form
dynamically so I won't know a) which element number the current field is and
b) which, if any, is the next element. I've tried setting up an event
handler so:

OnFocus='this.n extSibling.focu s();'

but that doesn't work. Apparently, I can't use nextSibling when working
with a form element. So I'm wondering how I can do what I'm needing to do?

Any help would be greatly appreciated!

thnx,
Chris

[Evertjan.]

Christoph wrote on 30 jan 2006 in comp.lang.javas cript:

I know I can do
this by setting the form element to 'readonly' but that's not possible
as I'll need to modify that value elsewhere in my JS.

1 you can write the value of a readonly <input> element with javascript

2 you cannot change the readonlyness of an <input> element with javascript

3 however, you can use "disabled" to your advantage.

<input id=x disabled>

<script type="text/javascript">
var x = document.getEle mentById('x')
x.value = 'hi world'
alert(x.disable d)
x.disabled = false
</script>

Do not mess with focus() to restrain the user!

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[Thomas 'PointedEars' Lahn]

Christoph wrote:

[...]
Only problem for me with the above method is that I'm generating my form
dynamically so I won't know a) which element number the current field is
and
b) which, if any, is the next element. I've tried setting up an event
handler so:

OnFocus='this.n extSibling.focu s();'

but that doesn't work.
It does not work because `this.nextSibli ng' does not refer to an Element
object that represents a form control but probably a TextNode object that
has no such method.
Apparently, I can't use nextSibling when working with a form element.
You can.
So I'm wondering how I can do what I'm needing to do?

Iterate until you encounter a node that represents a form control.
Quickhack:

function isMethodType(s)
{
return (s == "function" || s == "object");
}

function getNextControl( o)
{
if (o)
{
while ((o = o.nextSibling))
{
if (isMethodType(t ypeof o.focus)
&& /input|button|se lect/.test(o.tagName .toLowerCase()) )
{
return o;
}
}
}

return {focus: function() {}};
}

<... onfocus="getNex tControl(this). focus();"
PointedEars

[BootNic]

> "Evertjan." <ex************ **@interxnl.net > wrote:

news:Xn******** ************@19 4.109.133.242.. ..

Christoph wrote on 30 jan 2006 in comp.lang.javas cript:

I know I can do
this by setting the form element to 'readonly' but that's not
possible as I'll need to modify that value elsewhere in my JS.
1 you can write the value of a readonly <input> element with
javascript

2 you cannot change the readonlyness of an <input> element with
javascript

I thought one could toggle readOnly between true and false.

What would the situation be that this does not work in?
3 however, you can use "disabled" to your advantage.

<input id=x disabled>
<button type="button" onclick="x.read Only=(x.readOnl y)?false:true;
x.focus(); x.select();">to ggle readOnly</button>
<script type="text/javascript">
var x = document.getEle mentById('x')
x.value = 'hi world'
alert(x.disable d)
x.disabled = false
</script>

Do not mess with focus() to restrain the user!

--
BootNic Tuesday, January 31, 2006 12:53 PM

Inform all the troops that communications have completely broken down.
*Ashleigh Brilliant*

[Evertjan.]

BootNic wrote on 31 jan 2006 in comp.lang.javas cript:

<button type="button" onclick="x.read Only=(x.readOnl y)?false:true;
x.focus(); x.select();">to ggle readOnly</button>

A <button> is always a button.

onclick="x.read Only=!x.readOnl y;"

try:

==============
<input id='x' readonly>

<script type="text/javascript">
var x = document.getEle mentById('x')
</script>

<button type="button"
onclick="x.read Only=!x.readOnl y;">
toggle readOnly</button>
===============

Indeed it works!

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[Thomas 'PointedEars' Lahn]

BootNic wrote:

"Evertjan." [...] wrote: [...]
Christoph wrote on 30 jan 2006 in comp.lang.javas cript:

I know I can do this by setting the form element to 'readonly' but
that's not possible as I'll need to modify that value elsewhere in
my JS.
1 you can write the value of a readonly <input> element with
javascript

2 you cannot change the readonlyness of an <input> element with
javascript

I thought one could toggle readOnly between true and false.

You can, but as was said correctly, you do not have to in order to change
the value of the respective control.
What would the situation be that this does not work in?

An unsupportive DOM, particulary a DOM that does not implement the
HTMLInputElemen t interface of the W3C DOM. However, such DOMs are rare
nowadays: this property is supported r/w for those element objects by the
the Gecko DOM, the IE4+ DOM, the Opera 6+ DOM and the KHTML 2.2+ DOM. That
covers practically almost all known HTML user agents, including Mozilla,
Mozilla Firefox, Internet Explorer 4+, Opera 6+, Konqueror 2.2+ and Safari.
It does not cover Netscape 4.x, for example.

3 however, you can use "disabled" to your advantage.

<input id=x disabled>

<button type="button" onclick="x.read Only=(x.readOnl y)?false:true;
x.focus(); x.select();">to ggle readOnly</button>

0. The button will be useless to users without client-side script support.

1. Referring to an element object by the ID of the element it represents is
a deprecated and often IE-only practice. If the `button' element is
descendant of the same `form' element as the `input' element, it is
better to use this.form.eleme nts['x'] instead.

2. readOnly is a boolean property already.

3. The `button' element is not backwards compatible and it is unnecessary
here (as the element content is a text node).

<script type="text/javascript">
document.write(
'<input type="button" value="toggle readOnly"'
+ 'onclick="var x = this.form.eleme nts['x'];'
+ ' x.readOnly = !x.readOnly; x.focus(); x.select();">') ;
</script>

<script type="text/javascript">
var x = document.getEle mentById('x')
x.value = 'hi world'
alert(x.disable d)
x.disabled = false
</script>

Do not mess with focus() to restrain the user!

You are not referring to this, so do not quote it.
PointedEars

[Dr John Stockton]

JRS: In article <Xu************ *****@newssvr24 .news.prodigy.n et>, dated
Tue, 31 Jan 2006 17:53:59 remote, seen in news:comp.lang. javascript,
BootNic <Bo*****@bounce .prodigy.net> posted :

<button type="button" onclick="x.read Only=(x.readOnl y)?false:true; ^^^^^^^^^^^^ Ugh!x.focus(); x.select();">to ggle readOnly</button>

As is well-known, I dislike using new-fangled constructs instead of
older equivalents as soon as they become available in the latest
systems, since that handicaps those with older software.

And I don't recall ever seeing <button ... > in anyone else's source.

But (with or without type=button) it works in my IE4, and is acceptable
to two local testers.

In which versions, at about what date, did it appear in browsers?

Are there other special cases of <input type=... > that are widely
implemented?

--
© John Stockton, Surrey, UK. ?@merlyn.demon. co.uk Turnpike v4.00 IE 4 ©
<URL:http://www.jibbering.c om/faq/> JL/RC: FAQ of news:comp.lang. javascript
<URL:http://www.merlyn.demo n.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demo n.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.

[Randy Webb]

Dr John Stockton said the following on 2/1/2006 11:16 AM:

JRS: In article <Xu************ *****@newssvr24 .news.prodigy.n et>, dated
Tue, 31 Jan 2006 17:53:59 remote, seen in news:comp.lang. javascript,
BootNic <Bo*****@bounce .prodigy.net> posted :

<button type="button" onclick="x.read Only=(x.readOnl y)?false:true; ^^^^^^^^^^^^ Ugh!

x.focus(); x.select();">to ggle readOnly</button>

As is well-known, I dislike using new-fangled constructs instead of
older equivalents as soon as they become available in the latest
systems, since that handicaps those with older software.

<button> is not a "new-fangled" construct though. It is at least 7 years
old and probably older.
And I don't recall ever seeing <button ... > in anyone else's source.
It is seen quite a lot.
But (with or without type=button) it works in my IE4, and is acceptable
to two local testers.

In which versions, at about what date, did it appear in browsers?
It is supported by IE4+, NS6+ and any later (modern) browser. NN4 didn't
support button though.
Are there other special cases of <input type=... > that are widely
implemented?

Such as what?

--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

[BootNic]

> "Evertjan." <ex************ **@interxnl.net > wrote:

news:Xn******** ************@19 4.109.133.242.. ..

BootNic wrote on 31 jan 2006 in comp.lang.javas cript:

<button type="button" onclick="x.read Only=(x.readOnl y)?false:true;
x.focus(); x.select();">to ggle readOnly</button>

A <button> is always a button.

If I were to put a button in a form without type="button", and it was
not the submit button, some browsers treat it as a submit button. I
usually add it for that reason.

IE 6 does not seem to have any issues with it.

FireFox 0.8.0
NetScape 7.2
Mozilla 1.7.12
Opera 8.51

All treat it as a submit button.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body>
<form id="a" name="a" action="http://www.google.com/search">
<input name="q" type="text" value="button collector"><br>
<button type="button" onclick="alert( 'hello')">Alert
Hello</button><br>
<button onclick="alert( 'Good Bye')">Alert Good Bye</button><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

--
BootNic Wednesday, February 01, 2006 10:12 PM

When I was young, I was put in a school for retarded kids for two
years before they realized I actually had a hearing loss...and they
called ME slow!
*Kathy Buckley*

[Thomas 'PointedEars' Lahn]

BootNic wrote:

"Evertjan." [...] wrote:
BootNic wrote on 31 jan 2006 in comp.lang.javas cript:

<button type="button" onclick="x.read Only=(x.readOnl y)?false:true;
x.focus(); x.select();">to ggle readOnly</button> A <button> is always a button.

If I were to put a button in a form without type="button",
and it was not the submit button, some browsers

All widely distributed browsers except IEeek do.
treat it as a submit button.
Because it is specified so:

<URL:http://www.w3.org/TR/html4/interact/forms.html#edef-BUTTON>

(The third value of an attribute declaration is the default value.)
[...]
IE 6 does not seem to have any issues with it.

Because IEeek is broken. Nothing new here.
PointedEars