Changing disabled colors in an input text form

M

multimatum2

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

<HTML><HEAD><TITLE></TITLE></HEAD>
<SCRIPT TYPE="text/javascript">
</SCRIPT>
<BODY >
NAME : <input type="text" ID="I1" name="I1" size="21"
style="text-align:center;color:#00FF00;">
<BR><BR>

<A HREF="javascript:" onClick="javascript:I1.disabled=true">Disable</A>
<BR>
<BR>
<A HREF="javascript:" onClick="javascript:I1.disabled=false"> Enable </A>
</BODY>
</HTML>
 
R

Robert

multimatum2 said:
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...
NAME : <input type="text" ID="I1" name="I1" size="21"

Well, I try to avoid duplicating id and name field names.
style="text-align:center;color:#00FF00;">
<BR><BR>

<A HREF="javascript:" onClick="javascript:I1.disabled=true">Disable</A>
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>Visibility test</TITLE>
</HEAD>
<SCRIPT TYPE="text/javascript">
function toggleVisibility(theId,theDisplay)
{
// Check if the getElementById method is available
if (document.getElementById)
{
document.getElementById(theId).style.visibility = theDisplay;
}
else if (document.all)
{
alert("Running an older version of IE.");
document.all[theId].style.visibility = 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;color:#00FF00;">
<BR><BR>
<input TYPE=BUTTON
NAME="cmdDisable"
VALUE="Disable"
onClick="toggleVisibility('I1','hidden');">

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

Michael Winter

[snip]
NAME : <input type="text" ID="I1" name="I1" size="21"

Well, I try to avoid duplicating id and name field names.

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.elements['name']

returns an element consistently.

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

A label is more semantically correct.

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

[snip]
function toggleVisibility(theId,theDisplay)
{
// Check if the getElementById method is available
if (document.getElementById)
{
document.getElementById(theId).style.visibility = theDisplay;
}
else if (document.all)
{
alert("Running an older version of IE.");
document.all[theId].style.visibility = theDisplay;
}
else
{ alert("Cannot change visibility of field"); }

}

Of course, you could pass a reference:

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

or

onclick="toggleVisibility('myInput', this.form, ...);">

function toggleVisibility(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
 
R

Robert

Michael Winter said:
Well, I try to avoid duplicating id and name field names.

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.elements['name']

returns an element consistently.

[snip]

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

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.com/groups?hl=en&lr=&selm=opsevovyvzx13kvk@atlantis>


Robert
 
M

Michael Winter

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

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.elements['first'] // first INPUT
formObj.elements['second'] // third INPUT

The only way to access the second INPUT is either by adding a unique id,
or indexing by ordinal number.
Will this statement still work in IE with duplicate name and id
attribute names?

document.all[theId].style.visibility

Do you mean with

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

Yes, it will.
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.

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?
Does IE put both the id and name in the all collection? Any problems to
worry about if it does?

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.
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.com/groups?hl=en&lr=&selm=opsevovyvzx13kvk@atlantis>

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
 

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

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,901
Latest member
Noble71S45

Latest Threads

Top