Move focus to next element

**RobG** · Jul 23 '05, 03:20 PM

Re: Move focus to next element

mcanedo wrote:[color=blue]
> Hi:
> I have several text elements in a form.
> Some of they are filled by the user, and then some are automatically filled
> based on the user input.
> Therefore I do not want the user to be able to write on the autofilled text
> elements.
> I have come to the idea of give those elements the event
> onFocus=functio ntoMovetoNextEl ement()
>
> Then my question is how can I do that using the elements[] array?
> How can I know the position of the current element in the elements[] array
> (that would solve it)?[/color]

Have you considered just disabling the text boxes? You can still modify
the text programmaticall y but the user can't modify them.

<input name="textBox01 " type="text" width="200px"
value="Here is some text" DISABLED>

Rob.

**mcanedo** · Jul 23 '05, 03:21 PM

Re: Move focus to next element

RobG wrote:
[color=blue]
> mcanedo wrote:[color=green]
>> Hi:
>> I have several text elements in a form.
>> Some of they are filled by the user, and then some are automatically
>> filled based on the user input.
>> Therefore I do not want the user to be able to write on the autofilled
>> text elements.
>> I have come to the idea of give those elements the event
>> onFocus=functio ntoMovetoNextEl ement()
>>
>> Then my question is how can I do that using the elements[] array?
>> How can I know the position of the current element in the elements[]
>> array (that would solve it)?[/color]
>
> Have you considered just disabling the text boxes? You can still modify
> the text programmaticall y but the user can't modify them.
>
> <input name="textBox01 " type="text" width="200px"
> value="Here is some text" DISABLED>
>
> Rob.[/color]

Thanks, I have considered that, but the text becomes to hard to read...

**RobB** · Jul 23 '05, 03:22 PM

Re: Move focus to next element

RobG <rgqld@iinet.ne t.auau> wrote in message news:<f3zmd.725 $I52.26279@news .optus.net.au>. ..[color=blue]
> mcanedo wrote:[color=green]
> > Hi:
> > I have several text elements in a form.
> > Some of they are filled by the user, and then some are automatically filled
> > based on the user input.
> > Therefore I do not want the user to be able to write on the autofilled text
> > elements.
> > I have come to the idea of give those elements the event
> > onFocus=functio ntoMovetoNextEl ement()
> >
> > Then my question is how can I do that using the elements[] array?
> > How can I know the position of the current element in the elements[] array
> > (that would solve it)?[/color]
>
> Have you considered just disabling the text boxes? You can still modify
> the text programmaticall y but the user can't modify them.
>
> <input name="textBox01 " type="text" width="200px"
> value="Here is some text" DISABLED>
>
> Rob.[/color]

Probably a good idea not to disable them - if you want them to submit
any data to the server! Read-only is more like it. Try this (uses the
window[HTML: <BODY>].onload handler, be aware):

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled </title>
<style type="text/css">

form { width: 300px; font-weight: bold; margin: 24px; }
input { margin: 2px; }

</style>
<script type="text/javascript">
//<![CDATA[

onload = function()
{
var idx = 0, el, els = document.forms[0].elements;
while (el = els.item(idx++) )
if (el.readOnly)
{
el.nextIdx = idx;
el.onfocus = function()
{
this.form.eleme nts[this.nextIdx].focus();
}
}
if ((el = els[idx - 2]).readOnly)
el.nextIdx = 0;
}

//]]>
</script>
</head>
<body>
<form>
<input type="text" name="something 1" value="" />___enter data
<input type="text" name="something 2" value="blah" readonly="reado nly"
/>___readonly!
<input type="text" name="something 3" value="blah" readonly="reado nly"
/>___readonly!
<input type="text" name="something 4" value="" />___enter data
<input type="text" name="something 5" value="blah" readonly="reado nly"
/>___readonly!
</form>
</body>
</html>

Assumes one form in the page as well. hth

**RobG** · Jul 23 '05, 03:22 PM

Re: Move focus to next element

RobB wrote:[color=blue]
> RobG <rgqld@iinet.ne t.auau> wrote in message news:<f3zmd.725 $I52.26279@news .optus.net.au>. ..[color=green]
>>mcanedo wrote:
>>[color=darkred]
>>>Hi:
>>>I have several text elements in a form.
>>>Some of they are filled by the user, and then some are automatically filled
>>>based on the user input.
>>>Therefore I do not want the user to be able to write on the autofilled text
>>>elements.[/color][/color][/color]
[...]>[color=blue]
> Probably a good idea not to disable them - if you want them to submit[/color]

If the content of the text input is dependent solely on which checkbox
the user has selected, then only the checkbox has to be submitted -
there is no point in submitting the text input's text (see 3 below).

A common trick is to write the value to a hidden text box that does
get submitted. However, that is redundant too as above.
[color=blue]
> ... Try this ...[/color]
[...]

Yes, your solution works as requested by the OP, however I think
messing with the user interface like this annoying, especially if the
navigation jumps several inputs.

Given the minimal information provided in the OP's post, there are two
reasons for using a text area in this case:

1. The text input is editable or not depending on the user's selection.
In this case, a text input is used because sometimes you want the user
to enter text and other times control it programmaticall y.

In this case, your solution could be modified so that the readonly
attribute is set only when certain condition are met. It would be
less annoying to provide a visual que that the text input has changed
to readonly rather than moving the cursor to some other place.

