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

 

[Evertjan.]

Christoph wrote on 30 jan 2006 in comp.lang.javascript:

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

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

 

[Thomas 'PointedEars' Lahn]

[...]
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.

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.

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

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

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


PointedEars

 

[Lee]

Christoph said:

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.

onfocus="this.blur()"

will remove focus from the element, but doesn't set focus to
the next element.

Beware that there is nothing that you can do to prevent a user
from setting any form field they like before submitting, so
if you're calculating prices, etc, be sure to recalculate on
the server side.

 

[Evertjan.]

BootNic wrote on 31 jan 2006 in comp.lang.javascript:

<button type="button" onclick="x.readOnly=(x.readOnly)?false:true;
x.focus(); x.select();">toggle readOnly</button>

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!

 

[Thomas 'PointedEars' Lahn]

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

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

<button type="button" onclick="x.readOnly=(x.readOnly)?false:true;
x.focus(); x.select();">toggle 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.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();">');

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


PointedEars

 

[Dr John Stockton]

JRS: In article <[email protected]>, dated
Tue, 31 Jan 2006 17:53:59 remote, seen in

<button type="button" onclick="x.readOnly=(x.readOnly)?false:true; ^^^^^^^^^^^^ Ugh!
x.focus(); x.select();">toggle 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?

 

[Randy Webb]

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

JRS: In article <[email protected]>, dated
Tue, 31 Jan 2006 17:53:59 remote, seen in


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.

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?

 

[BootNic]

BootNic wrote on 31 jan 2006 in comp.lang.javascript:


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]

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

<button type="button" onclick="x.readOnly=(x.readOnly)?false:true;
x.focus(); x.select();">toggle 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

 

[Evertjan.]

Thomas 'PointedEars' Lahn wrote on 02 feb 2006 in comp.lang.javascript:

All widely distributed browsers except IEeek do.

I did not know hat.

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

 

[Dr John Stockton]

JRS: In article <[email protected]>, dated Wed, 1 Feb
2006 16:00:06 remote, seen in Randy Webb

Such as what?

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

 

[Evertjan.]

Dr John Stockton wrote on 02 feb 2006 in comp.lang.javascript:

It now seems to be established that <input type=button and
<input type="button" can be replaced by the simpler <button .

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

equals

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

.... well sort of, I hope.

 

[Lasse Reichstein Nielsen]

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

equals

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

... well sort of, I hope.

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

 

[Evertjan.]

Lasse Reichstein Nielsen wrote on 02 feb 2006 in comp.lang.javascript:

The content of a button element can be arbitrary inline HTML.

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

<button>
Please press <span style='color:red;'>here</span> now!

 

[Randy Webb]

Dr John Stockton said the following on 2/2/2006 7:10 AM:

JRS: In article <[email protected]>, dated Wed, 1 Feb
2006 16:00:06 remote, seen in Randy Webb


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

Fair enough.

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

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.