We help IT Professionals succeed at work.

Change textbox background color onchange or onblur

drews1f
drews1f asked
on
4,445 Views
Last Modified: 2008-02-28
I have a group of textboxes which are defaulted to 0.00! I need the background of each textbox to change backgroundcolor to green once any other figure except 0.00 (OR blank) is entered.

Cheers
Comment
Watch Question

erikTsomikSystem Architect, CF programmer

Commented:
try this. this code is working


 
 
<html>
 
<head>
  <script>
    function changeClass(modeVar, field) {
      if (modeVar == "working") { field.className = modeVar; }
      else {
        if (field.value) { field.className = "full"; }
        else { field.className = "empty"; }
      }
    }
  </script>
 
  <style>
    .empty { background-color:#ffffff; }
    .working { background-color:#ffffcc; }
    .full { background-color: #339900; }
  </style>
</head>
 
<body>
  <table>
    <tr id="test" class="pending finishPEN">
    <th scope="row">Heading Text</th>
      <td>
        <input type="text" name="text1" id="text1" value="0.00" onFocus="changeClass('working', this)" onChange="changeClass('change', this);" 
          onBlur="changeClass('blur', this);"/>
<input type="text" name="text2" id="text2" value="0.00" onFocus="changeClass('working', this)" onChange="changeClass('change', this);" 
          onBlur="changeClass('blur', this);"/>
<input type="text" name="text3" id="text3" value="0.00" onFocus="changeClass('working', this)" onChange="changeClass('change', this);" 
          onBlur="changeClass('blur', this);"/>
<input type="text" name="text4" id="text4" value="0.00" onFocus="changeClass('working', this)" onChange="changeClass('change', this);" 
          onBlur="changeClass('blur', this);"/>
      </td>
    </tr>
  </table>
</body>
 
</html>

Open in new window

Author

Commented:
hi thats working apart from 0.00 is going green. I would like 0, 0.00 and blank to be classed as imcomplete. thanks
System Architect, CF programmer
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
ok thats exactly what i needed.
One other thing.

Is it possible to check each box as the page loads to change the background color of the boxes?
erikTsomikSystem Architect, CF programmer

Commented:
sure it does. This will set background color as red on load
window.onload = function {
var x = document.getElementById('text1').style.backgroundcolor='red';

}
Forced accept.

Computer101
EE Admin
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.