[sOLVED} -HTML Help Please

September 22, 2009, 11:44 AM

I have some HTML code that I have used in the past to disable or Gray Out variables on the page. However I always used it based on the selection from a Radio button or Checkbox. Where you just check for TRUE I now need to do the same based on the selection from a dropdown list or combobox.

I have a dropdown list or Combobox with several selections :
'None'
Last Month
Last six Months
Last year
EOM
Range

Unless EOM or Range is selected I have no need for the user to select a date so I would like to grey out or disable the date selection unless EOM or Range is selected.

Can this be done and does anyone have an example

Thank you

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

September 22, 2009, 12:19 PM

dhagen

There is an example of showing conditional hidding and unhidding of controls in this year's summit presentations. Look for presentations by David Glick. Hopefully someone else here can present you with the URL for the summit presentations, as I cannot remember the specific link.

September 22, 2009, 12:20 PM

Darin Lee

Sorry - I'm not an HTML/javascript guru (far from it) so someone else can probably fill in the details here. There is an "onchange" event for a control which you can have check the selectedIndex property of your control to see if it is 4 (EOM) or 5 (Range) and enable your other controls. Otherwise they should be .disable'd

This message has been edited. Last edited by: Darin Lee,

September 22, 2009, 12:56 PM

Tom Flynn

Here's a concept off the web, you can just copy it into a new HTML file in WebFOCUS and run it.
It's off the Web because I'm not even in Darin's class!!

  
<html>
<head>
<script type="text/javascript">
function doClick(objRad){
if (objRad.value=="0"){ 
document.getElementById("textbox").style.display='none'; //hide textbox
document.getElementById("otherOpt").style.display='block'; //show other options
}
else{ 
document.getElementById("otherOpt").style.display='none'; //hide other options
document.getElementById("textbox").style.display='block'; //show textbox
}
}
</script>
</head>
<body>
<form name="myform">
<table>
<tr>
<td>
<input type="radio" name="rad" value="0" onclick="doClick(this)">Other options
</td>
<td>
<div id="otherOpt" style="display:none">
<input type="radio" name="rad2" value="0">Option 1
<input type="radio" name="rad2" value="1">Option 2
</div>
</td>
<tr>
<td>
<input type="radio" name="rad" value="1" onclick="doClick(this)">Show textbox
</td>
<td>
<div id="textbox" style="display:none">
<input type="text" name="txt">
</div>
</td>
</form>
</body>
</html>

September 22, 2009, 03:31 PM

Dgraff

Tom ,
I too like you and Darrin am not an expert you found the piece of code I used in the past to hide unhide a textbox by using a radio button. But as I stated above I now need to do the same based on the selection from a dropdown list or combobox. I've tried modifing the Radio button code with no luck.

September 22, 2009, 04:16 PM

Dan Pinault

Dgraff,

Here's something I've used...

var Varlist = document.getElementById('combobox1');

for(var x=0; x < Varlist.options.length; x++)                         //iterate through the options in the combobox
    {
    if (Varlist.options[Varlist.selectedIndex].value == 'TEST_VALUE') //test selected option against some value
	{
		doSomething;                                        //what to do if selected option matches test value
	}
    else
         {
                  doSomethingElse;                                    //what to do if selected option does NOT match test value
         }
    }

I think you may be able to skip the iteration and go right to testing the selected value. I'm not a javascript whiz either and I found this on the web. Hope it helps.

Dan

September 22, 2009, 04:21 PM

Francis Mariani

<!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' lang='en' xml:lang='en'>

<head>

<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<meta http-equiv='Content-Style-Type' content='text/css' />

<title>Test Select</title>

<script type='text/javascript'>
function displaySelected()
{
a = document.getElementById('select1');
if (a[a.selectedIndex].value == '2')
  {
  document.getElementById('select2label').style.color = 'gray';
  document.getElementById('select2').disabled = true;
  }
else
  {
  document.getElementById('select2label').style.color = 'black';
  document.getElementById('select2').disabled = false;
  }
}
</script>
</head>

<body>
<form method='post' action=''>

<div style='margin: 10px;'>
<span id='select1label'>Select 1</span>
<select id='select1' onchange='displaySelected();'>
<option value='1' selected='selected'>A</option>
<option value='2'>B</option>
<option value='3'>C</option>
</select>
</div>

<div style='margin: 10px;'>
<span id='select2label'>Select 2</span>
<select id='select2'>
<option value='11'>AA</option>
<option value='22'>BB</option>
<option value='33'>CC</option>
</select>
</div>

</form>
</body>
</html>

This message has been edited. Last edited by: Francis Mariani,