Dropdown list and Hiding other fields

**vbmntv** · 08-14-2008, 02:05 PM

Hi, ths is my first time in this forum. I hope someone could help me.

I have a complicated ASP form, it has a dropdown list (it has 10 items – these items pull out from the database) and 3 textboxes. What we’re trying to do is:

If the customer selects the item A, B, D, or F then we don’t want the 3 textboxes to display (hiding it).

How can we do that? Please help - urgent. Thank you very much.

**Skeddles** · 08-14-2008, 03:24 PM

do you want the boxes on the next page or on the same page, like to change as you pick them?

**vbmntv** · 08-14-2008, 03:47 PM

On the same page. I am guessing using
<selectonchange=....> but how. ....i am so clueless. Thanks for your help.

**nyef** · 08-14-2008, 03:48 PM

This is a javascript question, not an ASP question (as the dropdown box is changed client-side, the hiding/displaying of the text fields needs to be clientside also).

Here you go:

Code:

<script type="text/javascript">
function checkit(){
  var s1=document.getElementById('select1');
  var t1=document.getElementById('text1');
  var t2=document.getElementById('text2');
  var t3=document.getElementById('text3');
   if (s1.options[s1.selectedIndex].value=='A' || s1.option[s1.selectedIndex].value=='B' || s1.options[s1.selectedIndex].value=='D' || s1.options[s1.selectedIndex].value=='F'){
      t1.style.visibility='hidden';
      t2.style.visibility='hidden';
      t3.style.visibility='hidden';
    } else {
      t1.style.visibility='visible';
      t2.style.visibility='visible';
      t3.style.visibility='visible';
    }
}
</script>
<form>
<select id="select1" name="select1" onchange="checkit();">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<input type="text" id="text1" name="text1" />
<input type="text" id="text2" name="text2" />
<input type="text" id="text3" name="text3" />
</form>

**vbmntv** · 08-14-2008, 04:26 PM

Thanks nyef.

It doesn't work. It gives an error saying " option is null or not an object" . it points to this line: if (s1.options[s1.selectedIndex].value=='A' || s1.option[s1.selectedIndex.......

**itHighway** · 08-15-2008, 11:48 AM

You can put the text boxes in layers/divs and by using "OnChange" function in select box and using javascript, show/hide text boxes in divs.

**vbmntv** · 08-15-2008, 12:02 PM

I figured it out why it gives me that error.

Now, I am dealing with another challenge is that I have 2 more dropdown boxes. These dd are required fields. If these fields are hidden, click on the submit button, it keeps asking to select the value.

Is it possible not to ask if these fields are hidden?

Below is the code:

Code:

 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
 
<script language="javascript" type="text/javascript">
function Validator(theForm)
{
if (theForm.Sel1.selectedIndex == 0){
alert("Please select options 1.");
theForm.Sel1.focus();
return false;
}
 
if (theForm.ListBoxID2.selectedIndex == 0){
alert("Please select one of the ListBoxID2 options.");
//theForm.ListBoxID2.focus();
return false;
}
 
return (true);
}
 
</script>
 
<script type="text/javascript">
function checkit(){
//var s1=document.getElementById('select1');
var s1=document.theForm.Sel1[document.theForm.Sel1.selectedIndex]
var t1=document.getElementById('ListBoxID2');
var t2=document.getElementById('ListBoxID3');
var t3=document.getElementById('text3');
if (s1.value=='A' || s1.value=='F'){
t1.style.visibility='hidden';
t2.style.visibility='hidden';
t3.style.visibility='hidden';
} else {
t1.style.visibility='visible';
t2.style.visibility='visible';
t3.style.visibility='visible';
}
}
</script>
<form name="theForm" action="Submit.asp" onsubmit="return Validator(this)">
<select id="Sel1" name="Sel1" onchange="checkit();">
<option>Select</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="F">F</option>
<option value="H">H</option>
</select>
<br />
<select name="ListBoxID2">
<option>Select</option>
<option value="">This is my second drop down list</option>
</select>
<br />
<select name="ListBoxID3">
<option value="">This is my 3rd drop down list</option>
</select>
<br />
<input type="text" id="text3" name="text3" />
 
<br />
<input type="Submit" value="Submit" name="submit">
 
</form>
</body>
</html>

**chrishirst** · 08-16-2008, 11:04 AM

Sounds like you would be better creating the selects dynamically rather than hiding/showing them. That way you can send the receiving script default values using a hidden field which would be destroyed when you create the select boxes.