Focal Point Banner


As of December 1, 2020, Focal Point is retired and repurposed as a reference repository. We value the wealth of knowledge that's been shared here over the years. You'll continue to have access to this treasure trove of knowledge, for search purposes only.

Join the TIBCO Community
TIBCO Community is a collaborative space for users to share knowledge and support one another in making the best use of TIBCO products and services. There are several TIBCO WebFOCUS resources in the community.

  • From the Home page, select Predict: WebFOCUS to view articles, questions, and trending articles.
  • Select Products from the top navigation bar, scroll, and then select the TIBCO WebFOCUS product page to view product overview, articles, and discussions.
  • Request access to the private WebFOCUS User Group (login required) to network with fellow members.

Former myibi community members should have received an email on 8/3/22 to activate their user accounts to join the community. Check your Spam folder for the email. Please get in touch with us at community@tibco.com for further assistance. Reference the community FAQ to learn more about the community.


Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED] Javascript help: Disable and change colour of input field

Read-Only Read-Only Topic
Go
Search
Notify
Tools
[SOLVED] Javascript help: Disable and change colour of input field
 Login/Join
 
mark66
Platinum Member
posted
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,


WebFocus 765. iSeries v5r4
 
Posts: 175 | Location: England | Registered: April 11, 2006Report This Post
Tom Flynn
Expert
posted Hide Post
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


Tom Flynn
WebFOCUS 8.1.05 - PROD/QA
DB2 - AS400 - Mainframe
 
Posts: 1972 | Location: Centennial, CO | Registered: January 31, 2006Report This Post
mark66
Platinum Member
posted Hide Post
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


WebFocus 765. iSeries v5r4
 
Posts: 175 | Location: England | Registered: April 11, 2006Report This Post
Tom Flynn
Expert
posted Hide Post
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>


Tom Flynn
WebFOCUS 8.1.05 - PROD/QA
DB2 - AS400 - Mainframe
 
Posts: 1972 | Location: Centennial, CO | Registered: January 31, 2006Report This Post
Tom Flynn
Expert
posted Hide Post
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,


Tom Flynn
WebFOCUS 8.1.05 - PROD/QA
DB2 - AS400 - Mainframe
 
Posts: 1972 | Location: Centennial, CO | Registered: January 31, 2006Report This Post
Tony A
Expert
posted Hide Post
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 
 
Posts: 5694 | Location: United Kingdom | Registered: April 08, 2004Report This Post
Maintain Wizard
Master
posted Hide Post
Mark
Did you ever get the answer to this that you wanted? I am using a Maintain form, but the following code DOES change the background color of the field to grey.

document.getElementById("Field1_Edit").style.background="#CCCCCC";

Mark
 
Posts: 663 | Location: New York | Registered: May 08, 2003Report This Post
  Powered by Social Strata  

Read-Only Read-Only Topic

Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED] Javascript help: Disable and change colour of input field

Copyright © 1996-2020 Information Builders