2. To display text that will be submitted to the server. In this case,
the text input is being used like a table cell - as a layout element to
display some text - so it may be best not to use a text input at all.

Surely the label of the checkbox provides all the required information?
Why not display some text in a <span> or similar that is not editable
at all? This would allow the page to be fully functional without
JavaScript.

If the text is controlled by the selection of an option, then only the
checkbox 'sucess' needs to be returned to the server.

3. The OP may ask why not use the displayed text at the server?
Because you don't know that the user isn't spoofing your page, so the
selection of the checkbox *will not* guarantee that the text you want
submitted will be submitted. That is, you must fully validate the form
on the server.

If the user has selected option A, and the associated text is "blah",
then you already know that because A was selected, "blah" is the value.
You don't need "blah" to be returned from the client.

If you do depend on "blah" coming back, you can't guarantee that
because A was selected, "blah" will be returned (i.e. your page has
been spoofed/hacked/whatever).

Some play code follows. I have included a reset function that may not
be needed. Disabling the text input when hidden stops it from being
submitted at all:

<form action="">
<label >Option 1<input type="checkbox" name="chk01"
value="The value of the checkbox"
onclick="
var x = this.form.ta01;
var y = document.getEle mentById('sp01' );
if (this.checked){
x.style.display ='none';
x.disabled = true;
y.innerHTML = this.value;
y.style.display = '';
}else{
x.style.display ='';
x.disabled = '';
y.style.display = 'none';
}
">
</label><input type="reset" onclick="
document.getEle mentById('sp01' ).style.display ='none';
this.form.ta01. style.display=' ';
this.form.ta01. disabled = '';
"><br>
<input name="ta01" type="text" value="" width="200px">
<span id="sp01"></span>
<br>
<input type="submit">
</form>

**mcanedo** · Jul 23 '05, 03:22 PM

Re: Move focus to next element

RobB wrote:
[color=blue]
> RobG <rgqld@iinet.ne t.auau> wrote in message
> news:<f3zmd.725 $I52.26279@news .optus.net.au>. ..[color=green]
>> mcanedo wrote:[color=darkred]
>> > Hi:
>> > I have several text elements in a form.
>> > Some of they are filled by the user, and then some are automatically
>> > filled based on the user input.
>> > Therefore I do not want the user to be able to write on the autofilled
>> > text elements.
>> > I have come to the idea of give those elements the event
>> > onFocus=functio ntoMovetoNextEl ement()
>> >
>> > Then my question is how can I do that using the elements[] array?
>> > How can I know the position of the current element in the elements[]
>> > array (that would solve it)?[/color]
>>
>> Have you considered just disabling the text boxes? You can still modify
>> the text programmaticall y but the user can't modify them.
>>
>> <input name="textBox01 " type="text" width="200px"
>> value="Here is some text" DISABLED>
>>
>> Rob.[/color]
>
>
> Probably a good idea not to disable them - if you want them to submit
> any data to the server! Read-only is more like it. Try this (uses the
> window[HTML: <BODY>].onload handler, be aware):
>
> <?xml version="1.0" encoding="iso-8859-1"?>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
> <head>
> <title>untitled </title>
> <style type="text/css">
>
> form { width: 300px; font-weight: bold; margin: 24px; }
> input { margin: 2px; }
>
> </style>
> <script type="text/javascript">
> //<![CDATA[
>
> onload = function()
> {
> var idx = 0, el, els = document.forms[0].elements;
> while (el = els.item(idx++) )
> if (el.readOnly)
> {
> el.nextIdx = idx;
> el.onfocus = function()
> {
> this.form.eleme nts[this.nextIdx].focus();
> }
> }
> if ((el = els[idx - 2]).readOnly)
> el.nextIdx = 0;
> }
>
> //]]>
> </script>
> </head>
> <body>
> <form>
> <input type="text" name="something 1" value="" />___enter data
> <input type="text" name="something 2" value="blah" readonly="reado nly"
> />___readonly!
> <input type="text" name="something 3" value="blah" readonly="reado nly"
> />___readonly!
> <input type="text" name="something 4" value="" />___enter data
> <input type="text" name="something 5" value="blah" readonly="reado nly"
> />___readonly!
> </form>
> </body>
> </html>
>
> Assumes one form in the page as well. hth[/color]

Very nice piece of code!
It solved my problem.
I have used style propertiers on the "readonly" text elements that make them
look like simple labels, so user does not even think that is an inoput
option, but their contents can be modified as an object property. User
interfcase is clean.
Thanks,
Miguel

**mcanedo** · Jul 23 '05, 03:22 PM

Re: Move focus to next element

RobG wrote:
[color=blue]
> Yes, your solution works as requested by the OP[/color]

What does OP mean?

**Andrew Thompson** · Jul 23 '05, 03:22 PM

Re: Move focus to next element

On Wed, 17 Nov 2004 19:37:35 -0600, mcanedo wrote:
[color=blue]
> RobG wrote:
>[color=green]
>> Yes, your solution works as requested by the OP[/color]
>
> What does OP mean?[/color]

Original Poster.

--
Andrew Thompson
http://www.PhySci.org/codes/ Web & IT Help
http://www.PhySci.org/ Open-source software suite
http://www.1point1C.org/ Science & Technology
http://www.LensEscapes.com/ Images that escape the mundane

Move focus to next element

Move focus to next element

Comment

Comment

Comment

Comment

Comment

Comment

Comment