Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

using visibility with second dropdown

Status
Not open for further replies.
tilmant

tilmant

IS-IT--Management
Jul 11, 2001
10
US
I need a little help with a request form that we have designed below. We are able to hide and show visibility with the first selected dropdown, but we now what to do the same base on the second selection (second Dropdown) once it is visible. Is it possible to do within the current form and how do you do it? Here is the html/javascript code:
Thanks
--------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>SCC Social Services Agency</title>
<script language="JavaScript">
<!--
var group = new Array(6);
var group2 = new Array(6);
for (i = 0; i < 6; i++) group = new Array();
for (k = 0; k < 6; k++) group2[k] = new Array();
group[0][0] = new Option('n/a','n/a');
group[1][0] = new Option('Select a program','Select one');
group[1][1] = new Option('AAP','AAP');
group[1][2] = new Option('CAPI','CAPI');
group[2][0] = new Option('Select a program','Select one');
group[2][1] = new Option('AAP','AAP');
group[2][2] = new Option('CAPI','CAPI');
group[3][0] = new Option('Select a program','Select one');
group[3][1] = new Option('AAP','AAP');
group[3][2] = new Option('CAPI','CAPI');
group[4][0] = new Option('','');
group[5][0] = new Option('','');
group2[0][0] = new Option('n/a','n/a');
group2[1][0] = new Option('Select a subsystem','Select one');
group2[1][1] = new Option('Alerts','Alerts');
group2[1][2] = new Option('Answers','Answers');
group2[2][0] = new Option('Select a subsystem','Select one');
group2[2][1] = new Option('Alerts','Alerts');
group2[2][2] = new Option('Answers','Answers');
group2[3][0] = new Option('Select a subsystem','Select one');
group2[3][1] = new Option('Alerts','Alerts');
group2[3][2] = new Option('Answers','Answers');
group2[4][0] = new Option('','');
group2[5][0] = new Option('','');
'-->
</script>
<script language="JavaScript">
<!-- Begin
function validCheckBox(formField)
{ var result = true;
if (formField.checked == false)
{result = false;}
return result;}
function textCounter(field,cntfield,maxlimit) {
if (field.value.length > maxlimit)
field.value = field.value.substring(0, maxlimit);
else
cntfield.value = maxlimit - field.value.length;
}
function validCategory(formField,fieldvalue,fieldLabel)
{ var result = true;
if (formField.value == fieldvalue)
{alert('Please select a ' + fieldLabel + '.');
formField.focus();
result = false;}
return result;}
function validtextbox(formField, mainCategory)
{ var result = true;
if (mainCategory.value == 'Option One'){
if (formField.value == '')
{alert('Please input case number.');
formField.focus();
result = false;}}
return result;}
function validateForm(theForm)
{
if (!validCategory(theForm.mainCats,"Main Categories","main category",true))
return false;
if (!validCategory(theForm.subCats,"Select one","program",true))
return false;
if (!validCategory(theForm.subCats2,"Select one","subsystem",true))
return false;
if (!validtextbox(theForm.caseinputbx,theForm.mainCats, true))
return false;
return true;}
// End -->
</script>
</head>
<body lang=EN-US style='tab-interval:.5in'>
<script language="VBScript">
<!--
Dim ready
Public TheForm
Sub Button1_OnClick
ready = 1
End Sub
Sub Button2_OnClick
ready = 2
End Sub
Sub window_onload()
Set TheForm = Document.ValidForm
TheForm.UserName.Value="Test User"
TheForm.Phone.Value=""
TheForm.Date.Value="4/11/2006 8:30:35 AM"
TheForm.SIN.Value="System Name"
TheForm.Address.Value="Street Address"
ready = 0
End Sub
Public Function CheckVal ()
CheckVal = ready
End function
'-->
</script>
<table border="1" width=600 id="Main" bordercolor=#0000FF>
<tr>
<td>
<table border="0" width="100%" id="Title">
<tr>
<td bgcolor=#0000FF>
<p align="center"><b><font size="6" color="#FFFFFF">Problem Form</font></b>
</td>
</tr>
<tr>
<td>
<p align="center"><b><font size="5">IS Self Support System</font></b>
</td>
</tr>
<tr>
<td>
<div align="center">
<div class=Section1>
<form name="ValidForm">
<table border="1" width="100%" id="table1" bordercolor=#FFFFFF>
<tr>
<td width=10% bordercolor=#0000FF style="font: x-small">Name</td>
<td width=40% bordercolor=#0000FF><input type="text" size="25" name="UserName" style="font: x-small"></td>
<td width=10% bordercolor=#0000FF style="font: x-small">Date: </td>
<td width=40% bordercolor=#0000FF><input readonly type="text" size="25" name="Date" style="font: x-small"></td>
</tr>
<tr>
<td bordercolor=#0000FF style="font: x-small">SSATag#:</td>
<td bordercolor=#0000FF><input readonly type="text" size="25" name="SIN" style="font: x-small"></td>
<td bordercolor=#0000FF style="font: x-small">Location: </td>
<td bordercolor=#0000FF><input readonly type="text" size="25" name="Address" style="font: x-small"></td>
</tr>
<tr>
<td bordercolor=#0000FF style="font: x-small">Phone#</td>
<td bordercolor=#0000FF><input type="text" size="25" name="Phone" style="font: x-small"></td>
</tr>
</table>
<hr color=#0000FF></hr>
<table border="1" width="100%" id="table2" bordercolor=#0000FF>
<tr>
<td width=1>Categories:</td>
<td width=1 bordercolor=#FFFFFF><select name='mainCats' style='font: x-small' onChange='redirect(this.options.selectedIndex);'>
<option value='Main Categories'>Main
Categories</option>
<option value='Option One'>Option One</option>
<option value='Option two'>Option Two</option>
<option value='Option Three'>Option Three</option>
<option value='test'>test</option>
<option value='test1'>test1</option>
<option value='test3'>test3</option>
</select></td>
<td width=1 bordercolor=#FFFFFF><div id="hiddenopt1" style="visibility:hidden;"><select name="subCats" style="font: x-small"></select></div></td>
<td bordercolor=#FFFFFF><div id="hiddenopt2" style="visibility:hidden;"><select name="subCats2" style="font: x-small"></select></div></td>
</tr>
</table>
<table border="0" width="100%" id="table3">
<tr>
<td width='15%' style='font: x-small'><div id='hiddenopt8' style='visibility:hidden;'><input type='text'name='caseinputbx'></div></td>
<td style='font: x-small'><div id='hiddenopt7' style='visibility:hidden;'>Pleae enter Option Case Number or NA if no case number</div></td>
</tr>
<tr>
<td width='15%' style='font: x-small'><div id='hiddenopt4' style='visibility:hidden;'>No<input type='radio' value='not reviewed' checked name='chbxreview'>Yes<input type='radio' value='reviewed' name='chbxreview' style='font: x-small'></div></td>
<td style='font: x-small'><div id='hiddenopt3' style='visibility:hidden;'>Has a supervisor / Coach Review it?</div></td>
</tr>
<tr>
<td style='font: x-small'><div id='hiddenopt6' style='visibility:hidden;'>No<input type='radio' value='not due today' checked name='chbxpayment'>Yes<input type='radio' value='due today' name='chbxpayment' style='font: x-small'></div></td>
<td style='font: x-small'><div id='hiddenopt5' style='visibility:hidden;'>Is the applicant payment benefit due today?</div></td>
</tr>
</table>
<hr color=#0000FF></hr>
<table border="0" width="100%" id="table4">
<tr>
<td style="font: x-small"><b>DESCRIPTION:</b><br>
What were you trying to do?<br>
What was the System Response?<br>
Did anyone else have the same problem?
</td>
<td style='font: x-small' width='320'><textarea rows='5' wrap='physical' name='DetailedDescription' cols='37
onKeyDown='textCounter(document.ValidForm.DetailedDescription,document.ValidForm.remLen,800)'
onKeyUp='textCounter(document.ValidForm.DetailedDescription,document.ValidForm.remLen,800)'></textarea><br>
<input readonly type='text' name='remLen' size='5' maxlength='3' value='800'>
<font size='1' color='#FF0000'>characters left</font>
</td>
</tr>
</table>
<BR><input type="button" name="Button1" value="Submit" onmouseover="return validateForm(ValidForm)">&nbsp;&nbsp;&nbsp;<input type="button" name="Button2" value="Cancel">
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
<BR>Delete all screenshots when clicking cancel&nbsp;<input type="checkbox" value="1" name="DeleteScreenShots" checked>
<p>
<a href='C:\Gadwin\temp/Screenname001.jpg' target='_blank'><img src='C:\Gadwin\temp/Screenname001.jpg' border='0' width=35% height=35%></a><br>
<input type='checkbox' name='Screenname001.jpg' value='Screenname001.jpg' checked> Send this image - Screenname001.jpg
</p>
</div>
</form>
</body>
</html>
<script language='JavaScript'>
<!--
var temp = document.ValidForm.subCats;
var tempB = document.ValidForm.mainCats;
var temp2 = document.ValidForm.subCats2;
var tempB2 = document.ValidForm.subCats;
function redirect(x) {
var tempvalue = String(tempB.options[x].value).substring(0,10);
if (tempvalue == 'Option One'){
hiddenopt1.style.visibility = 'visible';
hiddenopt2.style.visibility = 'visible';
hiddenopt3.style.visibility = 'visible';
hiddenopt4.style.visibility = 'visible';
hiddenopt5.style.visibility = 'visible';
hiddenopt6.style.visibility = 'visible';
hiddenopt7.style.visibility = 'visible';
hiddenopt8.style.visibility = 'visible';
} else if (tempvalue == 'Option Two') {
hiddenopt1.style.visibility = 'visible';
hiddenopt2.style.visibility = 'visible';
hiddenopt3.style.visibility = 'hidden';
hiddenopt4.style.visibility = 'hidden';
hiddenopt5.style.visibility = 'hidden';
hiddenopt6.style.visibility = 'hidden';
hiddenopt7.style.visibility = 'visible';
hiddenopt8.style.visibility = 'visible';
} else if (tempvalue == 'Option Thr') {
hiddenopt1.style.visibility = 'visible';
hiddenopt2.style.visibility = 'visible';
hiddenopt3.style.visibility = 'hidden';
hiddenopt4.style.visibility = 'hidden';
hiddenopt5.style.visibility = 'hidden';
hiddenopt6.style.visibility = 'hidden';
hiddenopt7.style.visibility = 'visible';
hiddenopt8.style.visibility = 'visible';
} else {
hiddenopt1.style.visibility = 'hidden';
hiddenopt2.style.visibility = 'hidden';
hiddenopt3.style.visibility = 'hidden';
hiddenopt4.style.visibility = 'hidden';
hiddenopt5.style.visibility = 'hidden';
hiddenopt6.style.visibility = 'hidden';
hiddenopt7.style.visibility = 'hidden';
hiddenopt8.style.visibility = 'hidden';
}
for (m = temp.options.length - 1; m > 0; m--) temp.options[m] = null;
for (i = 0; i < group[x].length; i++) temp.options = new Option(group[x].text, group[x].value);
temp.options[0].selected = true;
for (n = temp2.options.length - 1; n > 0; n--) temp2.options[n] = null;
for (j = 0; j < group2[x].length; j++) temp2.options[j] = new Option(group2[x][j].text, group2[x][j].value);
temp2.options[0].selected = true;
return true;}
//-->
</script>
--------------------------------------------

 
Sort by date Sort by votes
Tilmant,

