Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations biv343 on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Dynamically changing text colours in a form... 1

Status
Not open for further replies.
joezapp

joezapp

Programmer
Feb 26, 2001
63
GB
I am having a problem. I have a page - simplified source code below. What I am after is for users to click either of two tickboxes - this will highlight one set of input fields and disable the other and vice versa. This works fine. However, I would like to change the colour of the text for the disabled inputs to grey (i.e 'Exchange Trans ID') but try as I might I cannot do it - (I presume it is something like setting the document.field.style.color="grey" within the function and defining the style in the field itself.) I generally get undefined variable error messages or variable 'document.field.style is null or not an object' error messages.
I've tried breaking down the page into a number of forms, adding / removing internal and external stylesheets but to not avail. Is this sort of dynamic color change possible at all from a script such as mine ? oh yes - it only has to work for IE4/5/5.5 at the moment and the references to the external stylesheets (class="pageheader" etc) aren't necessary if I need to remove them.

Any help or general pointers would be very gratefully received.

Many thanks,

Joe.:-(

<SCRIPT languae=&quot;Javascript&quot;>
function disableChoices(dWhat) {
if (dWhat == &quot;Criteria&quot;) {
if (document.select_audit_trail.OrderID.checked == true) {
document.select_audit_trail.Criteria.checked = false;
}
else {document.select_audit_trail.Criteria.checked = true;
}
}
if (dWhat == &quot;OrderID&quot;) {
if (document.select_audit_trail.Criteria.checked) {
document.select_audit_trail.OrderID.checked = false;
}
else {document.select_audit_trail.OrderID.checked = true;
}
}

if (document.select_audit_trail.Criteria.checked) {
// the exch and our elements
document.select_audit_trail.Exch_TransID.disabled = true;
document.select_audit_trail.Exch_OrderID.disabled = true;
document.select_audit_trail.Us_TransID.disabled = true;
document.select_audit_trail.Us_TransID.disabled = true;
// document.OrderID_Table.style=&quot;color:red&quot;;
// the Criteria elements
document.select_audit_trail.Portfolio.disabled = false;
document.select_audit_trail.Account.disabled = false;
document.select_audit_trail.Trade_Date.disabled = false;
document.select_audit_trail.Revision_Date.disabled = false;
}
else {
// the exch and our elements
document.select_audit_trail.Exch_TransID.disabled = false;
document.select_audit_trail.Exch_OrderID.disabled = false;
document.select_audit_trail.Us_TransID.disabled = false;
document.select_audit_trail.Us_TransID.disabled = false;
// the Criteria elements
document.select_audit_trail.Portfolio.disabled = true;
document.select_audit_trail.Account.disabled = true;
document.select_audit_trail.Trade_Date.disabled = true;
document.select_audit_trail.Revision_Date.disabled = true;
}
}
</SCRIPT>


<BODY>
<FORM NAME=&quot;select_audit_trail&quot;>
<TABLE class=&quot;pageheader&quot; CELLSPACING=&quot;0&quot;>
<TR><TD ID=&quot;PHhead&quot; class=&quot;PHh&quot; colspan=&quot;2&quot;>Selection Criteria</TD><TR>
</TABLE>

<HR>

<TABLE class=&quot;pageheader&quot;>
<TR><TD ID=&quot;Btitle&quot; class=&quot;Bti&quot;>Select by Order ID</TD>
<TD><INPUT type=&quot;Checkbox&quot; name=&quot;OrderID&quot; onclick=&quot;disableChoices('Criteria')&quot; unchecked></INPUT></TR>
</TABLE>

<BLOCKQUOTE>
<TABLE name=&quot;OrderIDTable&quot;>
<TR><TD>Exchange Trans ID</TD><TD><INPUT name=&quot;Exch_TransID&quot;></INPUT></TD></TR>
<TR><TD>Exchange Order ID</TD><TD><INPUT name=&quot;Exch_OrderID&quot;></INPUT></TD></TR>
<TR><TD>MAKO Trans ID</TD><TD><INPUT name=&quot;MAKO_TransID&quot;></INPUT></TD></TR>
<TR><TD>MAKO Order ID</TD><TD><INPUT name=&quot;MAKO_OrderID&quot;></INPUT></TD></TR>
</TABLE>
</BLOCKQUOTE>


<TABLE class=&quot;pageheader&quot;>
<TR><TD ID=&quot;Btitle&quot; class=&quot;Bti&quot;>Select by User Criteria</TD>
<TD><INPUT type=&quot;Checkbox&quot; name=&quot;Criteria&quot; onclick=&quot;disableChoices('OrderID')&quot; checked></INPUT>
</TR>
</TABLE>

<BLOCKQUOTE>
<TABLE name=&quot;Criteria_Table&quot;>
<TR><TD>Inventory</TD><TD><SELECT name=&quot;Portfolio&quot;><OPTION value=''>-- select --</OPTION>#database generated options</SELECT></TD></TR>
<TR><TD>Label</td><TD><SELECT name=&quot;Account&quot;><OPTION value=''>-- select --</OPTION>#database generated</SELECT></TD></TR>
<TR><TD>Trade Date</TD><TD><INPUT name=&quot;Trade_Date&quot;></INPUT></TD></TR>
<TR><TD>Revision Date</TD><TD><INPUT name=&quot;Revision_Date&quot;></INPUT></TD></TR>
</TABLE>
</BLOCKQUOTE>
</FORM>
</BODY>
</HTML>

 
Sort by date Sort by votes
If you have a different style class attached to each of the sets of fields you want changed you could try modifying the style itself like this:
Code: 
function Disable1() {
   var coll = document.all.tags(&quot;input&quot;);
   if ( coll != null ) {
      for (i=0; i<coll.length ; i++) {
         if ( coll[i].className = &quot;set1&quot; ) {
            coll[i].style.color = &quot;#aaaaaa&quot;;
         }
      }
   }
}
This will change the color to #aaaaaa for all input tags that have the style class &quot;set1&quot;.
I don't know which versions of IE this works in though.
Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.
 
Upvote 0 Downvote
Thanks, that's v.useful. I've got it to toggle between two check boxes on different forms using a bastardisation that (if anyone's interested) looks something like;

function Disable(where) {
if (where == &quot;orderid&quot;) {
var form1 = document.select_criteria.all.tags(&quot;TABLE&quot;);
var form2 = document.select_orderID.all.tags(&quot;TABLE&quot;);
} else {
var form2 = document.select_criteria.all.tags(&quot;TABLE&quot;);
var form1 = document.select_orderID.all.tags(&quot;TABLE&quot;);
}

if ( form1 != null ) {
for (i=0; i<form1.length ; i++) {
if (form1.className != &quot;&quot;) {
form1.style.color = &quot;#cccccc&quot;;
}
}
}
if ( form2 != null ) {
for (i=0; i<form1.length ; i++) {
if (form2.className != &quot;&quot;) {
form2.style.color = &quot;black&quot;;
}
}
}
}

Cheers

Joe. :)
 
Upvote 0 Downvote
Glad I could get you pointed in the right direction. That's what we're here for.
Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
1K
Mike Lewis
Mike Lewis
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
781
xwb
xwb
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
711
malpa
malpa
lexer
  • Locked
  • Question
Adding datepicker calendar dynamically
Replies
0
Views
265
lexer
lexer
AbidingDude
  • Locked
  • Question
Dynamically Create A Table
Replies
3
Views
217
AbidingDude
AbidingDude

Part and Inventory Search

Sponsor

Back
Top