473,508 Members | 2,088 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Changing disabled colors in an input text form

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>
Jul 23 '05 #1
4 2712
"multimatum2" <mu*********@voila.fr> wrote in message news:<10***************@iris.uk.clara.net>...
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>
Jul 23 '05 #2
On 5 Oct 2004 09:03:56 -0700, Robert <rc*******@my-deja.com> wrote:
"multimatum2" <mu*********@voila.fr> wrote in message
news:<10***************@iris.uk.clara.net>...
[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

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #3
"Michael Winter" <M.******@blueyonder.co.invalid> wrote in message news:<opsfenp5y0x13kvk@atlantis>...
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]


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%40atlantis>
Robert
Jul 23 '05 #4
On 5 Oct 2004 18:28:27 -0700, Robert <rc*******@my-deja.com> wrote:

[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%40atlantis>


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.
Jul 23 '05 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
2517
by: Michel | last post by:
Hi folks, I wonder if what I have in mind is possible, maybe even not all that complicated: I have an image, which is a yellow circle. I want this yellow circle to change color by having 3...
6
4064
by: TheKeith | last post by:
I am doing a form for my site and would like to enable and disable a radio button set depending on whether one of the choices on an outer radio button set is checked. How can I refer to all the...
1
32252
by: Chris Ullman | last post by:
Simply put - if I have a disabled textbox how could I change the font-color from gray? e.g. <input type="text" disabled></input> Color no longer seems to work. Can it be done and if so how? ...
1
3364
by: MickG | last post by:
I am trying to change the value of the variable "hard" according to which radio button is pressed and I am having no joy. Could anyone help me with this, the problematic section is marked with...
8
3326
by: horos | last post by:
hey all, Ok, a related question to my previous one on data dumpers for postscript. In the process of putting a form together, I'm using a lot of placeholder variables that I really don't care...
3
5122
by: Kelly Domalik | last post by:
I would like to override the "disabled" property of a hidden field. When disabled is set to "true", it would call a function to disable 2 other text fields on the form. When disabled is set to...
1
25817
by: Martin | last post by:
Is disabled to be set in the style of a tag just like visible? I am trying to set the whole content of a td tag to disabled like this, style='disabled:true' and it does not seem to work. Is this...
13
3000
by: amykimber | last post by:
Hi all, I know I'm doign something really daft, but I can't get this to work... I have a form with a bunch of inputs called ship_owner - why the ? Because I'm submitting this page though php...
4
1789
by: Sam Carleton | last post by:
How do I change the CSS colors via JavaScript DOM? Let me explain... I am working on a Windows application (in C#) that displays some HTML. In one place the HTML is a status window. What happens...
0
7226
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
7125
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
7328
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
7388
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
1
7049
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
3199
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...
0
3186
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
767
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
422
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.