Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Apr 2010
    Posts
    57
    Thanks
    18
    Thanked 0 Times in 0 Posts

    conditional Dropdown filter

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

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,990
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    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
    Last edited by Philip M; 05-31-2012 at 05:51 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    vinamr (06-04-2012)

  • #3
    New Coder
    Join Date
    Apr 2010
    Posts
    57
    Thanks
    18
    Thanked 0 Times in 0 Posts
    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

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,990
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Quote Originally Posted by vinamr View Post
    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.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    vinamr (06-04-2012)

  • #5
    New Coder
    Join Date
    Apr 2010
    Posts
    57
    Thanks
    18
    Thanked 0 Times in 0 Posts
    Thank you Philip. I really appreciate your help.

    Regards
    Vinny

  • #6
    New Coder
    Join Date
    Apr 2010
    Posts
    57
    Thanks
    18
    Thanked 0 Times in 0 Posts
    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;
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •