Move focus to next element

M

mcanedo

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

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

Thanks,
miguel
 
R

RobG

mcanedo said:
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=functiontoMovetoNextElement()

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)?
Click to expand...

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

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

Rob.
 
M

mcanedo

RobG said:
mcanedo said:
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=functiontoMovetoNextElement()

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)?
Click to expand...

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

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

Rob.
Click to expand...

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

RobB

RobG said:
mcanedo said:
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=functiontoMovetoNextElement()

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)?
Click to expand...

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

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

Rob.
Click to expand...


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.dtd">
<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.elements[this.nextIdx].focus();
}
}
if ((el = els[idx - 2]).readOnly)
el.nextIdx = 0;
}

//]]>
</script>
</head>
<body>
<form>
<input type="text" name="something1" value="" />___enter data
<input type="text" name="something2" value="blah" readonly="readonly"
/>___readonly!
<input type="text" name="something3" value="blah" readonly="readonly"
/>___readonly!
<input type="text" name="something4" value="" />___enter data
<input type="text" name="something5" value="blah" readonly="readonly"
/>___readonly!
</form>
</body>
</html>

Assumes one form in the page as well. hth
 
R

RobG

RobB said:
[...]>
Probably a good idea not to disable them - if you want them to submit
Click to expand...

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.
... Try this ...
Click to expand...
[...]

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

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.getElementById('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.getElementById('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>
 
M

mcanedo

RobB said:
RobG said:
mcanedo said:
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=functiontoMovetoNextElement()

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)?
Click to expand...

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

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

Rob.
Click to expand...


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.dtd">
<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.elements[this.nextIdx].focus();
}
}
if ((el = els[idx - 2]).readOnly)
el.nextIdx = 0;
}

//]]>
</script>
</head>
<body>
<form>
<input type="text" name="something1" value="" />___enter data
<input type="text" name="something2" value="blah" readonly="readonly"
/>___readonly!
<input type="text" name="something3" value="blah" readonly="readonly"
/>___readonly!
<input type="text" name="something4" value="" />___enter data
<input type="text" name="something5" value="blah" readonly="readonly"
/>___readonly!
</form>
</body>
</html>

Assumes one form in the page as well. hth
Click to expand...


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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How to move logo up 4
Hover state on an element stuttering when I'm close to the edge, or move my mouse really fast 1
Uhhhhh, What can I do next? 6
Program to find the largest integer element of an array. 1
how to move focus on next dynamic (uncheked) checkbox element afteronclick event 8
Next form element 15
Centering picture element for larger screen sizes 2
changing focus to next input element 2

Members online

No members online now.
Total: 20 (members: 1, guests: 19)
Robots: 91

Forum statistics

Threads
473,780
Messages
2,569,608
Members
45,249
Latest member
KattieCort

Latest Threads

Top