conditional Dropdown filter

vinamr · 05-31-2012, 04:30 PM

Hi,

I have two dropdowns on a registration form .. one for Langauge and the other for Arts. If a user selects a Language class they cannot select Arts class and vice versa.

I have the below code however it seems incomplete. Would appreciate if someone could help me with the syntax. Thanks.

Code:

if((childlang_true != 0)
&& childarts_true != 0 && childarts == 1){
alert("Cannot select Arts for Child when language class is selected.");
return false;
}

Philip M · 05-31-2012, 05:36 PM

Code:

<select id = "childlang" onchange = "checkit()">
<option value = "">Select a language</option>
<option value = "English">English</option>
<option value = "French">French</option>
<option value = "Chinese">Chinese</option>
</select>
<select id = "childarts" onchange = "checkit()">
<option value = "">Or select an arts subject</option>
<option value = "Music">Music</option>
<option value = "Sculpture">Sculpture</option>
<option value = "Painting">Painting</option>
</select>
<span id = "message" style = "color:red";></span>

<script type = "text/javascript">

function checkit() {
var msg = " You may not select a language class if you have selected an arts class or vice-versa. Please choose again.";
document.getElementById("message").innerHTML = "";
var val1 = document.getElementById("childlang").value;
var val2 = document.getElementById("childarts").value;
if (val1 != "" && val2 !="") {
document.getElementById("message").innerHTML = msg;
document.getElementById("childlang").selectedIndex = 0;
document.getElementById("childarts").selectedIndex = 0;
return false;
}

}

</script>

"If you don't read the newspaper, you are uninformed; if you do read the newspaper, you are misinformed." - Mark Twain

vinamr · 06-04-2012, 06:21 PM

Hi Philip,

Apologize for the late reply as I was travelling and thanks much for your code. It did work.

However a minor tweak hoping you can help me.

1) When Language dropdown is selected a member can only select Arts-2 class from the Arts dropdown (but not Arts-1 because all language classes and Arts-1 class are offerred at the same time 10:00 - 11:30). Hence the clash.

2) Instead of a message I want some sort of popup alert informing the member that he/she cannot select arts when language is selected.

Thanks for your help in advance.

Regards
Vinny

Philip M · 06-04-2012, 07:43 PM

Quote:

Originally Posted by vinamr

Hi Philip,

Apologize for the late reply as I was travelling and thanks much for your code. It did work.

However a minor tweak hoping you can help me.

1) When Language dropdown is selected a member can only select Arts-2 class from the Arts dropdown (but not Arts-1 because all language classes and Arts-1 class are offerred at the same time 10:00 - 11:30). Hence the clash.

2) Instead of a message I want some sort of popup alert informing the member that he/she cannot select arts when language is selected.

Thanks for your help in advance.

Regards
Vinny

You did not ask for that! It just makes it harder for everyone if you change your requirements.

Code:

<html>
<head>
<body>
<select id = "childlang" onchange = "checkit()">
<option value = "">Select a language</option>
<option value = "English">English</option>
<option value = "French">French</option>
<option value = "Chinese">Chinese</option>
</select>
<select id = "childarts" onchange = "checkit()">
<option value = "">Or select an arts subject</option>
<option value = "Arts-1">Arts-1</option>
<option value = "Arts-2">Arts-2</option>
</select>
<span id = "message" style = "color:red";></span>

<script type = "text/javascript">

function checkit() {
var msg = " You may not select a language class if you have selected an Arts-1 class or vice-versa. Please choose again.";
document.getElementById("message").innerHTML = "";
var val1 = document.getElementById("childlang").value;
var val2 = document.getElementById("childarts").value;
if (val1 != "" && val2 =="Arts-1") {
document.getElementById("message").innerHTML = msg;
document.getElementById("childlang").selectedIndex = 0;
document.getElementById("childarts").selectedIndex = 0;
return false;
}

}

</script>

</body>
</html>

Pop-ups (alerts) are deprecated and obsolete. They may be blocked by the browser. The proper way to display a message to the user is as I have indicated.

vinamr · 06-04-2012, 08:11 PM

Thank you Philip. I really appreciate your help.

Regards
Vinny

vinamr · 06-08-2012, 05:38 PM

Hi Philip,

I tweaked your Java Script to make it work in a GRID ADD/GRID EDIT .asp page. The below code works fine in GRID ADD .. however it fails in GRID EDIT mode. Is there something that I am missing? Would appreciate a few pointers. Thanks - Vinny

Code:

function checkit() { 
var val1 = document.getElementById("x1_zLanguage").value;
var val2 = document.getElementById("x1_Shloka").value; 
var val3 = document.getElementById("x2_zLanguage").value;
var val4 = document.getElementById("x2_Shloka").value;  
var val5 = document.getElementById("x3_zLanguage").value;
var val6 = document.getElementById("x3_Shloka").value; 
var val7 = document.getElementById("x4_zLanguage").value;
var val8 = document.getElementById("x4_Shloka").value; 
var val9 = document.getElementById("x5_zLanguage").value;      
var val10 = document.getElementById("x5_Shloka").value;   
if ((val1 != "" && val2 =="401 Morning Shloka")) { 
alert("Cannot select 401 Morning Shloka class when Language class is selected.");      
document.getElementById("x1_zLanguage").selectedIndex = 0;
document.getElementById("x1_Shloka").selectedIndex = 0;
return false;                          
}   
if ((val3 != "" && val4 =="401 Morning Shloka")) { 
alert("Cannot select 401 Morning Shloka class when Language class is selected.");      
document.getElementById("x2_zLanguage").selectedIndex = 0;
document.getElementById("x2_Shloka").selectedIndex = 0;
return false;                          
} 
if ((val5 != "" && val6 =="401 Morning Shloka")) { 
alert("Cannot select 401 Morning Shloka class when Language class is selected.");      
document.getElementById("x3_zLanguage").selectedIndex = 0;
document.getElementById("x3_Shloka").selectedIndex = 0;
return false;                          
}  
if ((val7 != "" && val8 =="401 Morning Shloka")) { 
alert("Cannot select 401 Morning Shloka class when Language class is selected.");      
document.getElementById("x4_zLanguage").selectedIndex = 0;
document.getElementById("x4_Shloka").selectedIndex = 0;
return false;                          
} 
if ((val9 != "" && val10 =="401 Morning Shloka")) { 
alert("Cannot select 401 Morning Shloka class when Language class is selected.");      
document.getElementById("x5_zLanguage").selectedIndex = 0;
document.getElementById("x5_Shloka").selectedIndex = 0;
return false;                          
}  
return true;
}