...

View Full Version : 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.



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
<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
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.


<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



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;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum