View Full Version : Dropdown list and Hiding other fields

08-15-2008, 06:38 PM
I have a complicated ASP form, it has a dropdown list (Select Alpha - it has 10 items – these items pull out from the database) and a few more dropdown lists and textboxes. What we’re trying to do is:

If the customer selects the item A, B, or F from "Select Alpha" ddown list then we don’t want the other dropdownlist and textboxes to display (hiding it). The script I have below works fine.

Here is a question:
All these fields are required. For example: I selected the Item F from "Select Alpha" then other ddownlist and textboxes are hidden. Then I click on the submit button, it keeps asking to select the value of Ddownlist.

Is it possible not to ask selecting option when these fields are hidden?

Please help anyone....Thanks so much

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>

<script language="javascript" type="text/javascript">
function Validator(theForm)
if (theForm.Sel1.selectedIndex == 0){
alert("Please select options 1.");
return false;

if (theForm.ListBoxID2.selectedIndex == 0){
alert("Please select one of the ListBoxID2 options.");
return false;

return (true);


<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'){
} else {
<form name="theForm" action="Submit.asp" onsubmit="return Validator(this)">
<select id="Sel1" name="Sel1" onchange="checkit();">
<option>Select Alpha</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>
<br />
<select name="ListBoxID2">
<option value="">This is my second drop down list</option>
<br />
<select name="ListBoxID3">
<option value="">This is my 3rd drop down list</option>
<br />
<input type="text" id="text3" name="text3" />

<br />
<input type="Submit" value="Submit" name="submit">


08-15-2008, 07:45 PM
The form elements being hidden don't mean that they aren't usable. They are most likely just hidden using css you may also want to disable them because if css is turned off users will be able to see and use those items. You also may want them to not be included in the validation so you may want to create an opt out option for those

08-15-2008, 08:10 PM
sorry, if I'm being obtuse.....do you have any examples ?

08-16-2008, 12:57 AM
Something like this(untested)

function dependencies(dependants/*array*/){
for( i = 0; i<dependants.length; i++ ){
curr = document.getElementById(dependants[i]);
curr.style.display = (curr.style.display == 'none'?'block':'none');
curr.disabled = (curr.disabled == 'disabled'?'':'disabled');

you'll need to make a conditional statement for how you run this and you'll need to add something like this to some sort of conditional for what elements you validate

if(/*your origional condition*/ && disabled != 'disabled')

08-19-2008, 05:05 PM
Thanks ninnypants for the idea of disable and enble. The question I have on the other post is that how can we pass the record set in....
any helps are greatly appeciated.

08-19-2008, 07:01 PM
That's what the second section of code is about it checks to see if the form elements are disabled and if so it skips over them during validation