locked
Validator on two dropdowns RRS feed

  • Question

  • User876561910 posted

    Hi

    Say I have a form with two dropdowns DDL_1 and DDL_2

    Is there a compare validator or something else which I can use to stop them both being Yes.

    They can be both No, but only one can be Yes

    So a user can only select Yes in one of the dropdowns, or they can just leave them alone on the default No

    I need to stop a user going on to the next form with 2 Yes's so I think a validator would be best (if it's possible)

    Thanks.



    Like this

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <%@ Page Language="C#" %>
    <html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
    
    <head runat="server">
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Untitled 1</title>
    
    <script language="javascript" type="text/javascript"> 
    function ShowStuff_1(){ 
    if (document.getElementById('DDL_1').value=='Yes')
     document.getElementById('Label1').style.display='block';
    	else
    document.getElementById('Label1').style.display='none'; 
    	}
    
    function ShowStuff_2(){ 
    if (document.getElementById('DDL_2').value=='Yes')
     document.getElementById('Label2').style.display='block';
    	else
    document.getElementById('Label2').style.display='none'; 
    	}
    	
    </script>
    
    <style type="text/css">
    .hide {
    	display: none;
    }
    </style>
    
    </head>
    
    <body>
    
    <form id="form1" runat="server">
    
    <asp:dropdownlist ID="DDL_1" runat="server"  onchange="ShowStuff_1()">
    	<asp:listitem>No</asp:listitem>
    	<asp:listitem>Yes</asp:listitem>
    </asp:dropdownlist>
    <br/>
    		<asp:Label runat="server" CssClass="hide" Text="You selected Yes in the first dropdown" id="Label1"></asp:Label>
    <br/>
    <asp:dropdownlist ID="DDL_2" runat="server"  onchange="ShowStuff_2()">
    	<asp:listitem>No</asp:listitem>
    	<asp:listitem>Yes</asp:listitem>
    </asp:dropdownlist>
    	<br />
    		<asp:Label runat="server" CssClass="hide" Text="You selected Yes in the second dropdown" id="Label2"></asp:Label>
    </form>
    
    </body>
    
    </html>
    

    Wednesday, June 12, 2019 9:12 AM

Answers

  • User-2065543531 posted

    Hi janehollin 

    To achieve your requirements, I suggest that you use "html  disabled attribute"

    https://www.w3schools.com/tags/att_disabled.asp 

    This is an example

    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    <script type="text/javascript">
    
    function ShowStuff_1() {
    
    if ( document.getElementById("DDL_1").value === 'Yes') {
    document.getElementById("DDL_2").options[1].setAttribute("disabled", "disabled");
    document.getElementById('Label1').style.display = 'block';
    } else {
    document.getElementById("DDL_2").options[1].removeAttribute("disabled"); 
    document.getElementById("Label1").style.display = 'none';
    }
    
    }
    
    function ShowStuff_2(){ 
    if (document.getElementById("DDL_2").value === 'Yes') {
    document.getElementById("DDL_1").options[1].setAttribute("disabled", "disabled");
    document.getElementById("Label2").style.display = 'block';
    } else {
    document.getElementById("DDL_1").options[1].removeAttribute("disabled");
    document.getElementById("Label2").style.display = 'none';
    }
    
    }
    
    </script>
    
    <style type="text/css">
    .hide {
    display: none;
    }
    </style>
    </head>
    <body>
    <form id="form1" runat="server">
    <asp:dropdownlist ID="DDL_1" runat="server" onchange="ShowStuff_1()">
    <asp:listitem>No</asp:listitem>
    <asp:listitem>Yes</asp:listitem>
    </asp:dropdownlist>
    <br/>
    <asp:Label runat="server" CssClass="hide" Text="You selected Yes in the first dropdown" id="Label1"></asp:Label>
    <br/>
    <asp:dropdownlist ID="DDL_2" runat="server" onchange="ShowStuff_2()">
    <asp:listitem>No</asp:listitem>
    <asp:listitem>Yes</asp:listitem>
    </asp:dropdownlist>
    <br />
    <asp:Label runat="server" CssClass="hide" Text="You selected Yes in the second dropdown" id="Label2"></asp:Label>
    </form>
    </body>
    </html>

    Best Regards

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 12, 2019 11:18 AM

