Changing disabled colors in an input text form

**Robert** · Jul 23 '05, 02:27 PM

Re: Changing disabled colors in an input text form

"multimatum 2" <multimatum2@vo ila.fr> wrote in message news:<109697369 7.4614.0@iris.u k.clara.net>...[color=blue]
> Hello,
> I need to enable/disable input text forms...
> But...
> I need to have the same style (color...) in both modes..
> Could you help me ?
> Thanx a lot
>
> A small sample...
>[/color]
[color=blue]
> NAME : <input type="text" ID="I1" name="I1" size="21"[/color]

Well, I try to avoid duplicating id and name field names.
[color=blue]
> style="text-align:center;co lor:#00FF00;">
> <BR><BR>
>
> <A HREF="javascrip t:" onClick="javasc ript:I1.disable d=true">Disable </A>[/color]
User's expect an anchor tag to take them to another page. I like to
use a button for this.

There are two sytle attributes for hidding things: display and
visibility. When a tag is hidden with display, no screen space is
taken. When a tag is hidden with visiblity, the text disappears, but
screen space is taken.

How to hide the name too? Put what you want to hide in a division or
span tag.

I'll enclose an example:

<HTML>
<HEAD>
<TITLE>Visibili ty test</TITLE>
</HEAD>
<SCRIPT TYPE="text/javascript">
function toggleVisibilit y(theId,theDisp lay)
{
// Check if the getElementById method is available
if (document.getEl ementById)
{
document.getEle mentById(theId) .style.visibili ty = theDisplay;
}
else if (document.all)
{
alert("Running an older version of IE.");
document.all[theId].style.visibili ty = theDisplay;
}
else
{ alert("Cannot change visibility of field"); }

}
</SCRIPT>
<BODY>
<form>
NAME :
<input type="text"
ID="I1"
name="I1name"
size="21"
style="text-align:center;co lor:#00FF00;">
<BR><BR>
<input TYPE=BUTTON
NAME="cmdDisabl e"
VALUE="Disable"
onClick="toggle Visibility('I1' ,'hidden');">

<BR>
<BR>
<input TYPE=BUTTON
NAME="cmdEnable "
VALUE="Enable"
onClick="toggle Visibility('I1' ,'visible');">
</form>
</BODY>
</HTML>

**Michael Winter** · Jul 23 '05, 02:27 PM

Re: Changing disabled colors in an input text form

On 5 Oct 2004 09:03:56 -0700, Robert <rccharles@my-deja.com> wrote:
[color=blue]
> "multimatum 2" <multimatum2@vo ila.fr> wrote in message
> news:<109697369 7.4614.0@iris.u k.clara.net>...[/color]

[snip]
[color=blue][color=green]
>> NAME : <input type="text" ID="I1" name="I1" size="21"[/color]
>
> Well, I try to avoid duplicating id and name field names.[/color]

Why? There's no need to, just make sure that if a name and id do match,
that they're on the same element or are in different forms. This makes
sure that

formObj.element s['name']

returns an element consistently.

[snip]
[color=blue]
> How to hide the name too? Put what you want to hide in a division or
> span tag.[/color]

A label is more semantically correct.

<label for="id">Name:
<input id="id" ...></label>

[snip]
[color=blue]
> function toggleVisibilit y(theId,theDisp lay)
> {
> // Check if the getElementById method is available
> if (document.getEl ementById)
> {
> document.getEle mentById(theId) .style.visibili ty = theDisplay;
> }
> else if (document.all)
> {
> alert("Running an older version of IE.");
> document.all[theId].style.visibili ty = theDisplay;
> }
> else
> { alert("Cannot change visibility of field"); }
>
> }[/color]

Of course, you could pass a reference:

<form ...>
<input id="myInput" ...>
<input type="button"
onclick="toggle Visibility(this .form.elements['myInput'], ...);">

or

onclick="toggle Visibility('myI nput', this.form, ...);">

function toggleVisibilit y(n, f, v) {
var e = f.elements[n];
// ...
}

You should also remember to test for the presence of the style object
before using it.

[snip]

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

**Robert** · Jul 23 '05, 02:27 PM

Re: Changing disabled colors in an input text form

"Michael Winter" <M.Winter@bluey onder.co.invali d> wrote in message news:<opsfenp5y 0x13kvk@atlanti s>...
[color=blue]
>[color=green][color=darkred]
> >> NAME : <input type="text" ID="I1" name="I1" size="21"[/color]
> >
> > Well, I try to avoid duplicating id and name field names.[/color]
>
> Why? There's no need to, just make sure that if a name and id do match,
> that they're on the same element or are in different forms. This makes
> sure that
>
> formObj.element s['name']
>
> returns an element consistently.
>
> [snip][/color]

The usage of name and id attributes is a little confusing to me. I've
simplified my task by avoiding duplicate names.

Will this statement still work in IE with duplicate name and id
attribute names?

document.all[theId].style.visibili ty

There seems to be some overlap with the use if id and name. You seem
to code up the name tag in forms and the id tag everywhere else.

Does IE put both the id and name in the all collection? Any problems
to worry about if it does?

I was trying to avoid potential problems suggested in an earlier post
that Mike Winter made:

Here's the code I use for gEBI and d.all support (part of a larger
collection of code):

....

It tries to ensure that only one element is returned by the all
collection, and that that element was retrieved by its id, only.

<http://groups.google.c om/groups?hl=en&lr =&selm=opsevovy vzx13kvk%40atla ntis>

Robert

**Michael Winter** · Jul 23 '05, 02:28 PM

Re: Changing disabled colors in an input text form

On 5 Oct 2004 18:28:27 -0700, Robert <rccharles@my-deja.com> wrote:

[snip]
[color=blue]
> The usage of name and id attributes is a little confusing to me. I've
> simplified my task by avoiding duplicate names.[/color]

That's fair enough. I just thought I'd mention that it's not necessary.

As far as look-up goes, named DOM collections like forms and elements try
to find an element with a matching id, first. If one cannot be found, then
elements are checked for a matching name.

<input id="first">
<input name="first">
<input name="second">

formObj.element s['first'] // first INPUT
formObj.element s['second'] // third INPUT

The only way to access the second INPUT is either by adding a unique id,
or indexing by ordinal number.
[color=blue]
> Will this statement still work in IE with duplicate name and id
> attribute names?
>
> document.all[theId].style.visibili ty[/color]

Do you mean with

<input id="myInput" name="myInput">

Yes, it will.
[color=blue]
> There seems to be some overlap with the use if id and name. You seem to
> code up the name tag in forms and the id tag everywhere else.[/color]

No, they're entirely separate. The name attribute is used in some non-form
control-related elements due to backwards compatibility. For example, the
name attribute serves no purpose on the FORM element itself, but NN4 won't
find that form if you reference it using an id. The same is true with IMG
elements.

With form controls, the name attribute is used during submission to pair
with the control's value. Only name can be used for this purpose, which is
why it's associated with controls so much. Whilst the name values can be
used to reference a form control for scripting purposes, it's just as easy
to use an id.

With non-form control-related elements, the decision to use a name or id
mainly comes down to what browser support you want. If you don't care for
NN4 and browsers of its generation, use id values to identify and
reference them. These elements could also then be used as target for
fragment identifiers (#myId) in links. If you do want NN4 support so you
can access elements from script, add an id and a name attribute with the
same value.

Did that help at all?
[color=blue]
> Does IE put both the id and name in the all collection? Any problems to
> worry about if it does?[/color]

It does, but it becomes less consistent.

<input name="first">
<input id="first">

document.all['first']

returns a collection containing both INPUT elements. Rather than basing
the order on whether the element was matched by id or name, it's done by
document order.

var inputs = document.all['first']

inputs[0] // INPUT name="first"
inputs[1] // INPUT id="first"

This is why the code you've referenced below, and that in the FAQ (the
long code version), checks that IE is returning only by id, and that it
only returns one element.
[color=blue]
> I was trying to avoid potential problems suggested in an earlier post
> that Mike Winter made:
>
> Here's the code I use for gEBI and d.all support (part of a larger
> collection of code):
>
> ...
>
> It tries to ensure that only one element is returned by the all
> collection, and that that element was retrieved by its id, only.
>
> <http://groups.google.c om/groups?hl=en&lr =&selm=opsevovy vzx13kvk%40atla ntis>[/color]

I'd like to mention that there's an error in that code as pointed out by
Richard. See my response later in the thread for code that replaces the
document.all section.

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

Changing disabled colors in an input text form

Changing disabled colors in an input text form

Comment

Comment

Comment

Comment