Next form element

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.nextSibling.focus();'

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

re: Next form element

Christoph wrote on 30 jan 2006 in comp.lang.javascript:
[color=blue]
> 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.[/color]

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.getElementById('x')
x.value = 'hi world'
alert(x.disabled)
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)

re: Next form element

Christoph wrote:
[color=blue]
> [...]
> 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.nextSibling.focus();'
>
> but that doesn't work.[/color]

It does not work because `this.nextSibling' does not refer to an Element
object that represents a form control but probably a TextNode object that
has no such method.
[color=blue]
> Apparently, I can't use nextSibling when working with a form element.[/color]

You can.
[color=blue]
> So I'm wondering how I can do what I'm needing to do?[/color]

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(typeof o.focus)
&& /input|button|select/.test(o.tagName.toLowerCase()))
{
return o;
}
}
}

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

<... onfocus="getNextControl(this).focus();"


PointedEars

re: Next form element

> "Evertjan." <exjxw.hannivoort@interxnl.net> wrote:[color=blue]
> news:Xns975BB9063FBB7eejj99@194.109.133.242....
>
> Christoph wrote on 30 jan 2006 in comp.lang.javascript:
> [color=green]
>> 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.[/color]
>
> 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 [/color]

I thought one could toggle readOnly between true and false.

What would the situation be that this does not work in?
[color=blue]
> 3 however, you can use "disabled" to your advantage.
>
> <input id=x disabled>[/color]

<button type="button" onclick="x.readOnly=(x.readOnly)?false:true;
x.focus(); x.select();">toggle readOnly</button>
[color=blue]
> <script type="text/javascript">
> var x = document.getElementById('x')
> x.value = 'hi world'
> alert(x.disabled)
> x.disabled = false
> </script>
>
> Do not mess with focus() to restrain the user![/color]

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

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

re: Next form element

BootNic wrote on 31 jan 2006 in comp.lang.javascript:
[color=blue]
> <button type="button" onclick="x.readOnly=(x.readOnly)?false:true;
> x.focus(); x.select();">toggle readOnly</button>
>[/color]

A <button> is always a button.

onclick="x.readOnly=!x.readOnly;"

try:

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

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

<button type="button"
onclick="x.readOnly=!x.readOnly;">
toggle readOnly</button>
===============

Indeed it works!

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

re: Next form element

BootNic wrote:
[color=blue][color=green]
>> "Evertjan." [...] wrote: [...]
>> Christoph wrote on 30 jan 2006 in comp.lang.javascript:[color=darkred]
>>> 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.[/color]
>>
>> 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[/color]
>
> I thought one could toggle readOnly between true and false.[/color]

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

An unsupportive DOM, particulary a DOM that does not implement the
HTMLInputElement 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.
[color=blue][color=green]
>> 3 however, you can use "disabled" to your advantage.
>>
>> <input id=x disabled>[/color]
>
> <button type="button" onclick="x.readOnly=(x.readOnly)?false:true;
> x.focus(); x.select();">toggle readOnly</button>[/color]

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.elements['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.elements['x'];'
+ ' x.readOnly = !x.readOnly; x.focus(); x.select();">');
</script>
[color=blue][color=green]
>> <script type="text/javascript">
>> var x = document.getElementById('x')
>> x.value = 'hi world'
>> alert(x.disabled)
>> x.disabled = false
>> </script>
>>
>> Do not mess with focus() to restrain the user![/color]
>[/color]

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


PointedEars

re: Next form element

JRS: In article <XuNDf.4478$tb3.2396@newssvr24.news.prodigy.net> , dated
Tue, 31 Jan 2006 17:53:59 remote, seen in news:comp.lang.javascript,
BootNic <Bootnic@bounce.prodigy.net> posted :[color=blue]
>
><button type="button" onclick="x.readOnly=(x.readOnly)?false:true;[/color]
^^^^^^^^^^^^ Ugh![color=blue]
>x.focus(); x.select();">toggle readOnly</button>[/color]


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.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.

re: Next form element

Dr John Stockton said the following on 2/1/2006 11:16 AM:[color=blue]
> JRS: In article <XuNDf.4478$tb3.2396@newssvr24.news.prodigy.net> , dated
> Tue, 31 Jan 2006 17:53:59 remote, seen in news:comp.lang.javascript,
> BootNic <Bootnic@bounce.prodigy.net> posted :[color=green]
>> <button type="button" onclick="x.readOnly=(x.readOnly)?false:true;[/color]
> ^^^^^^^^^^^^ Ugh![color=green]
>> x.focus(); x.select();">toggle readOnly</button>[/color]
>
>
> 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.[/color]

<button> is not a "new-fangled" construct though. It is at least 7 years
old and probably older.
[color=blue]
> And I don't recall ever seeing <button ... > in anyone else's source.[/color]

It is seen quite a lot.
[color=blue]
> But (with or without type=button) it works in my IE4, and is acceptable
> to two local testers.[/color]


[color=blue]
> In which versions, at about what date, did it appear in browsers?[/color]

It is supported by IE4+, NS6+ and any later (modern) browser. NN4 didn't
support button though.
[color=blue]
> Are there other special cases of <input type=... > that are widely
> implemented?[/color]

Such as what?

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

re: Next form element

> "Evertjan." <exjxw.hannivoort@interxnl.net> wrote:[color=blue]
> news:Xns975CCAA266368eejj99@194.109.133.242....
>
> BootNic wrote on 31 jan 2006 in comp.lang.javascript:
> [color=green]
>> <button type="button" onclick="x.readOnly=(x.readOnly)?false:true;
>> x.focus(); x.select();">toggle readOnly</button>
>> [/color]
>
> A <button> is always a button.[/color]

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*

re: Next form element

BootNic wrote:
[color=blue][color=green]
>> "Evertjan." [...] wrote:
>> BootNic wrote on 31 jan 2006 in comp.lang.javascript:[color=darkred]
>>> <button type="button" onclick="x.readOnly=(x.readOnly)?false:true;
>>> x.focus(); x.select();">toggle readOnly</button>[/color]
>> A <button> is always a button.[/color]
>
> If I were to put a button in a form without type="button",
> and it was not the submit button, some browsers[/color]

All widely distributed browsers except IEeek do.
[color=blue]
> treat it as a submit button.[/color]

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.)
[color=blue]
> [...]
> IE 6 does not seem to have any issues with it.[/color]

Because IEeek is broken. Nothing new here.


PointedEars

re: Next form element

Thomas 'PointedEars' Lahn wrote on 02 feb 2006 in comp.lang.javascript:
[color=blue][color=green]
>> If I were to put a button in a form without type="button",
>> and it was not the submit button, some browsers[/color]
>
> All widely distributed browsers except IEeek do.
>[/color]

I did not know hat.

But then, I personally always use <button> OUTSIDE a <form>,
and <input type= submit/reset INSIDE.

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

re: Next form element

JRS: In article <-PednU2MpuffvHzeRVn-gA@comcast.com>, dated Wed, 1 Feb
2006 16:00:06 remote, seen in news:comp.lang.javascript, Randy Webb
<HikksNotAtHome@aol.com> posted :[color=blue]
>[color=green]
>> Are there other special cases of <input type=... > that are widely
>> implemented?[/color]
>
>Such as what?[/color]

If I knew what, I would not need to ask.

To explain to you in more detail :

In HTML, within <input > one can put type="..." and get an
input control of the type indicated by what is where I have put three
dots. It now seems to be established that <input type=button and
<input type="button" can be replaced by the simpler <button .

Examples : type=text type=radio type=password type=checkbox

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

re: Next form element

Dr John Stockton wrote on 02 feb 2006 in comp.lang.javascript:
[color=blue]
> It now seems to be established that <input type=button and
> <input type="button" can be replaced by the simpler <button .
>[/color]

<button onclick='..'>Press</button>

equals

<input type='button' onclick='..' value='Press'>

.... well sort of, I hope.

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

re: Next form element

"Evertjan." <exjxw.hannivoort@interxnl.net> writes:
[color=blue]
> <button onclick='..'>Press</button>
>
> equals
>
> <input type='button' onclick='..' value='Press'>
>
> ... well sort of, I hope.[/color]

Actually it equals
<input type="submit" onclick="..">Press</button>
except that the rendering might be a little different too.

The button element has a type attribute taking one of the three
values: "button", "submit" and "reset", with "submit" being the
default. They work the same as the input elements with the same
type attribute.

The content of a button element can be arbitrary inline HTML. That
means that it might have a text baseline different from the
surrounding text (in some browsers it does for sure, can't remember
which).

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

re: Next form element

Lasse Reichstein Nielsen wrote on 02 feb 2006 in comp.lang.javascript:[color=blue]
> The content of a button element can be arbitrary inline HTML.[/color]

Which I think a definite improvement over <input button=''..:

<button>
Please press <span style='color:red;'>here</span> now!
</button>
[color=blue]
> That
> means that it might have a text baseline different from the
> surrounding text (in some browsers it does for sure, can't remember
> which).[/color]

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

re: Next form element

Dr John Stockton said the following on 2/2/2006 7:10 AM:[color=blue]
> JRS: In article <-PednU2MpuffvHzeRVn-gA@comcast.com>, dated Wed, 1 Feb
> 2006 16:00:06 remote, seen in news:comp.lang.javascript, Randy Webb
> <HikksNotAtHome@aol.com> posted :[color=green][color=darkred]
>>> Are there other special cases of <input type=... > that are widely
>>> implemented?[/color]
>> Such as what?[/color]
>
> If I knew what, I would not need to ask.[/color]

Fair enough.
[color=blue]
>
> To explain to you in more detail :
>
> In HTML, within <input > one can put type="..." and get an
> input control of the type indicated by what is where I have put three
> dots. It now seems to be established that <input type=button and
> <input type="button" can be replaced by the simpler <button .
>
> Examples : type=text type=radio type=password type=checkbox[/color]

No, only <button> has managed to mutate from <input type="button">.

One thing I have never understood, and probably never will, is why
<button> defaults to a submit button. <button type="button"> Seems
overkill. Leave it a button by default, same as input is text by
default. If you want something else then you give it the type.

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