All replies

  • User-2065543531 posted

    Hi janehollin 

    To achieve your requirements, I suggest that you use "html  disabled attribute"

    https://www.w3schools.com/tags/att_disabled.asp 

    This is an example

    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    <script type="text/javascript">
    
    function ShowStuff_1() {
    
    if ( document.getElementById("DDL_1").value === 'Yes') {
    document.getElementById("DDL_2").options[1].setAttribute("disabled", "disabled");
    document.getElementById('Label1').style.display = 'block';
    } else {
    document.getElementById("DDL_2").options[1].removeAttribute("disabled"); 
    document.getElementById("Label1").style.display = 'none';
    }
    
    }
    
    function ShowStuff_2(){ 
    if (document.getElementById("DDL_2").value === 'Yes') {
    document.getElementById("DDL_1").options[1].setAttribute("disabled", "disabled");
    document.getElementById("Label2").style.display = 'block';
    } else {
    document.getElementById("DDL_1").options[1].removeAttribute("disabled");
    document.getElementById("Label2").style.display = 'none';
    }
    
    }
    
    </script>
    
    <style type="text/css">
    .hide {
    display: none;
    }
    </style>
    </head>
    <body>
    <form id="form1" runat="server">
    <asp:dropdownlist ID="DDL_1" runat="server" onchange="ShowStuff_1()">
    <asp:listitem>No</asp:listitem>
    <asp:listitem>Yes</asp:listitem>
    </asp:dropdownlist>
    <br/>
    <asp:Label runat="server" CssClass="hide" Text="You selected Yes in the first dropdown" id="Label1"></asp:Label>
    <br/>
    <asp:dropdownlist ID="DDL_2" runat="server" onchange="ShowStuff_2()">
    <asp:listitem>No</asp:listitem>
    <asp:listitem>Yes</asp:listitem>
    </asp:dropdownlist>
    <br />
    <asp:Label runat="server" CssClass="hide" Text="You selected Yes in the second dropdown" id="Label2"></asp:Label>
    </form>
    </body>
    </html>

    Best Regards

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 12, 2019 11:18 AM
  • User876561910 posted

    laughing

    Thanks

    I was going to use something like this - but your methods seems more fluid

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <%@ Page Language="C#" %>
    <html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
    
    <head runat="server">
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Untitled 1</title>
    
    <script language="javascript" type="text/javascript"> 
          function Calculate()   
           { 
             var q = parseInt(document.getElementById("DDL_1").value); 
             var r = parseInt(document.getElementById("DDL_2").value); 
             document.getElementById("txtResults").value = q + r;   
           }  
           </script>
    
    <style type="text/css">
    .hide {
    	display: none;
    }
    </style>
    
    </head>
    
    <body>
    
    <form id="form1" runat="server">
    
    <asp:dropdownlist ID="DDL_1" runat="server" OnChange="Calculate()"  >
    	<asp:listitem Value="0">No</asp:listitem>
    	<asp:listitem Value="1">Yes</asp:listitem>
    </asp:dropdownlist>
    <br/>
    <asp:dropdownlist ID="DDL_2" runat="server" OnChange="Calculate()"  >
    	<asp:listitem Value="0">No</asp:listitem>
    	<asp:listitem Value="1">Yes</asp:listitem>
    </asp:dropdownlist>
    	<br />
    <asp:TextBox id="txtResults" CssClass="hide" runat="server"></asp:TextBox>
    <asp:CompareValidator ID="CompareValidator1" runat="server"
          ControlToValidate="txtResults" ErrorMessage="You can not have two yes's"
          Operator="LessThan" Type="Integer"
          ValueToCompare="2" />
          
          <br/>
          			<asp:Button  runat="server"  postbackurl="someotherpage.aspx"  CssClass="lead_button" text="Continue" id="Button1" />				
    </form>
    
    </body>
    
    </html>
    

    Wednesday, June 12, 2019 11:20 AM
  • User-2065543531 posted

    You are very welcome 

    Best Regards

    Wednesday, June 12, 2019 11:39 AM