[SOLVED] Javascript help: Disable and change colour of input field

April 15, 2009, 09:49 AM

mark66

Hi all,

We are trying to improve some of our front-end validation using Javascript. I have a standard Input Box (edit1) and a TextArea (textarea1). When the user enters some values in the input box we want to disable the textarea and change the background colour to grey.

I have got as far as disabling the textarea, but I can't get the syntax right for the background colour.

//Begin function edit1_onblur
function edit1_onblur(ctrl) {

if(document.getElementById("edit1").value != "")
{
document.getElementById("textarea1").disabled = true;
document.getElementById("textarea1").style.bgcolor = "lightgrey";
}
else
{
document.getElementById("textarea1").disabled = false;
//document.getElementById("textarea1").background-color = "white";
}

}
//End function edit1_onblur
</SCRIPT>

I have tried the various syntax's for changing the colour:

document.getElementById("textarea1").background-color = "lightgrey";
document.getElementById("textarea1").background-color = "#B0B0B0";
document.getElementById("textarea1").style.bgcolor = "lightgrey";

etc ect

Can anyone spot where I am going wrong?

Any help greatly appreciated as always!

Thanks

Mark

This message has been edited. Last edited by: Kerry,

April 15, 2009, 10:18 AM

Tom Flynn

Mark,

Have you tried readOnly???

  
if(document.formOne.fieldInfo.checked)
{
       document.forms['myFormId'].myTextArea.setAttribute('readOnly','readOnly');
}
else if(!document.formOne.fieldInfo.checked)
{
      document.forms['myFormId'].myTextArea.setAttribute('readOnly',false); 
      // also tried document.formOne.fieldtextarea.focus(); 
}

This is an example, you will need to modify to your scenario...

HTH

Tom

April 15, 2009, 10:30 AM

mark66

Hi Tom,

Thanks for the suggestion, however it didn't seem to apply when using the getElementByID method we have used previously:

//Begin function edit1_onblur
function edit1_onblur(ctrl) {

if(document.getElementById("edit1").value != "")
{
document.getElementById("textarea1").setAttribute('readOnly','readOnly');
}
else
{
document.getElementById("textarea1").setAttribute('readOnly',false);
}

}
//End function edit1_onblur

Also we really would like the textarea to change colour, to make it more obvious to the user that it is now disabled, ReadOnly does not do this.

Thanks

Mark

April 15, 2009, 10:51 AM

Tom Flynn

Hey Mark,

Well, maybe this will help; I would think a web search will be better than here. Anyways, Happy Searching...

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
var oTxt;
var dC='#E5E5E5';//disabled color
var eC='#FFFFFF';//enabled color
function endis(n){
var oRads = document.getElementsByName(n);
if(oRads[0].checked){//if the first radio button is checked
oTxt.removeAttribute('readOnly');
oTxt.style.backgroundColor=eC;
}
else{
oTxt.value='';
oTxt.setAttribute('readOnly',true)
oTxt.style.backgroundColor=dC;
}
}
onload=function(){
oTxt = document.getElementsByName('txt')[0];
oTxt.style.backgroundColor=dC;
oTxt.setAttribute('readOnly',true)
}
</script>
</head>
<body>
<form>
<input name="rad" type="radio" value="" onclick="endis(this.name)">enable textfield
<br>
<input name="rad" type="radio" value="" onclick="endis(this.name)">disable textfield
<br>
<input name="txt" type="text">
</form>
</body>
</html>

April 15, 2009, 08:20 PM

Tom Flynn

Hi Mark,

I thought I'd give you one more example. After this, unless a JS guru chimes in, you're on your own!!

The caveat: Because of the bacground color, the cursor goes to the url on the address line; you have to tab down to the box (ugh!).

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
var oTxt1;
var dC='#E5E5E5';//disabled color
var eC='#FFFFFF';//enabled color
function endis(n){
var oRads = document.getElementById("edit1");
if(oRads.value != ""){// if text1 != "" a space means it is not blank
oTxt.removeAttribute('readOnly');
oTxt.style.backgroundColor=eC;
}
else{
oTxt.value='';
oTxt.setAttribute('readOnly',true)
oTxt.style.backgroundColor=dC;
}
}
onload=function(){
oTxt = document.getElementById('edit2');
oTxt.style.backgroundColor=dC;
oTxt.setAttribute('readOnly',true)
}
</script>
</head>
<body>
<form>
<input id=edit1 name="text1" type="text" value=""> Enter Text Box 1
<br>
<input id=edit2 name="text2" type="text" value="" onfocus="endis(this.id)">Enter Text Box 2 if Text 1 is not blank!
<br>
</form>
</body>
</html>

Tom

This message has been edited. Last edited by: Tom Flynn,

April 16, 2009, 02:50 AM

Tony A

I would only change a few things within Toms JS to make it -

<script type="text/javascript">
var dC="#E5E5E5";//disabled color
var eC="#FFFFFF";//enabled color
function endis(n) {
  oRads = document.getElementById("edit1");
  oTxt = document.getElementById(n);
  if (oRads.value != "" && oRads.value != null) {
// if text1 != "" a space means it is not blank
    oTxt.removeAttribute("readOnly");
    oTxt.style.backgroundColor=eC;
  } else {
    oTxt.value="";
    oTxt.setAttribute("readOnly",true)
    oTxt.style.backgroundColor=dC;
  }
}
onload=function() {
  oTxt = document.getElementById("edit2");
  oTxt.style.backgroundColor = dC;
  oTxt.setAttribute("readOnly",true)
  oRads = document.getElementById("edit1");
  oRads.focus();
}
</script>

Basically adding a check for a null value otherwise focusing on text2 at page launch will allow you to enter text (using I.E.), also using the passed value to the "endis" function to prime the oTxt object.

T

In FOCUS since 1986	WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2
	WebFOCUS App Studio 8.2.06 standalone on Windows 10