I have put up a demo that is slightly similar to what I think you are wanting to do here. To see my demo, go to: and click on the "Manipulate properties of document/form elements when checkboxes are selected (JavaScript)" link in the left-hand Nav frame.

I believe that (on a very basic level) the only major change you would need to make to the script I showed there is to call the [tt]SelectViewability()[/tt] function a second time, with the new drop-down menu as the [tt]target[/tt], and the proper selection index as the [tt]condition[/tt].

Go there, check out the demo, then let us know if it helped you any & we can try to give you more help from there if necessary.



I hope this helps;
Rob Hercules
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

TheLazyPig
  • Locked
  • Question
Dropdown (option) using Anguarjs
Replies
0
Views
297
TheLazyPig
TheLazyPig
198709km
  • Locked
  • Question
Grouping XML key value using XSLT
Replies
0
Views
280
198709km
198709km
berkshirea
  • Locked
  • Question
Dropdown, Select, Required 1
Replies
8
Views
181
berkshirea
berkshirea
iambob
  • Locked
  • Question
Send message using Java
Replies
2
Views
112
iambob
iambob
edgarv
  • Locked
  • Question
Field with numbers and characters get nan
Replies
1
Views
107
ggriffit
ggriffit

Part and Inventory Search

Sponsor

Back
Top