[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 277
  • Last Modified:

turning a textbox yellow

I have a checkbox next to a textbox. When the checkbox is checked, I need the textbox to turn yellow so that the user will know they need to enter something in there. Then, when something is entered, the yellow goes away

Thank you
0
weikelbob
Asked:
weikelbob
  • 8
  • 5
  • 3
  • +1
1 Solution
 
aplimediaCommented:
<style type="text/css">
<!--
.TextBoxOn {
      background-color: #FFCC00;
      border: 1px solid #000000;
}
.TextBoxOFF {
      background-color: #FFFFFF;
      border: 1px solid #FF0000;
}
-->
</style>
<script language="JavaScript">
function change()
{
if (document.getElementById("txtBob1").value == "")
document.getElementById("txtBob1").className="TextBoxOn";
else
document.getElementById("txtBob1").className="TextBoxOFF";
}
</script>
0
 
aplimediaCommented:
Ás you can see the check box and the text box, both run the same bit of Javascrip. The check box does it onClick, and the text box onBlur.

There are 2 defined css styles, TextBoxOn (yellow) and TextBoxOFF (White).

The Javascript, irrespective of which element calls it, simple looks to see if there is any content in the textbox, If not, it defines the style sheet as "TextBoxOn " else, TextBoxOFF".

Hope this is what you needed.
Aplimedia
0
 
aplimediaCommented:
Just in case you need it... here is the entire html page. copy and paste it and run it.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
.TextBoxOn {
      background-color: #FFCC00;
      border: 1px solid #000000;
}
.TextBoxOFF {
      background-color: #FFFFFF;
      border: 1px solid #FF0000;
}
-->
</style>
<script language="JavaScript">
function change()
{
if (document.getElementById("txtBob1").value == "")
document.getElementById("txtBob1").className="TextBoxOn";
else
document.getElementById("txtBob1").className="TextBoxOFF";
}
</script>
</head>

<body>
<form name="form1" method="post" action="">
  <input name="Chk" type="checkbox" id="Chk" onClick="change();" value="WhatEver">
  <input name="txtBob1" type="text" class="TextBoxOFF" id="txtBob1" onBlur="change();">
</form>
</body>
</html>
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
weikelbobAuthor Commented:
0
 
basicinstinctCommented:
I do this on my site: http://malydog.homeip.net/jsp/NewGBEntry.jsp

I used stylesheets to do it - I just changed the CSS class rather than applying the color directly.


0
 
basicinstinctCommented:
By the way, the code is here:

http://malydog.homeip.net/scripts/funkyform.js
0
 
weikelbobAuthor Commented:
I think my problem is that I have more than one set of checkboxes and input boxes.
0
 
basicinstinctCommented:
Sorry - i set the color on focus - a bit different - oops, ignore what i said
0
 
basicinstinctCommented:
Dude - try this - replace any existng script with this one:

<script>
            function change()
            {
                  var inputs = document.getElementsByTagName('input');
                  var switchOn = false;
                  for(var i=0; i < inputs.length; i++)
                  {
                        if(inputs[i].type.toLowerCase() == 'text')
                        {
                              if(switchOn)
                              {
                                    inputs[i].setAttribute('class', 'TextBoxOn');
                                    switchOn = false;
                              }
                              else
                              {
                                    inputs[i].setAttribute('class', 'TextBoxOFF');
                              }                        
                        }
                        else if(inputs[i].type.toLowerCase() == 'checkbox')
                        {
                              if(inputs[i].checked)
                              {
                                    switchOn = true;
                                    
                              }
                        }
                              
                  }
                  
            }
      </script
0
 
basicinstinctCommented:
By the way, I'm on linux right now and haven't tested on anything but firefox - worked fine there.

I think from something the page editor said once it may be safer to change these lines:

inputs[i].setAttribute('class', 'TextBoxOn');
and
inputs[i].setAttribute('class', 'TextBoxOFF');

to these:

inputs[i].class = 'TextBoxOn';
and
inputs[i].'class' = 'TextBoxOFF';

I think he said the 'setAttribute' method is not as widely supported.
0
 
basicinstinctCommented:
Sorry, I'm all over the place today - I tried what I said above and it didn't work!

Since I've confused you so much, here's my test page running:

http://malydog.homeip.net/ee/Q_21865716.html
0
 
basicinstinctCommented:
Ok, I looked at the code from aplimedia and he has a good way of doing it, so change like this:


inputs[i].setAttribute('class', 'TextBoxOn');
and
inputs[i].setAttribute('class', 'TextBoxOFF');

to these:

inputs[i].className =  'TextBoxOn';
and
inputs[i].className =  'TextBoxOFF';

testpage changed accordingly: http://malydog.homeip.net/ee/Q_21865716.html
0
 
basicinstinctCommented:
Ok, I missed one of your requirements, to turn off the yellow when something is entered into the box: how's this:

<script>
            function change()
            {
                  var inputs = document.getElementsByTagName('input');
                  var switchOn = false;
                  for(var i=0; i < inputs.length; i++)
                  {
                        if(inputs[i].type.toLowerCase() == 'text')
                        {
                              if(switchOn)
                              {
                                    if(inputs[i].value == '')
                                    {
                                          inputs[i].className = 'TextBoxOn';
                                    }
                                    else
                                    {
                                          inputs[i].className = 'TextBoxOFF';
                                    }
                                    switchOn = false;
                              }
                              else
                              {
                                    inputs[i].className = 'TextBoxOFF';
                              }                        
                        }
                        else if(inputs[i].type.toLowerCase() == 'checkbox')
                        {
                              if(inputs[i].checked)
                              {
                                    switchOn = true;
                                    
                              }
                        }
                              
                  }
                  
            }
      </script>
0
 
ClickCentricCommented:
In simple terms:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <input name="checkbox" type="checkbox" id="check1" onclick="document.getElementById('input1').style.background='#FFFF00';" value="checkbox" />
  Check Me
- Fill this in:
<input name="textfield" type="text" id="input1" onkeydown="document.getElementById('input1').style.background='#FFFFFF';" />
</form>
</body>
</html>

This should do what you want.  If you need it to be more elaborate, let me know the details.
0
 
aplimediaCommented:
Hi weikelbob,

Its obvious we are on different time zones!

Yes, you are right, the reason it does not work on your example, is that you have more than one. This was not specified in your requiremnts. Nevermind, tell me if I should do it for you, but you will need to pass the ID of the element being actioned, to the Javascript so that it knows which one to run its script on.

I hope this makes sense.

Aplimedia
0
 
aplimediaCommented:
copy and paste the whole page. add more if necessary, just up the number in the id or eben set this as a dynamic variable.

A.


<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
.TextBoxOn {
      background-color: #FFCC00;
      border: 1px solid #000000;
}
.TextBoxOFF {
      background-color: #FFFFFF;
      border: 1px solid #FF0000;
}
-->
</style>
<script language="JavaScript">
function change(TheID)
{
if (document.getElementById(TheID+"txtBox").value == "")
document.getElementById(TheID+"txtBox").className="TextBoxOn";
else
document.getElementById(TheID+"txtBox").className="TextBoxOFF";
}
</script>
</head>

<body>
<form name="form1" method="post" action="">
  <input name="1Chk" type="checkbox" id="1checkBox" onClick="change(1);" value="WhatEver">
  <input name="2txtBob" type="text" class="TextBoxOFF" id="1txtBox" onBlur="change(1);">
<!-- new set 2 --><BR>
  <input name="2Chk" type="checkbox" id="2checkBox" onClick="change(2);" value="WhatEver">
  <input name="2txtBob" type="text" class="TextBoxOFF" id="2txtBox" onBlur="change(2);">
<!-- new set 3 --><BR>
  <input name="3Chk" type="checkbox" id="3checkBox" onClick="change(3);" value="WhatEver">
  <input name="3txtBob" type="text" class="TextBoxOFF" id="3txtBox" onBlur="change(3);">
<!-- new set 4 --><BR>
  <input name="4Chk" type="checkbox" id="4checkBox" onClick="change(4);" value="WhatEver">
  <input name="4txtBob" type="text" class="TextBoxOFF" id="4txtBox" onBlur="change(4);">
<!-- new set 5 --><BR>
  <input name="5Chk" type="checkbox" id="5checkBox" onClick="change(5);" value="WhatEver">
  <input name="5txtBob" type="text" class="TextBoxOFF" id="5txtBox" onBlur="change(5);">
</form>
</body>
</html>
0
 
ClickCentricCommented:
He'd probably want to use onkeydown instead of onblur, like I did in my example above..it sounds like he wants it to change the moment someone starts typing, not when they leave it.
0
 
weikelbobAuthor Commented:
I almost always split points, but basicinstinct gave me exactly what I was looking for this time. You can always let me know if anyone thinks they deserves some points.

Thanks,

Bob
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 8
  • 5
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now